<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> -->
    <topbar>
      <userInfoHead :userData="userData"></userInfoHead>
    </topbar>
    <view>
      <swiper :indicator-dots="true" style="height: 200rpx">
        <swiper-item class="swiperBanner">
          <image @click="goAprilExam" class="banner" :src="banner1"></image>
        </swiper-item>
        <swiper-item class="swiperBanner">
          <image @click="goAprilExam" class="banner" :src="banner1"></image>
        </swiper-item>
        <swiper-item class="swiperBanner">
          <image @click="goAprilExam" class="banner" :src="banner1"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="carType">
      <view
        v-for="(item, index) in carType"
        @click="changeVehicle(item)"
        :key="index"
      >
        <view
          @click="
            () => {
              carTypeIndex = index;
            }
          "
          class="col"
          :class="{
            col_selected: carTypeIndex == index,
          }"
        >
          <image :class="['carType-img' + index]" :src="item.img"></image>
          <view class="h6"></view>
          <text class="carType-title">{{ item.title }}</text>
          <text class="carType-typeName">{{ item.typeName }}</text>
        </view>
      </view>
    </view>
    <view class="point">
      <view
        :style="{
          left: carTypeIndex * 172 + 'rpx',
        }"
        class="point-area"
      >
        <image
          class=""
          src="https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/triangle1@2x.png"
        ></image>
      </view>
    </view>
    <view class="tab">
      <van-tabs
        animated
        class="custom-tabs"
        :active="active"
        id="tabs"
        @change="changeSubject"
        :sticky="true"
      >
        <van-tab title="科目一">
          <view class="tab-container">
            <tab-left
              :subject="1"
              :query="tabQuery"
              :leftList="leftList1"
            ></tab-left>
            <tab-center
              :subject="1"
              :query="tabQuery"
              :centerList="centerList1"
            ></tab-center>
            <tab-right
              :subject="1"
              :query="tabQuery"
              :rightList="rightList1"
            ></tab-right>
          </view>
        </van-tab>
        <van-tab title="科目二">
          <view v-for="(item, index) in typeList" :key="index">
            <branch-two
              v-if="index == 1"
              :carVideoList="item.children"
            ></branch-two>
          </view>
        </van-tab>
        <van-tab title="科目三">
          <van-grid column-num="4">
            <van-grid-item @click="goLightMock" icon="https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/lightmock.png" text="灯光模拟">
            </van-grid-item>
          </van-grid>
          <view v-for="(item, index) in typeList" :key="index">
            <branch-two
              v-if="index == 2"
              :carVideoList="item.children"
            ></branch-two>
          </view>
        </van-tab>
        <van-tab title="科目四">
          <view class="tab-container">
            <tab-left :query="tabQuery" :subject="4" :leftList="leftList4"></tab-left>
            <tab-center :query="tabQuery" :subject="4" :centerList="centerList4"></tab-center>
            <tab-right :query="tabQuery" :subject="4" :rightList="rightList4"></tab-right>
          </view>
        </van-tab>
      </van-tabs>
    </view>
  </view>
</template>

<script>
import shortVideo from "./components/shortVideo.vue";
import branchOne from "./components/branchOne.vue";
import branchTwo from "./components/branchTwo.vue";
import banner1 from "@/assets/img/banner1.jpg";
import tabLeft from "./components/tabLeft.vue";
import tabRight from "./components/tabRight.vue";
import TabCenter from "./components/tabCenter.vue";
import VideoListBox from "./components/videoListBox.vue";
import userInfoHead from "./components/userInfoHead.vue";
import utils from "@/utils/index";
export default {
  components: {
    shortVideo,
    branchOne,
    branchTwo,
    tabLeft,
    TabCenter,
    tabRight,
    VideoListBox,
    userInfoHead,
  },
  data: () => ({
    tabQuery: {
      liceCar: 1,
      liceTruck: '',
      liceBus: '',
      liceMoto: '',
      name: "科目一",
      cert: "C1/C2/C3",
      vehicle: "轿车",
      subject: 1,
      title: "顺序练习",
      sort: 3,
    },
    //科目一
    rightList1: [
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/LocalTopics@2x.png",
        text: "地方专题",
        path: "/otherPages/classifyArea/index",
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/WrongTopicCollection@2x.png",
        text: "错题·收藏",
        path: "/otherPages/collection/index",
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/NotesBeforeExamination@2x.png",
        text: "考前须知",
        path: "/otherPages/marked/index?markdown=考前须知",
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/LearnToSee@2x.png",
        text: "学车必看",
        path: "/otherPages/marked/index?markdown=学车必看",
      },
    ],
    centerList1: [
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SelectedTestQuestions@2x.png",
        text: "精选考题",
        path:"/otherPages/classifyChoose/index"
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SimulationTestTopics@2x.png",
        text: "模拟考试\n仿真题目",
        path:"/otherPages/beforeMockExam/index"
      },
    ],
    leftList1: [
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SequentialPractice@2x.png",
        text: "顺序练习",
        path: "/otherPages/classifyOrder/index",
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/ClassificationExercise@2x.png",
        text: "分类练习",
        path: "/otherPages/classifyKind/index",
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/RealExaminationRoomSimulation@2x.png",
        text: "真实模拟考试",
        path: "/pages/mockExam/begin",
      },

      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SimulationResults@2x.png",
        text: "模拟成绩",
        path: "/otherPages/testScores/index",
      },
    ],
    //科目四
    rightList4: [
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/LocalTopics@2x.png",
        text: "地方专题",
        path: "/otherPages/classifyArea/index",
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/WrongTopicCollection@2x.png",
        text: "错题·收藏",
         path: "/otherPages/marked/index?markdown=考前须知",
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/NotesBeforeExamination@2x.png",
        text: "考前须知",
        path: "/otherPages/marked/index?markdown=学车必看",
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/LearnToSee@2x.png",
        text: "学车必看",
        path: "/otherPages/marked/index?markdown=学车必看",
      },
    ],
    centerList4: [
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SelectedTestQuestions@2x.png",
        text: "精选考题",
        path:"/otherPages/classifyChoose/index"
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SimulationTestTopics@2x.png",
        text: "模拟考试\n仿真题目",
        path:"/otherPages/beforeMockExam/index"
      },
    ],
    leftList4: [
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SequentialPractice@2x.png",
        text: "顺序练习",
       path: "/otherPages/classifyOrder/index",
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/ClassificationExercise@2x.png",
        text: "分类练习",
       path: "/otherPages/classifyKind/index",
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/RealExaminationRoomSimulation@2x.png",
        text: "真实模拟考试",
        path: "/pages/mockExam/begin",
      },

      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/SimulationResults@2x.png",
        text: "模拟成绩",
         path: "/otherPages/testScores/index",
      },
    ],
    active: 0,
    carTypeIndex: 0,
    carType: [
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/car@2x.png",
        typeName: "轿车",
        title: "C1/C2/C3",
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/bus@2x.png",
        typeName: "客车",
        title: "A1/A2/B1",
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/truck@2x.png",
        typeName: "货车",
        title: "A2/B2",
      },
      {
        img: "https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/home/motorcycle@2x.png",
        typeName: "摩托车",
        title: "D/E/F",
      },
    ],
    typeList: [
      {
        id: 1,
        typeName: "科目一",
        pid: 0,
        typeDescribe: null,
        typeIcon: null,
        typeSort: 0,
        status: "0",
        children: [],
      },
      {
        id: 2,
        typeName: "科目二",
        pid: 0,
        typeDescribe: null,
        typeIcon: null,
        typeSort: 0,
        status: "0",
        children: [],
      },
      {
        id: 3,
        typeName: "科目三",
        pid: 0,
        typeDescribe: null,
        typeIcon: null,
        typeSort: 0,
        status: "0",
        children: [],
      },
      {
        id: 4,
        typeName: "科目四",
        pid: 0,
        typeDescribe: null,
        typeIcon: null,
        typeSort: 0,
        status: "0",
        children: [],
      },
    ],
    loading: true,
    banner1,
    query: {},
  }),
  computed: {
    userData() {
      return this.$store.state.user.userInfo || {};
    },
  },
  // onLoad() {
  //   //获取code
  //   wx.login({
  //     success(res) {
  //       console.log(res);
  //     },
  //   });
  // },

  async mounted() {
    let { data } = await this.$api.carVideo.getTreeList();
    this.typeList = data;
    this.loading = false;
    this.$store.dispatch("GetInfo");
    // this.$nextTick(() => {
    //   this.selectComponent("#tabs").resize();
    // });
  },
  methods: {
    changeVehicle(item) {
      this.tabQuery.vehicle = item.typeName;
      this.tabQuery.cert = item.title;
      switch (item.typeName) {
        case "轿车":
          this.tabQuery.liceCar = 1;
          this.tabQuery.liceTruck = '';
          this.tabQuery.liceBus = '';
          this.tabQuery.liceMoto = '';
          break;
        case "货车":
          this.tabQuery.liceCar = '';
          this.tabQuery.liceTruck = '';
          this.tabQuery.liceBus = 1;
          this.tabQuery.liceMoto = '';
          break;
        case "客车":
          this.tabQuery.liceCar = '';
          this.tabQuery.liceTruck = '';
          this.tabQuery.liceBus = 1;
          this.tabQuery.liceMoto = '';
          break;
        case "摩托车":
          this.tabQuery.liceCar = '';
          this.tabQuery.liceTruck = '';
          this.tabQuery.liceBus = '';
          this.tabQuery.liceMoto = 1;
          break;
        default:
          break;
      }
    },
    changeSubject(e) {
      this.tabQuery.subject = e.detail.index + 1;
      this.tabQuery.name = e.detail.title;
    },
    goLightMock(e) {
      uni.navigateTo({
        url: "/pages/lightMock/index",
      });
    },
    goAprilExam() {
      uni.navigateTo({
        url: "/pages/extraWeb/index?src=https://mn.zzxcx.net/#/aprilExam/test",
      });
    },
    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>
.h6 {
  height: 6rpx;
}
.carVideo {
  position: relative;
  background: #fff;
  min-height: 100vh;
}
.swiperBanner {
  width: 690rpx;
  height: 200rpx;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.banner {
  width: 690rpx;
  height: 200rpx;
}
.carType {
  width: 690rpx;
  height: 152rpx;
  background: #f0f3f7;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  margin-top: 32rpx;
  .col_selected {
    background: #bfd8ff;
  }
  .col {
    width: 172rpx;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    .carType-img0 {
      width: 133rpx;
      height: 45rpx;
    }
    .carType-img1 {
      width: 108rpx;
      height: 56rpx;
    }
    .carType-img2 {
      width: 82rpx;
      height: 60rpx;
    }
    .carType-img3 {
      width: 86rpx;
      height: 59rpx;
    }
    .carType-typeName {
      color: #333;
      font-size: 26rpx;
    }
    .carType-title {
      color: #333;
      font-size: 26rpx;
    }
  }
}
.point {
  width: 690rpx;
  margin: 0 auto;
  height: 16rpx;
  display: flex;
  position: relative;
  image {
    width: 30rpx;
    height: 14rpx;
  }
  .point-area {
    width: 25%;
    display: flex;
    justify-content: center;
    position: absolute;
  }
}
.tab {
  width: 690rpx;
  margin: 0 auto;
  .custom-tabs {
    /deep/ .van-tabs__line {
      background: #498ef5;
    }
  }
  .tab-container {
    width: 690rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
}
.vant-tab {
  height: 100px;
}
</style>
