import { Component, Prop, TSX, Vue } from 'vue-facing-decorator'

interface Props {
    text?: string
    list?: ListItemType[]
}

interface ListItemType {
    id: number
    title: string
}

@Component()
export default class Header extends TSX<Props>()(Vue) implements Props {

    @Prop({ default: '默认数值' })
    text!: string;

    @Prop()
    list!: ListItemType[];

    created() {
        console.log("created: ", this)
    }

    render() {
        return (
            <div class="header">
                头部组件
                <p>{ this.text }</p>
                { this.$slots.default?.() }
                { this.$slots.haveName?.() }
                <ul>
                    {
                        this.list.map(
                            item =>
                                this.$slots.item?.(item)
                        )
                    }
                </ul>
            </div>
        )
    }
}