class Search {
    page = 1;
    totalPage = 0;
    keyword = "";
    constructor() {
        header(
            `<input class="flex1" type="text" placeholder="输入关键字">`,
            `<div class="button">搜索</div>`,
            `<i class="iconfont icon-fanhui"></i>`
        )

        this.getSearchHotData()

        this.enevt()
    }


    async getSearchHotData() {
        let { hotKeyword, recommend } = await searchServe.searchHot()
        eachHtml(
            '.search_list ul',
            hotKeyword,
            (v) => `<li><a>${v}</a></li>`
        )

        $(".search_list ul li").click(function () {
            $(".header input").val($(this).text())
            $(".header .button").click()
        })


        eachHtml(
            '.search_recommend',
            recommend,
            (v) => item(v, 2)
        )
    }

    async getSearchKeyData() {
        
        let { totalPage, list } = await searchServe.searchKey({
            keyword: this.keyword,
            page: this.page
        })

        this.totalPage = totalPage

        eachHtml(
            '.have-search ul',
            list,
            (v) => item(v)
        )

        $(".no-search").hide()
        $(".have-search").show()
    }


    enevt() {
        $(".header .button").click(async () => {
            if ($(".header input").val().length != 0) {
                this.keyword = $(".header input").val()
                await this.getSearchKeyData()
            }
        })

        $(".header input").on("input", function () {
            if ($(".header input").val().length == 0) {
                $(".no-search").show()
                $(".have-search").hide()
            }
        });
    }
}

new Search