class Index {
    constructor() {
        this.index = 0;
        this.principa = []
        footer();
        this.initSwiper();
        this.getType().then(() => this.getIndex());
        

    }

    async getType() {

        // 本地无数值，那么发送请求
        if (localStorage.getItem("principal") == null) {
            var { principal, additional } = await indexService.type()
            localStorage.setItem("principal", JSON.stringify(principal))
            localStorage.setItem("additional", JSON.stringify(additional))
        } else {
            var principal = JSON.parse(localStorage.getItem("principal"))
            var additional = JSON.parse(localStorage.getItem("additional"))
        }
      


        this.principal = principal;

        console.log(this.principal);

        // TODO 改造这个代码，实现下面的作业
        this.principal.forEach((v, i) => {
            $(".header_menu ul").innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`;
            $(".swiper .swiper-wrapper").innerHTML += `
                <div class="swiper-slide">
                    <div class="list">
                    </div>
                </div>
            `;
        });


        click(".header_menu ul li", (v, i) => {
            _(".header_menu ul li").forEach(v => v.classList.remove("active"))
            v.classList.add("active")
            this.index = i
            this.getClassList()
            this.mySwiper.slideTo(i)
        })

        _(".swiper .swiper-wrapper .swiper-slide").forEach((v,i) => {
            if (i != 0) {
                v.onscroll = () => {
                    const {clientHeight, scrollHeight, scrollTop} = v;
                    var distance = scrollHeight- scrollTop - clientHeight;
                    if (distance <= 0.5) {
                        this.principal[this.index].page += 1
                        if (this.principal[this.index].page <= this.principal[this.index].total_page) {
                            this.getClassList("loadMore")
                        }
                    }
                }
            }
        })
    }

    async getIndex() {
        var res = await indexService.index()
        this.principal[this.index].content = res.list
        item(
            _(".swiper .swiper-wrapper .swiper-slide .list")[this.index],
            this.principal[this.index].content
        )
    }

    async getClassList(type = "click") {
        

        var getList = async () => {
            var res = await indexService.classList({
                page: this.principal[this.index].page,
                id: this.principal[this.index].id
            });
            this.principal[this.index].content = [
                ...this.principal[this.index].content,
                ...res.data
            ]
            this.principal[this.index].total_page = res.total_page
            console.log("getClassList: ", this.principal);

            // 渲染页面（注意：把指定数组下标的content渲染到对应下标的 swiper-slide）
            item(
                _(".swiper .swiper-wrapper .swiper-slide .list")[this.index],
                this.principal[this.index].content
            )
        }

        
        if (type == "click") {
            if (this.principal[this.index].content.length == 0 && this.index != 0) {
                getList();
            }
        } else {
            getList();
        }
    }


    initSwiper() {
        var self = this;
        this.mySwiper = new Swiper('.swiper', {
            direction: 'horizontal',
            on: {
                slideChangeTransitionEnd: function () {
                    _(".header_menu ul li").forEach(v => v.classList.remove("active"))
                    _(".header_menu ul li")[this.activeIndex].classList.add("active")

                    self.index = this.activeIndex
                    self.getClassList()
                },
            },
        })
    }
}

new Index()