class Index {
    constructor() {
        // 横向菜单的下标
        this.index = 0;
        // 默认横向菜单的数据
        this.principal = []
        footer()
        this.getClassApi();
    }

    async getClassApi() {
        // 第一次打开app，本地没有缓存，发送请求获取菜单
        if (localStorage.getItem("principal") == null) {
            // 请求横向 菜单的数据
            var res = await index.classApi();
            localStorage.setItem("principal", JSON.stringify(res.principal));
            localStorage.setItem("additional", JSON.stringify(res.additional));
            this.principal = res.principal

        // 第二次打开，本地已经有缓存了， 直接使用本地缓存过的菜单数据
        } else {
            this.principal = JSON.parse(localStorage.getItem("principal"))
        }

        // 渲染生成横向菜单和对应的内容
        this.principal.forEach((v,i) => {

            // 生成横向菜单
            $(".header_menu ul").innerHTML += `
               <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
            `;

            // 生成横向菜单对应列表内容
            if (i > 0) {
                $(".swiper-wrapper").innerHTML += `
                   <div class="swiper-slide">${v.title}</div>
                `
            }
            
        });


        // 为每一个内容绑定滚动事件
        var slide = _(".swiper-wrapper .swiper-slide");
        var self = this;
        slide.forEach((v, i) => {
            if (i > 0) {
                v.addEventListener('scroll', function () {
                    if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
                        self.principal[self.index].page += 1;
                        if (self.principal[self.index].page <= self.principal[self.index].total_page) {
                            console.log("请求数据")
                            self.getClassList("loadMore")
                        }
                    }
                })
            }
        })


        // 初始化页面内容的轮播图
        var self = this;
        var mySwiper = new Swiper ('.swiper', {
            direction: 'horizontal',
            on: {
                slideChangeTransitionEnd: function(){
                    self.changeActive(this.activeIndex)
                    self.getClassList();
                },
            },
        })

        // 为菜单的li标签绑定点击事件
        var liArr = _(".header_menu ul li")
        liArr.forEach((v,i) => {
            v.onclick = () => {
                this.changeActive(i)
                mySwiper.slideTo(i)
            }
        })

        this.getIndex();
    }

    async getIndex() {
        var res = await index.indexList();

        var slide = _(".swiper-wrapper .swiper-slide");

        item(slide[this.index],res.list)
    }

    async getClassList(type = "click") {

        var loadData = async () => {
            var res = await index.classList({
                id: this.principal[this.index].id,
                page: this.principal[this.index].page
            })

            this.principal[this.index].total_page = res.total_page;
            // res.data.forEach(v => {
            //     this.principal[this.index].content.push(v)
            // })

            this.principal[this.index].content = [
                ...this.principal[this.index].content,
                ...res.data
            ];

            console.log("this.principal[this.index]: ", this.principal[this.index])
            var slide = _(".swiper-wrapper .swiper-slide");
            item(slide[this.index], res.data)
        }

        if (this.principal[this.index].id != -1) {
            // 滚动加载更多
            if (type == "loadMore") {
                loadData();
            // 点击 和 滑动页面
            } else  {
                if (this.principal[this.index].content.length == 0) {
                    loadData();
                }
            }
        }

    }

    changeActive(index) {
        this.index = index;
        var liArr = _(".header_menu ul li")
        liArr.forEach(item => item.classList.remove("active"))
        liArr[index].classList.add("active")
    }
}


new Index();