class Index {
  constructor() {
    this.getBanner();
   
   this.getType();

   this.getThreeMeals();
  }

  async getIndexClass() {
    var res = await indexService.indexClass({type:1,page:1});
  }

  //轮播图
  async getBanner() {
    var res = await indexService.banner();
    let banners=document.querySelector('.swiper-wrapper');
    res.forEach((item,index) => {

    banners.innerHTML+=`
          <li>
            <a href="./bannerInfo.html?id=${item.url}"> 
              <img src="${item.img}" alt="">
            </a>
          </li>
      `;
    });
    new Swiper(".swiper",{
      time: 1000,
      initialSlide: 0,
      loop: false,
      speed: 300,
      autoplay: false,
      grabCursor: true,
    });
  }

  //轮播图下面的九宫格
  async getType() {
    var res = await indexService.type();
    let jiugong=document.querySelector('.jiu ul');
    res.forEach((item,index)=>{
      jiugong.innerHTML+=`
        <li>
          <a href="./jiugongInfo.html?id=${item.href}">
            <img src="${item.img}" alt="">
            <span>${item.title}</span>
          </a>
        </li>
      `;

    })
  }

  //每日三餐
  async getThreeMeals() {
    var res = await indexService.threeMeals();
    let sancan=document.querySelector('.sancan_ul');
    let three=document.querySelector('.wrapper_list');
    res.forEach((item,index)=>{
      sancan.innerHTML+=`
          <li class='${index==0?'activesan':''}'>${item.title}</li>
      `;
    });

    res.forEach((item,index)=>{
      three.innerHTML+=`
        <li class="three_meals_list">
          ${
           ( item.content.map((a,b)=>{
            return ` <div class="three_meals_item">
                        <img src="${a.img}" alt="">
                        <div class="text">${a.title}</div>
                        <div class="yang"></div>
                        <div class="desc">${a.des}</div>
                      </div>`
        })).join('')
          }
        </li>
      `;
    });

    var thress=document.querySelectorAll('.sancan_ul li');
   
   

    var threeSwiper= new Swiper(".swiper_list",{
      time: 1000,
      initialSlide: 0,
      loop: false,
      speed: 300,
      autoplay: false,
      grabCursor: true,
      swiperWrapper: '.wrapper_list',
      pagination: {
        el: '.pagination'
      },
      on:{
        slideChange:function (index) {
          thress.forEach((q,w)=>{
           q.className='';
           thress[index].className='activesan';
          })
          }
      }
    });


    thress.forEach((item,index)=>{
    
      item.onclick=()=>{
        thress.forEach((i,j)=>{
          i.className='';
        })
        item.className='activesan';
        threeSwiper.slideTo(index)
      }
    })



  }

  





  initSwiper(){
     // 初始banner轮播
     

   

  }
}

new Index();