<template>
  <loading v-if="loading"></loading>
  <view v-else class="carVideo">
    <topbar>
      <van-search shape="round" placeholder="搜索学车视频" @search="search" />
    </topbar>
    <van-tabs id="tabs" :active="active" :sticky="true">
      <van-tab
        :title="item.chapterName"
        v-for="(item, index) in typeList"
        :key="index"
        class="vant-tab"
      >
        <branch-one
          v-if="index == 0"
          :carVideoList="item.children"
        ></branch-one>
        <branch-two
          v-else-if="index == 1"
          :carVideoList="item.children"
        ></branch-two>
        <branch-two
          v-else-if="index == 2"
          :carVideoList="item.children"
        ></branch-two>
        <branch-one
          v-else-if="index == 3"
          :carVideoList="item.children"
        ></branch-one>
        <get-cert v-else-if="index == 4"></get-cert>
        <branch-two v-else :carVideoList="item.children"></branch-two>
      </van-tab>
    </van-tabs>
  </view>
</template>

<script>
import branchOne from "./components/branchOne.vue";
import branchTwo from "./components/branchTwo.vue";
export default {
  components: {
    branchOne,
    branchTwo,
  },
  async onReady() {

    // await this.$store.dispatch("Login");
    await this.$store.dispatch("GetInfo");
  },
  data: () => ({
    active: 1,
    typeList: [],
    loading: true,
  }),
  async mounted() {
    let { data } = await this.$api.carVideo.getTreeList();
    this.typeList = data;
    this.loading = false;
    this.$nextTick(() => {
      this.selectComponent("#tabs").resize();
    });
    console.log(this.$store.getters.token);
  },
  methods: {
    async search(e) {
      let { data } = await this.$api.carVideo.getSearchList(e.detail);
      console.log(data);
      this.$utils.route.goPage("/pages/carVideo/more", null, {
        carVideoList: data,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.carVideo {
  position: relative;
}
.vant-tab {
  height: 100px;
}
</style>
