class Search {

    page = 1;
    totalPage = 0;
    keyword = "";
    totalArr = [];

    constructor() {
        util.header(
            `<input class="flex1" type="text" placeholder="输入关键字">`,
            `<div class="button">搜索</div>`,
            `<i class="iconfont icon-fanhui"></i>`
        )
        this.getSearchHotData()
        this.event()
    }


    async getSearchHotData() {
        let { hotKeyword, recommend } = await searchServe.searchHot()

        $(".search_list ul").innerHTML = hotKeyword.maps(v => {
            return `
                <li>
                    <a>${v}</a>
                </li>
            `
        });

        item(".search_recommend", recommend, 2)

        $(".search_recommend ul li").forEach(v => {
            v.onclick = () => {
                // 把你点击的文字放到搜索框里面
                $(".header input").value = v.innerText
                $(".header .button").onclick()
            }
        })
    }

    event() {

        let input = $(".header input")

        $(".header .button").onclick = async () => {
            if (input.value.length != 0) {
                this.keyword = input.value
                this.totalArr = []
                await this.getSearchKeyData()
                if (this.totalArr.length != 0) {
                    util.hidden(".no-search")
                    item(".have-search ul", this.totalArr)
                    util.show(".have-search")
                    this.onscroll()
                }

            }
        }

        input.oninput = () => {
            if (input.value.length == 0) {
                util.show(".no-search")
                util.hidden(".have-search")
            }
        }

    }

    // 用来发送搜索请求的
    async getSearchKeyData() {
        let { totalPage, list } = await searchServe.searchKey({
            keyword: this.keyword,
            page: this.page
        })
        this.totalPage = totalPage
        list.forEach(v => this.totalArr.push(v));
    }

    // 滚动到底部实现自动加载下一页数据
    onscroll() {
        window.onscroll = async () => {
            var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);

            if (clientHeight + Math.ceil(scrollTop) >= scrollHeight) {
                this.page += 1
                if (this.page <= this.totalPage) {
                    await this.getSearchKeyData()
                    item(".have-search ul", this.totalArr)
                }
            }
        }
    }
}

new Search