<template>
  <div class="category-boxs-bg">
    <div class="category-boxs">
      <div class="cate-nav">
        <a v-for="(item,idx) in CategoryStore.Category" class="f-item" :key="item.id" href="javascript:;" :class="{current:cateIdx == idx}" @click="cateIdx = idx">
          {{item.nameCh}}
        </a>
      </div>
      <div class="cate-label">
        <div class="ul">
          <NuxtLink v-for="(v1,i1) in CategoryStore?.Category[cateIdx]?.subCategory" :to="{path:'/search',query:{key:v1.nameCh,pageNum:1,pageSize:20}}" :key="i1" >
            {{ v1.nameCh }}
          </NuxtLink>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
definePageMeta({
  name: "categoryPage",
});
const CategoryStore = useCategoryStore();
let pageTitle: any = ref("HOTKING-分类");
const cateIdx: any = ref(0);
useHead(() => ({
  title: pageTitle.value,
}));
const nuxtApp = useNuxtApp();
const isClient = !nuxtApp.ssrContext;
function goProList(item: any) {}
function filterFun(value: any) {
  if (value && value.length > 6) {
    value = value.substring(0, 6) + "";
  }
  return value;
}
</script>
<style scoped lang="scss">
.category-boxs {
  padding-bottom: 1px;
  display: flex;
  position: relative;
  padding-left: 130px;
  padding-bottom: 66px;
  .cate-nav {
    width: 130px;
    min-width: 130px;
    left: 0;
    top: 44px;
    flex-shrink: 0;
    height: 100%;
    background-color: #f7f7f7;
    position: fixed;
    bottom: 0;
    .f-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50px;
      font-size: 14px;
      color: #606266;
      position: relative;
      &.current {
        color: #0067ed;
        background: #fff;
        &:before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          height: 18px;
          width: 4px;
          background-color: #0067ed;
          border-radius: 0 4px 4px 0;
          opacity: 0.8;
        }
      }
    }
  }
  .cate-label {
    flex: 1;
    .ul{
      display: flex;
      flex-wrap: wrap;
      padding: 15px;
      flex-direction: column;
    }
    a{
      height: 36px;
      display: flex;
      align-items: center;
      margin-right: 12px;
      margin-bottom: 12px;
      &:hover{
        border-color: $mainColor;
        color: $mainColor;
      }
    }
  }
}
</style>

