class Index {
    constructor () {
        this.index = 0;
        this.principal = [] //定义两个全局变量下标和数组

        footer(); //调用底部菜单
        this.getClassList()  //调用
    }

    //调用 getClassList接口
    async getClassList() {
        var self = this;
        var res = await indexServe.classList();
        console.log(res);
        this.principal = res.principal


        this.principal.forEach((v,i) => {
            $(".header_menu ul").html(`
              <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
            `) //对this.principal 进行遍历 向.header_menu ul里面添加li li的数据就是v.title

            $(".page_wrapper").html(`
               <div class="swiper-slide">
                  <div class="list">
                  </div>
                </div>
            `); //向page_wrapper添加swiper-slide（也就是父容器）

            _(".swiper-wrapper .swiper-slide").forEach(v => {
                v.onscroll = () => {
                    const {clientHeight, scrollHeight, scrollTop} = v;
                    const distance = scrollHeight- scrollTop - clientHeight;
                    if(distance <= 0) {
                        // 首页
                        console.log("滚动到底部...");
                        if (this.index == 0) {
                            this.getIndex()
                        } else {
                            this.principal[this.index].page += 1
                            if (this.principal[this.index].page <= this.principal[this.index].total_page) {
                                this.getClassListArr("more")
                            } else {
                                console.log("已经没有数据了！！！");
                            }
                        }
                    }
                }
            })
        })

        click($('.header_menu i'), function () {
            console.log(this);
        })

        click(_(".header_menu ul li"), function () {
            self.changeActive(this.index)
        })

        this.getIndex()
        this.initPage()
    }

    //点击分类的方法
    async getClassListArr(type = "click") {
        var getData = async () => {
            var res = await indexServe.classListArr({
                page: this.principal[this.index].page,
                id: this.principal[this.index].id
                //数组的参数通过数组加下标的方式拿到
            });

            this.principal[this.index].total_page = res.total_page
            //为数组里面添加个总页面total_page

            this.principal[this.index].content = [
                ...this.principal[this.index].content,
                ...res.data   //向content添加数组以及返回的新数组
            ];

            item(
                _(".swiper-slide .list")[this.index],
                // this.principal[this.index].content
                res.data
            ) //调用item父元素加数据
        }

        if (type == "click") {
            if (this.principal[this.index].id != -1)
            //如果数组中id不等于负一也就是不是首页
            {
                if (this.principal[this.index].content.length == 0) 
                //并且数组为0时
                {
                    getData()   //请求数据
                }
            }
        } else {
            getData()
        }
    }
    //更改activ样式
    changeActive(index) {
        this.index = index
        _(".header_menu ul li").forEach(v => v.remove("active"))
        // 对.header_menu ul li进行遍历先删除所有的active
        _(".header_menu ul li")[index].add("active")
        // 再通过数据加下标的方式给添加active
        this.mySwiper.slideTo(index) //点击时页面跟着标题一起切换  必要参数为下标（index）
    }

    //调用index接口
    async getIndex() {
        var res = await indexServe.index();
        this.principal[this.index].content = [ //数组加下标的方式存入数据组中的content
            ...this.principal[this.index].content,
            ...res.list
            //...是指将数组中的元素都取出来
        ];

        item(_(".swiper-slide .list")[this.index], res.list)

    }

    //页面轮播图
    initPage() {
        var self = this; //提前定义一个this
        this.mySwiper = new Swiper('.swiper-container', { //定义一个mySwiper 加了this为全局变量
            direction: 'horizontal', //切换水平滑动
            on:{
                slideNextTransitionEnd: function() {
                    //监听是否滑动结束
                  self.changeActive(this.activeIndex) //获取当前的滑动后的下标
                  self.getClassListArr() 
                },
            },
          })  
    }
}

new Index()