<template>
	<div class="text-center">
		<!-- <img src="../assets/images/lg-logo.png" style="height:200px;"/> -->
		<img v-if="isDomainName_PIC" src="../assets/images/home.png" style="width: 50%;"/>
    <img v-else src="../assets/images/home-hp.png" style="width: 50%;"/>
		<!-- <div class="q-mt-lg text-h3 text-grey-4 text-center">歡迎使用PIC同業預定系統</div> -->
	</div>
</template>

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

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) {
    const data = reactive({
      isDomainName_PIC:true
    })

    // 根据域名渲染logo
    data.isDomainName_PIC = inject(DirtionmaryHelper.DOMAIN_NAME)

		return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')),...toRefs(data), }
	}
})
</script>
