class banner {
    constructor() {

        this.index = 0;
        this.mySwiper = null;
        this.Recommend = [
            {
                type: 1,
                title: '推荐',
                content: [],
                page: 1
            },
            {
                type: 2,
                title: '时令',
                content: [],
                page: 1
            },
            {
                type: 3,
                title: '食肉',
                content: [],
                page: 1
            },
            {
                type: 4,
                title: '素食',
                content: [],
                page: 1
            },
            {
                type: 5,
                title: '烘焙',
                content: [],
                page: 1
            }
        ];
        this.Getbanner()
        this.Gettypee()
        this.GetthreeMealss()
        this.GETRecommend()
        this.Getindexx()
       
    }
    //开始的轮播图
    async Getbanner() {
        var res = await indexServe.banner1();
        console.log(res);
        res.forEach((v, i) => {
            $(".banner .swiper-wrapper").append(`
            <div class="swiper-slide">
            <a href="../html${v.url}">
                <img src="${v.img}" alt="">
            </a>
        </div>
     `)

        });
        
        this.initBannerSwiper();
      
    }
    //九宫格
    async Gettypee() {
        var res = await indexServe.typee();
        res.forEach((v, i) => {
            $(".list").append(`
               <li>
                  <a href="./?url=${v.href}">
                    <img src="${v.img}" alt="">
                    <p class="list_text">${v.title}</p>
                  </a>
                </li>
            `)
        });

       

    }
    //每日三餐轮播图
    async GetthreeMealss() {

        var res = await indexServe.threeMealss();
        console.log(res);
        res.forEach((v, i) => {
            $(".meals_list").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);


            $(".meals .swiper-wrapper").append(`
          <div class="swiper-slide">

                   ${v.content.map((item) => {
                return `
                
                <a href="">
                    <div class="meals_text">
                        <img src="${item.img}" alt="">
                        <p class="meals_name">${item.title}</p>
                        <span class="text">养</span>
                        <p class="tips">${item.des}</p>
                    </div>
                </a>
            
                       `
            }).toString().replaceAll(",", "")}
           
                </div>`)
        })

        var self = this;
        $(".meals_list li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            self.mySwiper.slideTo($(this).index())
            
        });
        this.initThreeMealsSwiper()
    }
    //大家都在做 渲染
    async Getindexx() {
        var res = await indexServe.indexx({
            type: this.Recommend[this.index].type,
            page: this.Recommend[this.index].page
        })
    
        

        FoodList(res, $('.together_act'))
    }
    // 推荐 时令 食肉……
    GETRecommend() {
        this.Recommend.forEach((v, i) => {
            $(".together_list").append(`
             <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
            `)
        })

        var a = this;
        $(".together_list li").click(function () {
            $('.together_act ').html("")

            a.index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            a.Getindexx()
           
        });
    
    }


   
    //滚动加载
    // scrollLoadData() {
    //     window.onscroll = async () => {
    //         var scrollTop = document.documentElement.scrollTop
    //         var scrollHeight = document.documentElement.scrollHeight
    //         var clientHeight = document.documentElement.clientHeight
    //         if (parseInt(scrollHeight - scrollTop) == clientHeight) {
    //             this.Recommend[this.index].page++;
    //             await this.Getindexx();
    //             console.log( this.Recommend[this.index].page++);

    //         }
    //     }

    // }
    //轮播图初始化
    initThreeMealsSwiper() {
        this.mySwiper = new Swiper('.meals', {
            direction: 'horizontal',
            // pagination: {
            //     el: '.swiper-pagination',
            // },
            on: {
                slideChangeTransitionEnd: function () {
                    $(".meals_list li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
                    
                },
            },
        })
     
    }

    initBannerSwiper() {
        this.banner = new Swiper('.banner', {
            direction: 'horizontal', // 垂直切换选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        })
    }


}
new banner()