class indext{
    constructor() {
        screahtop("搜索百万免费菜谱")
        this.mySwiper = null;
        this.flistitle = [ { title: '推荐'}, { title: '时令'},{ title: '食肉'}, { title: '素食'}, { title: '烘焙'} ];
        this.GetThreeMeals();
        this.GetindexType();
        this.Getmenu();
        this.GetBanner();
    }
//头部轮播
    async GetBanner() {
        var res = await indexServe.indexBanner();
        res.forEach(v=>{
            $(".banner .swiper-wrapper").append(`<div class="swiper-slide">
                <a href="${v.url}">
                    <img src="${v.img}" alt="">
                </a>
            </div>`)
        })
        this.initindexBanner();
    }

//菜品分类
    async Getmenu() {
        var res = await indexServe.typee();
        res.forEach(v=>{
            $(".menu").append(`<li>
            <a href="${v.href}">
              <img src="${v.img}" alt="">
              <p>${v.title}</p>
            </a>
         </li>`)
        })
    }

//分类样式
    async GetindexType() {
        this.flistitle.forEach((v, i)=>{
            $(".flist .test").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
        });
        this.Updatelist();
        var self = this
        $(".flist .test li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            var type = $('.flist .test li').index($(this))
            self.Updatelist(type+1)
            
        });

    }

    async Updatelist(type,page){
        var res = await indexServe.indexType(
            {
                type:type,
                page:page
            }
        );
        $(".flist .flist_content").html("");

        FoodList(res,$(".flist .flist_content"))
    }

//菜品轮播

    async GetThreeMeals() {
        var res = await indexServe.threeMeals();
        console.log(res);
        res.forEach((v, i) => {
            $(".everyfood .test").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
        });
        FoodList(res,$(".bannertwo .swiper-wrapper"))
        var self = this;


        var self = this;
        $(".everyfood .test li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            self.mySwiper.slideTo($(this).index())
        });


        this.initThreeMealsSwiper()
    }

    initThreeMealsSwiper() {
        this.mySwiper = new Swiper('.bannertwo', {
            // direction: 'horizontal', // 垂直切换选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            on: {
                slideChangeTransitionEnd: function () {
                    $(".test li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
                },
            },
        })
    }
    initindexBanner() {
        var ndexBannerSwiper = new Swiper('.banner', {
        //    direction: 'horizontal', // 垂直切换选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        })
    }
}

new indext()