<template>
  <div class="flex left">
    <div class="w256 bg-component-pink">
      <div class="pt9">
        <div class="w-full font0">
          <div
            v-for="(item, index) in tabList"
            :class="{
              'overflow-y-visible': tabValue[0] == index,
              'left-item_select': tabValue[0] == index,
            }"
            :key="index"
            class="left-item"
          >
            <div class="h-full pl25 relative">
              <img class="" :src="item.icon" />
              <div @click="selectParent(item, index)" class="title">
                {{ item.text }}
              </div>
              <img
                v-if="item.children.length && item.isOpen"
                src="@/assets/img/home/bottom_arrow.png"
                class="behind-icon"
              />
              <img
                v-if="item.children.length && !item.isOpen"
                src="@/assets/img/home/top_arrow.png"
                class="behind-icon"
              />
            </div>

            <div class="relative font0 overflow-hidden">
              <div
                :key="_index"
                v-for="(_item, _index) in item.children"
                class="left-item-open cursor-pointer"
                @click="selectChildren(_item, _index)"
                :class="{ 'left-item-open_select': tabValue[1] == _index }"
              >
                {{ _item.text }}
                <!-- xx -->
              </div>
            </div>
          </div>

          <!-- <div class="left-item">
            <div class="w-full h-full pl25">
              <img class="front-icon" :src="xcIcon" />
              <span class="w27">汽车科目一</span>
              <img src="@/assets/img/home/bottom_arrow.png" class="behind-icon" />
            </div>
            <div class="left-item-open">1.练习技巧</div>
            <div class="left-item-open">2.套餐技巧</div>
            <div class="left-item-open">3.模拟考试</div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import sysIcon from "@/assets/img/home/sys_icon.png";
import xcIcon from "@/assets/img/home/xc_icon.png";
import mtcIcon from "@/assets/img/home/mtc_icon.png";
import markIcon from "@/assets/img/home/mark_icon.png";
import sanliIcon from "@/assets/img/home/sanli_icon.png";
import outIcon from "@/assets/img/home/out_icon.png";
import scoreIcon from "@/assets/img/home/score_icon.png";
export default defineComponent({
  setup() {
    const state = reactive({
      tabList: [
        {
          text: "系统设置",
          icon: sysIcon,
          children: [],
          isOpen: false,
          isSelect: false,
          path: "/home/sysconfig",
        },
        {
          text: "汽车科目一",
          icon: xcIcon,
          isSelect: false,
          children: [
            {
              text: "练习技巧",
              isSelect: false,
              path: "/home/practiseSelect1",
              query: {
                subject: 1,
            
              },
            },
            // {
            //   text: "2.套餐技巧",
            //   isSelect: false,
            // },
            {
              text: "模拟考试",
              isSelect: false,
              path: "/home/selectDriveExamSubject",
              query: {
                subject: 1,
               
              },
            },
          ],
          isOpen: false,
        },

        {
          text: "汽车科目四",
          icon: xcIcon,
          children: [
            {
              text: "练习技巧",
              isSelect: false,
              path: "/home/practiseSelect1",
              query: {
                subject: 4,
          
              },
            },
            // {
            //   text: "2.套餐技巧",
            //   isSelect: false,
            // },
            {
              text: "模拟考试",
              isSelect: false,
              path: "/home/selectDriveExamSubject",
              query: {
                subject: 4,
            
              },
            },
          ],
          isOpen: false,
          isSelect: false,
          path: "",
        },
        {
          text: "摩托车科目一",
          icon: mtcIcon,
          children: [
            {
              text: "练习技巧",
              path: "/home/practiseSelect2",
              isSelect: false,
              query: {
                subject: 1,
                model: "mtc",
              },
            },
            // {
            //   text: "2.套餐技巧",
            //   isSelect: false,
            // },
            {
              text: "模拟考试",
              isSelect: false,
              path: "/home/selectDriveExamSubject",
              query: {
                subject: 1,
                model: "mtc",
              },
            },
          ],
          isOpen: false,
          isSelect: false,
          path: "",
        },
        {
          text: "摩托车科目四",
          icon: mtcIcon,
          children: [
            {
              text: "练习技巧",
              path: "/home/practiseSelect2",
              isSelect: false,
              query: {
                subject: 4,

                model: "mtc",
              },
            },
            // {
            //   text: "2.套餐技巧",
            //   isSelect: false,
            // },
            {
              text: "模拟考试",
              isSelect: false,
              path: "/home/selectDriveExamSubject",
              query: {
                subject: 4,
                model: "mtc",
              },
            },
          ],
          isOpen: false,
          isSelect: false,
          path: "",
        },
        {
          text: "三力测试",
          icon: sanliIcon,
          children: [],
          isOpen: false,
          isSelect: false,
          path: "/home/threeExam",
        },
        {
          text: "标志标线大全",
          icon: markIcon,
          children: [],
          isOpen: false,
          isSelect: false,
          path: "/home/markLine",
        },
         {
          text: "考试成绩",
          icon: scoreIcon,
          children: [],
          isOpen: false,
          isSelect: false,
          path: "/home/scoreList",
        },
        {
          text: "安全退出",
          icon: outIcon,
          children: [],
          isOpen: false,
          isSelect: false,
          path: "/home/logOut",
        },
      ],
      tabValue: [-1, -1],
    });
    return {
      ...toRefs(state),
    };
  },
  methods: {
    selectParent(
      item: {
        text: string;
        isSelect: boolean;
        isOpen: boolean;
        path: string;
      },
      selectIndex: number
    ) {
      this.tabValue[0] == selectIndex
        ? (this.tabValue[0] = -1)
        : (this.tabValue[0] = selectIndex);
      this.tabValue[1] = -1;
      item.isSelect = !item.isSelect;
      item.isOpen = !item.isOpen;
      if (item.path) {
        this.$router.push(item);
      }
    },
    selectChildren(
      item: {
        text: string;
        isSelect: boolean;
        isOpen: boolean;
        path: string;
      },
      selectIndex: number
    ) {
      this.tabValue[1] = selectIndex;

      item.isSelect = !item.isSelect;
      item.isOpen = !item.isOpen;
      if (item.path) {
        this.$router.push(item);
      }
    },
  },
});
</script>

<style lang="scss" scoped>
.overflow-y-visible {
  overflow-y: visible !important;
}
.bg-component-pink {
  background: #fffdf2;
}
.left {
  min-height: calc(100vh - 86px);

  .left-item_select {
    background: #fff3b4;
    font-weight: bold;
  }
  .left-item-open {
    width: 256px;
    line-height: 46px;
    font-weight: 500;
    text-align: left;
    font-size: 18px;
    padding-left: 50px;
  }
  .left-item-open_select {
    background-color: #f9de5b;
    font-weight: bold;
  }

  .left-item {
    width: 256px;
    line-height: 60px;
    height: 60px;
    overflow-y: hidden;
    display: inline-block;
    text-align: left;

    // display: flex;
    // justify-content: flex-start;
    // align-content: center;
    // align-items: center;
    font-size: 20px;
    .title {
      width: 160px;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      font-size: 20px;
      cursor: pointer;
    }
    img {
      display: inline-block;
      margin-right: 10px;
      width: 22px;
    }
    .front-icon {
      width: 25px;
      display: inline-block;
    }
    .behind-icon {
      display: inline-block;
      width: 13px;
      margin-left: 10px;
    }
  }
}
</style>