import { defineComponent, reactive, onMounted } from 'vue'
import Header from '@/components/Header'
import { HttpConfig } from '@shared/config/index'
import { UrlCheckUtils } from '@shared/utils'
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

interface stateType {
  list: ListItemType[]
}

interface ListItemType {
  id: number
  title: string
}

export default defineComponent({
  name: "Home",
  setup() {

    const counterStore = useCounterStore()
    const { increment } = counterStore
    const { count, doubleCount } = storeToRefs(counterStore)

    const state = reactive<stateType>({
      list: [
        { id: 1, title: '新闻1' },
        { id: 2, title: '新闻2' },
        { id: 3, title: '新闻3' },
      ]
    })



    onMounted(() => {
      // console.log("onMounted: ", HttpConfig.DevBaseUrl);
      console.log("check: ", UrlCheckUtils.check())
    })

    // 定义处理子组件事件的函数
    const handleChildEvent = (message: string) => {
      console.log('收到子组件事件：', message)
    }


    return () => (
      <div class="home">
        <Header
          text={state.list}
          onClick={() => {
            console.log("通过props自定义事件传给子组件");
          }}
          onSendMessage={handleChildEvent}>
          {{
            scoped: (item: ListItemType) => <li key={item.id}>{item.title}</li>,
            header: () => <div class="header">父到子 具名 插槽</div>,
            default: () => <div class="default">父到子 default 插槽</div>
          }}
        </Header>
        <h1>首页</h1>
        <div class="count" onClick={increment}>点我+1：{count.value}</div>
      </div>
    )
  }
})