import { Autobind, Component, Link, Mut, VueComponent } from 'vue3-oop'
import Header from '@/components/Header'

interface ListItemType {
    id: number
    title: string
}

@Component()
export default class Home extends VueComponent {

    @Mut()
    count: number = 1

    @Mut()
    text: string = "Home props 传给 Header 的字符串"

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

    @Link() H1?: HTMLDivElement

    @Autobind()
    async addCount() {
        this.count++
        this.text = "22222"
        console.log(this.H1)
    }

    render() {
        return (
            <div class="home" ref="H1">
                <h1>首页</h1>
                <p onClick={ this.addCount }>count响应式变量（点我）：{ this.count }</p>
                <Header
                    v-slots={ {
                        default: () => <div class="default">父到子 default 插槽</div>,
                        haveName: () => <div class="haveName">父到子 具名 插槽</div>,
                        item: (val) => <li key={ val.id }>{ val.title }</li>
                    } }
                    list={ this.newList }
                    text={ this.text }>
                </Header>
            </div>
        )
    }
}