<template>
  <!-- 导航组件 -->
  <div class="nav-pages">
    <div class="nav-bos">
      <div class="nav-all flex-row-start">
        <img src="@/assets/images/layout/layout2.png" alt="" />
        <div>全部商品分类</div>
      </div>
      <div @click="onPath(item.url)" v-for="(item, index) in navList" :key="index" class="nav-list" :class="item.url == route.path ? 'hig' : ''">
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onPath } from '@/utils/siteConfig';
import { categoryStore } from '@/store/modules/category';
const categoryStoreStore = categoryStore();
const route = useRoute();
const classifyList = ref<any>([]);
const classifyOpen = ref<any>(false);
const classifyShow = ref<any>(false);
const classifyId = ref<any>('');
const classifyInfo = ref<any>([]);
const navList = ref<any>([
  { title: '首页', url: '/index' },
  { title: '工业品商城', url: '/indexMro' },
  { title: '福礼商城', url: '/indexFuli' },
  { title: '商用工程' },
  { title: '场景采购', url: '/plan/procure' },
  { title: '解决方案', url: '/plan' },
  { title: '特价专区', url: '/search/special' }
]);

onMounted(async () => {
  try {
    // 根据当前路由路径获取分类数据
    let path = route.path;
    if (path != '/indexMro' && path != '/indexFuli') {
      path = '/index';
    }
    classifyList.value = await categoryStoreStore.fetchCategories(path);
  } catch (error) {
    console.error('获取分类失败:', error);
  }
});

//移入分类
const openClassify = () => {
  const path = route.path;
  if (path != '/indexMro' && path != '/indexFuli' && path != '/index') {
    classifyOpen.value = true;
  }
};
const enterClassify = (res: any) => {
  classifyShow.value = true;
  classifyId.value = res.id;
  classifyInfo.value = res.children;
};

//移出分类
const leaveClassify = () => {
  classifyOpen.value = false;
  classifyShow.value = false;
};
</script>

<style lang="scss" scoped>
//分类
.nav-pages {
  width: 100%;
  background-color: #ffffff;

  .nav-bos {
    margin: 0 auto;
    width: 1200px;
    display: flex;
    position: relative;
    padding-top: 15px;

    .nav-all {
      width: 234px;
      height: 40px;
      background: #e7000b;
      padding: 0 10px;
      font-size: 15px;
      color: #ffffff;
      cursor: pointer;

      img {
        height: 16px;
        width: 16px;
        margin-right: 6px;
      }
    }

    .nav-list {
      line-height: 40px;
      font-size: 15px;
      color: #364153;
      margin: 0 16px;
      text-align: center;
      cursor: pointer;

      &.hig {
        color: #e7000b;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0px;
          display: inline-block;
          width: 100%;
          height: 3px;
          background: #e7000b;
          margin-right: 8px;
        }
      }

      &:hover {
        color: #e7000b;
      }
    }
  }
}
</style>
