class Domestic {
    mySwiper = null;
    tagList = [];
    index = localStorage.getItem("index") || 0;

    // 原生js dom操作全部忘记都没关系
    // diff 虚拟dom 映射（局部渲染） 到真实dom
    constructor() {
        header(
            `<div class="header_title flex1 ellipsis">分类</div>`,
            ``,
            ``
        )
        footer()
        this.getTagServeData()
    }


    async getTagServeData() {
        let self = this;

        this.tagList = await tagServe.tagList()
        console.log(this.tagList);

        eachHtml(
            ".type_list",
            this.tagList,
            (v, i) => `<li class="${i == this.index ? 'active' : ''}">${v.title}</li>`
        )

        $(".swiper-wrapper").append(
            this.tagList.map(v => {
                return `<div class="swiper-slide recommend-model default-model">
                  <ul class="flex list p15 js"></ul>
                </div>`
            })
        )

        $(".type_list li").click(function () {
            $(this).addClass("active").siblings().removeClass("active")
            self.mySwiper.slideTo($(this).index())
        })

        this.initSwiper()

        if (this.index == 0) {
            await this.getTagInfoData()
        } else {
            console.log("this.index: ", this.index);
            this.mySwiper.slideTo(this.index)
        }

        this.onIScroll()
    }

    // 第一次调用 点击按钮（滑动轮播图） click
    // 第二次调用 滚动加载 scroll
    async getTagInfoData(type = "click") {

        let loadData = async () => {
            let { totalPage, list } = await tagServe.tagInfo({
                url: this.tagList[this.index].url,
                page: this.tagList[this.index].page
            })

            this.tagList[this.index].totalPage = totalPage
            this.tagList[this.index].content = [
                ...this.tagList[this.index].content,
                ...list
            ]

            // 向不同的 ul 中插入不同的内容
            eachHtml(
                // $(".swiper-slide ul") 返回的是数组
                // eq 用来获取数组+下标的
                // [1,2,3][0] 取到的虚拟dom，这种无法使用jquery方法
                $(".swiper-slide ul").eq(this.index),
                list,
                (v) => item(v)
            )

            //this.onIScroll()
        }

        if (type == "click") {
            if (this.tagList[this.index].content.length == 0) {
                // 加载请求
                loadData()
            }
        } else {
            // 加载请求
            loadData()
        }
    }

    initSwiper() {
        let self = this;
        this.mySwiper = new Swiper('.type_list_content', {
            on: {
                slideChange: async function () {
                    self.index = this.activeIndex
                    localStorage.setItem("index", self.index)
                    await self.getTagInfoData()
                    $(".type_list li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
                },
            },
        })
    }

    onIScroll() {

        let self = this;

        //  $(window)
        $(".swiper-slide").scroll(async function () {
            let scrollTop = $(this).scrollTop();
            let ulHeight = $(this).find("ul").height()
            // 可视区域高度 529
            let windowHeight = $(this).height();

            console.log("scrollTop: ", scrollTop);
            console.log("windowHeight: ", windowHeight);
            console.log("ulHeight: ", ulHeight);

            if (Math.round(scrollTop + windowHeight - 15) >= parseInt(ulHeight)) {
                console.log("到底部");
                self.tagList[self.index].page += 1
                if (self.tagList[self.index].page <= self.tagList[self.index].totalPage) {
                    await self.getTagInfoData("scroll")
                }
            }
        });
    }
}

new Domestic