import styles from "./Home.module.less";

import { Component, Ref, Setup, Vue } from 'vue-facing-decorator'
import Header from '@/components/Header'
import { RouteLocationNormalizedLoaded, Router, useRoute, useRouter } from "vue-router";
import { ElButton, Icons } from "shared/element-plus";


interface ListItemType {
    id: number
    title: string
}

@Component()
export default class Home extends Vue {

    counter: number = 1;

    @Ref
    readonly refH1!: HTMLDivElement

    @Setup((props, ctx) => useRouter())
    router!: Router

    @Setup((props, ctx) => useRoute())
    route!: RouteLocationNormalizedLoaded

    newList: ListItemType[] = [
        { id: 1, title: '新闻1' },
        { id: 2, title: '新闻2' },
        { id: 3, title: '新闻3' },
    ]

    async created() {

    }

    async addCount() {
        // console.log(await nacos-cluster.find('app-product'))
        // console.log("ref dom: ", this.refH1)
        // this.router.push({ name: 'about' })
        // this.route.query
        this.counter++
    }

    testHtml() {
        return <p>测试html jsx 函数</p>
    }


    render() {
        return (
            <div class={ styles.Home }>
                <h1 ref="refH1" class={ styles.title }>首页</h1>
                <ElButton type="primary" icon={ Icons.Search }>element-plus按钮</ElButton>
                <p onClick={ this.addCount }>counter 响应式变量（点我）：{ this.counter }</p>
                <Header
                    list={ this.newList }
                    text={ "测试" }
                    // v-slots= { {
                    //     default: () => <div class="default">父到子 default 插槽</div>,
                    //     haveName: () => <div class="haveName">父到子 具名 插槽</div>,
                    //     item: (val: ListItemType) => <li key={ val.id }>{ val.title }</li>
                    // } }
                >
                    { {
                        default: () => <div class="default">父到子 default 插槽</div>,
                        haveName: () => <div class="haveName">父到子 具名 插槽</div>,
                        item: (val: ListItemType) => <li key={ val.id }>{ val.title }</li>
                    } }
                </Header>
                { this.testHtml() }
            </div>
        )
    }
}