<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 borderBottom">
            <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 class="goodsWrap">
        <ul class="goodsList">
          <li class="goods" v-for="item in goodsList" :key="item.id" @click="handleChangeGoods(item)">
            <div class="img">
              <img :src="newPng" alt="" class="new" v-if="item.isNews === 'YES'" />

              <img :src="item.pic[0]" alt="" class="pic" v-if="item.pic && item.pic.length > 0" />
              <img :src="nopl" alt="" class="pic" v-else />
            </div>
            <p class="title">{{ item.name }}</p>
          </li>
        </ul>
        <Pagination
          v-model:pageNum="pageNum"
          v-model:pageSize="pageSize"
          v-model:total="total"
          @handleChange="getGoodsList"
        />
      </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 Pagination from '../components/pagination.vue';
  import { DataItem } from '/@/views/product/goods-category/type';
  import { Goods } from '/@/api/model/goods';
  import * as GoodsApi from '/@/api/product/goodsApi';
  import newPng from '/@/assets/images/new.png';
  import nopl from '/@/assets/images/nopl.jpg';

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

  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('');

  navList.value = userStore.getNavList;

  const goodsList = ref<Goods[]>([]);
  const pageNum = ref(1);
  const pageSize = ref(10);
  const total = ref(500);
  const formQuery = { isAll: true, goodsCategoryId: tabItemId };

  // 获取四五级分类列表
  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';
      levelFiveActiveKey.value = 'all';
      levelFiveTree.value = [];
      formQuery.goodsCategoryId = tabItemId;
      getGoodsList();
    } else {
      levelFiveTree.value = item.children;
      levelFourActiveKey.value = item.id;
      formQuery.goodsCategoryId = item.id;
      getGoodsList();
    }
  };

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

  // 获取商品分类下的商品
  const getGoodsList = () => {
    GoodsApi.goodsList(Object.assign({ pageSize: pageSize.value, pageNum: pageNum.value }, formQuery)).then((res) => {
      res.records.forEach((item) => {
        if (item.pic && typeof item.pic === 'string') {
          item.pic = item.pic.split(',');
        }
      });
      total.value = res.total;
      goodsList.value = res.records;
    });
  };

  // 点击商品
  const handleChangeGoods = (goods: Goods) => {
    go('/main/store/goodDetail' + `?goods=${goods.id}&nav=${navId}`);
  };

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

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

<style lang="less" scoped>
  .active {
    color: #1890ff;
  }

  ul {
    padding: 0;
    margin: 0;
  }
  .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;
        }
      }

      .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 {
            height: 50px;
            line-height: 50px;
            padding-bottom: 10px;
            display: flex;
            justify-content: flex-start;

            .item {
              font-size: 16px;
              margin-right: 15px;
              cursor: pointer;

              &:hover {
                color: #1890ff;
              }
            }
          }

          .borderBottom {
            border-bottom: 1px solid rgb(214, 214, 214);
          }
        }
      }

      .goodsWrap {
        .goodsList {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          .goods {
            width: 25%;
            padding: 20px 20px 5px 20px;
            border: 1px solid rgb(214, 214, 214);
            position: relative;

            &:hover {
              background: #eee;
              cursor: pointer;
            }

            .img {
              width: 100%;
              position: relative;
              height: 285px;
              .new {
                position: absolute;
                right: 10px;
                top: 10px;
                width: 50px;
                height: 50px;
              }

              .pic {
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }

            .title {
              text-align: center;
              font-size: 17px;
              margin-top: 20px;
            }
          }
        }
      }
    }
  }
</style>
