<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="goodsInfo">
        <div class="imgWrap">
          <div class="show">
            <img src="../home/1.jpg" alt="" />
          </div>
          <ul>
            <li>
              <img src="../home/1.jpg" alt="" />
            </li>
            <li>
              <img src="../home/2.png" alt="" />
            </li>
          </ul>
        </div>
        <div></div>
      </div>
    </div>
  </div>
</template>

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

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

  const query = route.query;
  const navId = toNumber(query.nav); // 一级选择id
  const navList = ref<DataItem[]>([]); // 菜单树
  const navActiveKey = ref(navId); // 一级标签选择
  const title = ref('');

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

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

<style scoped lang="less">
  .containe {
    padding: 30px;
    .contentWrap {
      padding: 30px;
      background: #fff;
      border-radius: 10px;
      max-width: 1400px;
      min-width: 1200px;
      margin: 0 auto;

      .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;
        }
      }

      .goodsInfo {
        .imgWrap {
          .show {
            width: 400px;
            height: 400px;
            border: 1px solid #eee;
          }
        }
      }
    }
  }
</style>
