class Index {
    constructor() {
        this.indexList = [
            { id: 1, title: '推荐', content: [], page: 1, totalPage: 0 },
            { id: 2, title: '时令', content: [], page: 1, totalPage: 0 },
            { id: 3, title: '食肉', content: [], page: 1, totalPage: 0 },
            { id: 4, title: '素食', content: [], page: 1, totalPage: 0 },
            { id: 5, title: '烘焙', content: [], page: 1, totalPage: 0 },
        ];
        this.index = 0;
        this.getBanner();
        this.getType();
        this.threeMeals();
        this.getIndex();
        this.renderMRSC();
    }

    async threeMeals() {
        var res = await server.threeMeals();
        res.forEach((v,i) => {
            $(".ddd ul").append(`
              <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
            `);

            $(".mrsc_swiper .swiper-wrapper").append(`
              <div class="swiper-slide">
                  <div class="mrsc_list">
                  ${
                    v.content.map((item,index) => {
                      return `
                        <a href="info.html?url=${item.url}">
                          <div class="mrsc_list_item">
                            <img src="${item.img}" alt="">
                            <p class="tips_titles">${item.title}</p>
                            <span class="tips_text">养</span>
                            <p class="tips">${item.des}</p>
                          </div>
                        </a>
                      `
                    }).toString().replaceAll(",", "")
                   }
                  </div>
                </div>
            `);
        })

        $(".ddd ul li").click(function () {
            // 链式调用
            $(this).addClass("active").siblings().removeClass("active")
            mySwiper.slideTo($(this).index())
        });

        var mySwiper = new Swiper ('.mrsc_swiper', {
            direction: 'horizontal',
            on: {
                slideChangeTransitionEnd: function(){
                    $(".ddd ul li")
                        .eq(this.activeIndex)
                        .addClass("active")
                        .siblings()
                        .removeClass("active")
                },
            },
            pagination: {
                el: '.swiper-pagination',
            },
        })
    }

    async getType() {
        var res = await server.type();
        res.forEach(v => {
            $(".menu").append(`
             <li>
              <a href="./typeList.html?url=${v.href}">
                <img src="${v.img}" alt="">
                <p>${v.title}</p>
              </a>
             </li>
            `)
        })
    }

    async getBanner() {
        var res = await server.banner();
        res.forEach(v => {
            $(".banner_swiper .swiper-wrapper")
                .append(`<div class="swiper-slide">
                          <a href="./bannerinfo.html?url=${v.url}"><img src="${v.img}" alt=""></a>
                        </div>`)
        });

        new Swiper ('.banner_swiper', {
            direction: 'horizontal',
            pagination: {
                el: '.swiper-pagination',
            },
        });
    }

    async getIndex() {
        if (this.indexList[this.index].content.length == 0) {
            var res = await server.index({
                type: this.indexList[this.index].id,
                page: this.indexList[this.index].page
            });
            this.indexList[this.index].page = res.current_page
            this.indexList[this.index].totalPage = res.total_page
            this.indexList[this.index].content = [
                ...this.indexList[this.index].content,
                ...res.items
            ]

            item(
                $(".do_together_content .roll_father").eq(this.index),
                this.indexList[this.index].content
            )
        }
    }


    renderMRSC() {
        this.indexList.forEach((v,i) => {
            $(".alldo ul").append(`
              <li class="${i == 0 ? 'active': ''}">${v.title}</li>
            `);

            $(".do_together_content").append(`
                <div class="roll_father ${i == 0 ? 'showRoll': ''}"></div>
            `);
        });

        var self = this;
        $(".alldo ul li").click(function () {
            self.index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active")

            $(".do_together_content .roll_father")
                .eq(self.index)
                .addClass("showRoll")
                .siblings()
                .removeClass("showRoll")

            self.getIndex()
        })
    }

}

new Index();