<template>
  <div class="containe">
    <Search></Search>
    <div class="contentWrap">
      <div class="top">
        <div class="title">{{ title }}</div>
        <div class="wrap">
          <Nav v-model:navList="navList" v-model:navActiveKey="navActiveKey" />
        </div>
      </div>
      <div class="classify">
        <div class="title">全部分类</div>
        <div class="classifyWrap">
          <ul class="classifyList">
            <li class="item" @click="handleChangeLevelFour('all')" :class="{ active: levelFourActiveKey === 'all' }"
              >全部</li
            >
            <li
              class="item"
              :class="{ active: levelFourActiveKey === item.id }"
              v-for="item in levelFourTree"
              @click="handleChangeLevelFour(item)"
            >
              {{ item.name }}
            </li>
          </ul>
          <ul class="classifyList">
            <li class="item" @click="handleChangeLevelFive('all')" :class="{ active: levelFiveActiveKey === 'all' }"
              >全部</li
            >
            <li
              class="item"
              :class="{ active: levelFiveActiveKey === item.id }"
              v-for="item in levelFiveTree"
              @click="handleChangeLevelFive(item)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import Search from '../components/search.vue';
  import Nav from '../components/nav.vue';
  import { useGo } from '/@/hooks/web/usePage';
  import { toNumber } from 'lodash';
  import { useUserStore } from '/@/store/modules/user';
  import { useNavTree } from '/@/hooks/myhooks/index';
  import { DataItem } from '/@/views/product/goods-category/type';

  const go = useGo();
  const route = useRoute();
  const navTree = useNavTree();

  const query = route.query;
  const navId = toNumber(query.nav); // 一级选择id
  const tabId = toNumber(query.tab); // 二级选择id
  const tabItemId = toNumber(query.tabItem); // 三级选择id
  const navList = ref<DataItem[]>([]); // 菜单树
  const navActiveKey = ref(navId); // 一级标签选择
  const levelFourTree = ref<DataItem[]>([]); // 四级菜单树
  const levelFourActiveKey = ref<string | number>('all');
  const levelFiveTree = ref<DataItem[]>([]); // 五级菜单树
  const levelFiveActiveKey = ref<string | number>('all');
  const title = ref('');

  const userStore = useUserStore();
  navList.value = userStore.getNavList;

  const getGrandsonList = (arr: DataItem[]) => {
    arr.some((item) => {
      if (item.id === navId || item.id === tabId) {
        if (item.id === navId) title.value = item.name;

        if (item.children) {
          getGrandsonList(item.children);
          return true;
        }
      } else if (item.id === tabItemId) {
        levelFourTree.value = item.children;
        return true;
      }
    });
  };

  const handleChangeLevelFour = (item: DataItem | string) => {
    if (typeof item === 'string') {
      levelFourActiveKey.value = 'all';
    } else {
      levelFiveTree.value = item.children;
      levelFourActiveKey.value = item.id;
    }
  };

  const handleChangeLevelFive = (item: DataItem | string) => {
    if (typeof item === 'string') {
      levelFiveActiveKey.value = 'all';
    } else {
      levelFiveActiveKey.value = item.id;
    }
  };

  watch(
    () => navActiveKey.value,
    (n) => {
      go('/main/store/home' + `?id=${n}`);
    },
  );

  onMounted(() => {
    navTree(navList, getGrandsonList, 'getGrandsonList');
  });
</script>

<style lang="less" scoped>
  .active {
    color: #1890ff;
  }
  .containe {
    padding: 30px;
    .contentWrap {
      padding: 30px;
      background: #fff;
      border-radius: 10px;

      .top {
        display: flex;
        justify-content: space-between;

        .title {
          width: 25%;
          background: #f7f9fa;
          color: #1890ff;
          border-radius: 10px;
          text-align: center;
          height: 50px;
          padding: 5px;
          line-height: 40px;
          font-size: 20px;
        }

        .wrap {
          width: 73%;
          margin: 0;
        }
      }

      .classify {
        display: flex;
        justify-content: flex-start;
        margin: 30px 0 20px 60px;

        .title {
          height: 100px;
          line-height: 100px;
          padding-right: 40px;
          margin-right: 20px;
          font-size: 22px;
          border-right: 1px solid rgb(214, 214, 214);
        }

        .classifyWrap {
          flex: 1;
          .classifyList {
            border-bottom: 1px solid rgb(214, 214, 214);
            padding-bottom: 10px;
            display: flex;
            justify-content: flex-start;

            .item {
              margin-right: 10px;
              cursor: pointer;

              &:hover {
                color: rgb(129, 129, 129);
              }
            }
          }
        }
      }
    }
  }
</style>
