<template>
  <div class="home">
   <ly-tab
          v-model="selectedId"
          :items="items"
          :options="options"
          @change="changeTab"
   >
    </ly-tab>   
    <section ref="wrapper">
        <div v-for="(item, index) in newData" :key="index">
          <Swiper
            v-if="item.type == 'swiperList'"
            :swiperList="item.data"
          ></Swiper>
          <Icons v-if="item.type == 'iconsList'" :iconsList="item.data"></Icons>
          <Recommend
            v-if="item.type == 'recommendList'"
            :recommendList="item.data"
          ></Recommend>
          <Ad v-if="item.type == 'adList'" :adList="item.data"></Ad>
          <Like v-if="item.type == 'likeList'" :likeList="item.data"></Like>
        </div>
    </section>
  </div>
</template>

import BetterScroll from "better-scroll";

//有数据 没节点
  created() {
    this.getData();
  },
  methods: {
    //默认选中的topBar进行数据请求
    async getData() {
      let res = await axios({
        url: "/api/index_list/0/data/1",
      });
      this.items = Object.freeze(res.data.data.topBar);
      this.newData = Object.freeze(res.data.data.data);
      //当dom加载完毕再去执行nextTick 这时候节点高度才被算出来
      this.$nextTick(() => {
        console.log(this.$refs); //获取挂了ref的节点
        new BetterScroll(this.$refs.wrapper, {
          movable: true,
          zoom: true,
        });
      });
    },
    //点击topBar切换数据 发起请求
    async addData(index) {
      let res = await axios({
        url: "/api/index_list/" + index + "/data/1",
      });
      if (res.data.data.constructor != Array) {
        //如果包了三层data
        this.newData = res.data.data.data;
      } else {
        //如果包了两层data
        this.newData = res.data.data;
      }
    },
    //点击topBar切换
    changeTab(item, index) {
      this.addData(index);
      console.log(index);
    },
  },