<template>
	<div>
		<img src="../assets/images/lg-logo.png" style="height:200px;"/>
		<div class="q-mt-lg text-h3 text-grey-4 text-center">歡迎使用JVS同業預定系統</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed, ref, toRef, Ref } from 'vue'
import { Todo, Meta } from './models'

function useClickCount() {
	const clickCount = ref(0)
	function increment() {
		clickCount.value += 1
		return clickCount.value
	}

	return { clickCount, increment }
}

function useDisplayTodo(todos: Ref<Todo[]>) {
	const todoCount = computed(() => todos.value.length)
	return { todoCount }
}

export default defineComponent({
	name: 'CompositionComponent',
	props: {
		title: {
			type: String,
			required: true
		},
		todos: {
			type: Array as PropType<Todo[]>,
			default: () => []
		},
		meta: {
			type: Object as PropType<Meta>,
			required: true
		},
		active: {
			type: Boolean
		}
	},
	setup(props) {
		return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) }
	}
})
</script>
