<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-hidden': !item.isOpen,
              'left-item_select': item.isSelect,
            }"
            :key="index"
            class="left-item"
          >
            <div class="w-full h-full pl25 relative">
              <img class="" :src="item.icon" />
              <div
                @click="
                  () => {
                    item.isOpen = !item.isOpen;
                    item.isSelect = !item.isSelect;
                  }
                "
                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.children, _index)"
                :class="{ 'left-item-open_select': _item.isSelect }"
              >
                {{ _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 bottomArrow from "@/assets/img/home/bottom_arrow.png";
import topArrow from "@/assets/img/home/bottom_arrow.png";
export default defineComponent({
  setup() {
    const state = reactive({
      tabList: [
        {
          text: "系统设置",
          icon: sysIcon,
          children: [],
          isOpen: false,
          isSelect: false,
          path: "",
        },
        {
          text: "汽车科目一",
          icon: xcIcon,
          isSelect: false,
          children: [
            {
              text: "1.练习技巧",
              isSelect: false,
            },
            {
              text: "2.套餐技巧",
              isSelect: false,
            },
            {
              text: "3.模拟考试",
              isSelect: false,
            },
          ],
          isOpen: false,
        },

        {
          text: "汽车科目四",
          icon: xcIcon,
          children: [
            {
              text: "1.练习技巧",
              isSelect: false,
            },
            {
              text: "2.套餐技巧",
              isSelect: false,
            },
            {
              text: "3.模拟考试",
              isSelect: false,
            },
          ],
          isOpen: false,
          isSelect: false,
          path: "",
        },
        {
          text: "摩托车科目一",
          icon: mtcIcon,
          children: [
            {
              text: "1.练习技巧",
              isSelect: false,
            },
            {
              text: "2.套餐技巧",
              isSelect: false,
            },
            {
              text: "3.模拟考试",
              isSelect: false,
            },
          ],
          isOpen: false,
          isSelect: false,
          path: "",
        },
      ],
    });
    return {
      ...toRefs(state),
    };
  },
  methods: {
    selectChildren(
      item: {
        text: string;
        isSelect: boolean;
        path?: undefined;
      }[],
      selectIndex: number
    ) {
      item.forEach((_item) => {
        _item.isSelect = false;
      });
      item[selectIndex].isSelect = true;
    },
  },
});
</script>

<style lang="scss" scoped>
.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;

    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>