<template>
  <!-- 导航组件 -->
  <div class="nav flex-row-center">
    <div class="nav-bos">
      <div class="nav-all flex-row-center" @mouseenter="openClassify">
        <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 class="nav-classify" v-if="classifyOpen" @mouseleave="leaveClassify">
        <div class="classify">
          <div
            class="classify-list"
            v-for="(item, index) in classifyList"
            :class="item.id == classifyId && classifyShow ? 'classify-hig' : ''"
            :key="index"
            @mouseenter="enterClassify(item)"
          >
            <div class="label ellipsis" @click="onPath('/search?type=1&topCategoryId=' + item.id)">{{ item.label }}</div>
            <div class="info info1 ellipsis" v-if="item.extra && item.extra.oneLable1">{{ item.extra.oneLable1 }}</div>
            <div class="info ellipsis" v-if="item.extra && item.extra.oneLable2">{{ item.extra.oneLable2 }}</div>
            <div class="classify-border" v-if="item.id == classifyId && classifyShow"></div>
          </div>
        </div>
        <div class="classify-bos" v-if="classifyShow">
          <div v-for="(item, index) in classifyInfo" :key="index" class="classify-item" @click="onPath('/search?type=2&middleCategoryId=' + item.id)">
            <div class="two-level ellipsis">{{ item.label || '' }}</div>
            <el-icon class="classify-icon" :size="14" color="#364153">
              <ArrowRight />
            </el-icon>
            <div class="classify-label">
              <div v-for="(item1, index1) in item.children" :key="index1" @click="onPath('/search?type=3&bottomCategoryId=' + item1.id)">
                {{ item1.label || '' }}
              </div>
            </div>
          </div>
        </div>
      </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 {
  width: 100%;
  height: 48px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;

  .nav-bos {
    width: 1200px;
    display: flex;
    position: relative;

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

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

    .nav-list {
      line-height: 48px;
      font-size: 16px;
      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;
      }
    }

    // 分类
    .nav-classify {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 20;
      .classify {
        width: 234px;
        background: #ffffff;

        .classify-list {
          width: 100%;
          height: 40px;
          cursor: pointer;
          display: flex;
          align-items: center;
          padding-left: 15px;
          position: relative;

          &.classify-hig {
            border: 1px solid var(--el-color-primary);
            border-right: 0px solid var(--el-color-primary);
          }

          .label {
            max-width: 100px;
            font-weight: 600;
            font-size: 14px;
            color: #101828;
            white-space: nowrap;
            margin-right: 10px;

            &:hover {
              color: var(--el-color-primary);
            }
          }

          .info {
            max-width: 50px;
            font-size: 12px;
            color: #364153;
            white-space: nowrap;

            &.info1 {
              margin-right: 6px;
            }

            &:hover {
              color: var(--el-color-primary);
            }
          }

          .classify-border {
            position: absolute;
            right: -1px;
            top: 0px;
            width: 1px;
            height: 38px;
            background-color: #ffffff;
            z-index: 2;
          }
        }
      }

      .classify-bos {
        position: absolute;
        top: 0;
        left: 100%;
        width: 966px;
        height: 100%;
        border: 1px solid var(--el-color-primary);
        background-color: #ffffff;
        overflow-y: auto;
        padding-left: 30px;

        .classify-item {
          display: flex;
          padding-top: 10px;
          border-bottom: 1px solid #e5e7eb;

          .two-level {
            width: 90px;
            font-size: 14px;
            color: var(--el-color-primary);
            cursor: pointer;
          }

          .classify-icon {
            margin: 4px 15px 0 15px;
          }

          .classify-label {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
            font-size: 14px;
            color: #364153;

            div {
              margin-right: 20px;
              margin-bottom: 10px;
              cursor: pointer;

              &:hover {
                color: var(--el-color-primary);
              }
            }
          }
        }
      }
    }
  }
}
</style>
