class Home {
  constructor() {
    footer()
    this.tabs = [];
    this.index = 0
    this.getHome()
    this.getType()

  }

  async getType() {
    var res;
    if (localStorage.getItem("principal") == null) {
      var data = await indexServe.type();
      res = data.principal
      localStorage.setItem("principal", JSON.stringify(data.principal))
      localStorage.setItem("additional", JSON.stringify(data.additional))
    } else  {
      res = JSON.parse(localStorage.getItem("principal"))
    }

    this.tabs = res
    console.log( this.tabs)
    // 渲染横向菜单
    res.forEach((v,i) => {
      if (i != 0 ) {
        $(".page-wrapper").innerHTML+=`
          <div class="padding swiper-slide side_${i} pitem"></div>
        `
      }
      $(".left_menu").innerHTML+=`
       <li class="${i == 0 ? 'active':''}">${v.title}</li>
      `
    })

    var li = _(".left_menu li");

    var self = this;
    // 初始化页面轮播图
    var page = new swiper('.page-container', {
      wrapper: '.page-wrapper',
      on: {
        slideChangeTransitionStart(index) {
          li.forEach(item => item.className ="");
          li[index].classList.add("active")
          if (index != 0) {
            self.index = index;
            self.getClassList()
          }
        }
      }
    })

    // 点击菜单的事件

    li.forEach((v,i) => {
      v.onclick = () => {
        li.forEach(item => item.className ="");
        v.classList.add("active")
        page.slideTo(i)
        if (i != 0) {
          this.index = i;
          this.getClassList()
        }
      }
    })
  }

  async getHome() {
    var res = await indexServe.index();
    console.log(res)
    res.model.res.forEach((v,i) => {
      $(".model-wrapper").innerHTML+=`
       <div class="swiper-slide model-slide">
         ${
            v.map((item,index)=>{
              return `
                <div class="model-item">
                  <div class="item-img">
                    <img src="${item.preview}" alt="">
                    <span>${item.total}</span>
                  </div>
                  <p>${item.title}</p>
                </div>
              `
            }).toString().replaceAll(",","")
          }
       </div>
      `
    });

    item(".news ul", res.newest.data)
    item(".tuijian ul", res.recommended.data)

    var model = new swiper('.mode-container', {
      wrapper: '.model-wrapper',
    })

  }

  async getClassList() {
    if (this.tabs[this.index].content.length == 0) {
      var res = await indexServe.classList({
        page: this.tabs[this.index].page,
        id: this.tabs[this.index].id
      });
      this.tabs[this.index].content = res.data
      this.tabs[this.index].total_page = res.total_page

      item(`.side_${this.index}`, this.tabs[this.index].content)

    }

  }


}

new Home();