<template>
  <div class="main-box product product-new"> 
    <div class="banner"></div>
    <div class="breadcrumb-wrap">
      <div class="breadcrumb">
        Current Location: <NuxtLink to="/">Home</NuxtLink>&nbsp;>&nbsp;{{sort==2?'Active Components':'Passive Components'}}
      </div>
    </div>

    <div class="np-con auto">
      <div class="top-con">
        <h1 class="section-title">{{sort==2?'Active Component Series':'Passive Component Series'}}</h1>
        <div class="search-wrap">
          <el-input v-model="searchCon" class="t15" placeholder="Please enter product model" @keyup.enter="searchLink" />
          <el-button class="el-search" @click="searchLink">
            Search Now
          </el-button>
        </div>
      </div>

      <div class="type-wrap">
        <ul>
          <li v-for="(item, index) in categoryList" :key="item.id || index">
            <div class="type-image">
              <img :src="item.img || item.image" :alt="item.nameCh" loading="lazy">
            </div>
            <h3 class="type-title">{{ item.nameCh }}</h3>

            <div class="type-chiled-wrap" v-if="sort==2">
              <NuxtLink v-for="(sub, idx) in item.subCatgory || []" :key="sub.id || idx" :to="{
                  path: `/newProduct/${sub.parentId}/${sub.id}`,
                  query: { page: 1, name: sub.nameCh }
                }">
                > {{ sub.nameCh }}
              </NuxtLink>
            </div>
            <div class="type-chiled-wrap" v-if="sort==1">
              <NuxtLink v-for="(sub, idx) in item.subCatgory || []" :key="sub.id || idx" :to="{ path: '/cproduct/'+item.id+'/'+sub.id, query: { page: 1, seekType: 1, sort: 1 } }">
                > {{ sub.nameCh }}
              </NuxtLink>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useAll } from "~/api/pubAll/service";

const route = useRoute();
const router = useRouter();
const { getGoodsgoryList } = useAll();

const searchCon = ref("");

const sort:any = computed(() => String(route.query.sort as any || 2));

const { data: categoryData } = await useAsyncData(
  "new-product-flq-category",
  () =>
    getGoodsgoryList({
      sort: sort.value,
    }),
  {
    watch: [sort],
  }
);

const categoryList = computed(() => {
  const raw =
    categoryData.value?.data?.data ||
    categoryData.value?.data ||
    categoryData.value ||
    [];
  return Array.isArray(raw) ? raw : [];
});

useHead({
  title: "Schottky Diodes - Zener Diodes - Fast Recovery Diodes - Shenzhen Hotking Electronics Co., Ltd.",
  meta: [
    {
      name: "description",
      content:
        "Provides detailed package, model, and parameter information for Hotking discrete components, along with PDF downloads, including Schottky diodes, Zener diodes, TVS diodes, switching diodes, fast recovery diodes, MOSFETs, transistors, bridge rectifiers, and integrated circuits.",
    },
    {
      name: "keywords",
      content:
        "Schottky diode, Zener diode, fast recovery diode, MOSFET, TVS diode, ESD diode, PNP transistor, bridge rectifier",
    },
  ],
});

function searchLink() {
  if (!searchCon.value) return;
  if(sort.value==1){
    navigateTo({
      path: `/cproduct/75/91`,
      query: {
        page: "1",
        seekType: "1",
        sort: "1",
        con: searchCon.value,
      },
    });
  }else{
    navigateTo({
      path: `/cproducts/1/2`,
      query: {
        page: "1",
        seekType: "2",
        sort: "2",
        con: searchCon.value,
      },
    });
  }
}
</script>

<style scoped lang="scss">
.product-new .np-con {
  width: min(100%, 1200px);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 92px 0 118px;
}

.product-new .top-con {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 52px;

  .section-title {
    margin: 0 0 38px;
    color: #111111;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
  }

  .search-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 610px);
    height: 42px;
    margin: 0;
    overflow: hidden;
    border-radius:0 21px 21px 0; 
    justify-content: flex-start;
    // background: #f5f6f8;
  }

  :deep(.el-input) {
    flex: 1;
    height: 42px;
    line-height: 42px;
  }

  :deep(.el-input__wrapper) {
    height: 42px;
    padding: 0 20px;
    border-radius: 21px 0 0 21px;
    background: #f5f6f8;
    box-shadow: none;
  }

  :deep(.el-input__inner) {
    height: 42px;
    color: #333333;
    font-size: 14px;
    line-height: 42px;
  }

  :deep(.el-input__inner::placeholder) {
    color: #666666;
  }

  .el-search {
    width: 126px;
    min-width: 126px;
    height: 42px !important;
    padding: 0;
    border: none;
    border-radius: 0 21px 21px 0;
    background: #f20d18;
    color: #ffffff;
    font-size: 14px;
    line-height: 42px !important;
  }
}

.product-new .type-wrap {
  padding: 0 0 40px;
  border-top: none;

  ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 112px;
    margin: 0;
    padding: 0;
  }

  li {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 365px;
    margin: 0;
    padding: 34px 48px 0;
    box-sizing: border-box;
    border-right: 1px solid #eeeeee;
    box-shadow: none;
    list-style: none;

    &:nth-child(4n) {
      border-right: none;
    }
  }

  .type-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    margin-bottom: 14px;

    img {
      width: 92px;
      height: 92px;
      object-fit: contain;
    }
  }

  .type-title {
    height: auto;
    margin: 0 0 22px;
    background: transparent;
    color: #111111;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
  }

  .type-chiled-wrap {
    padding: 0;
  }

  a {
    display: block;
    color: #1f2d3d;
    font-size: 13px;
    line-height: 32px;
    text-align: left;

    &:hover {
      color: #e6252c;
    }
  }
}

@media (max-width: 1200px) {
  .product-new .np-con {
    width: calc(100% - 48px);
  }

  .product-new .type-wrap {
    li {
      padding-right: 32px;
      padding-left: 32px;
    }
  }
}

@media (max-width: 900px) {
  .product-new .type-wrap {
    ul {
      grid-template-columns: repeat(2, 1fr);
      row-gap: 56px;
    }

    li {
      &:nth-child(4n) {
        border-right: 1px solid #eeeeee;
      }

      &:nth-child(2n) {
        border-right: none;
      }
    }
  }
}

@media (max-width: 560px) {
  .product-new .np-con {
    width: calc(100% - 32px);
    padding: 56px 0 72px;
  }

  .product-new .top-con {
    .section-title {
      font-size: 28px;
    }

    .search-wrap {
      height: auto;
      overflow: visible;
      border-radius: 0;
      background: transparent;
      flex-direction: column;
      gap: 12px;
    }

    :deep(.el-input__wrapper) {
      border-radius: 21px;
    }

    .el-search {
      width: 100%;
      border-radius: 21px;
    }
  }

  .product-new .type-wrap {
    ul {
      grid-template-columns: 1fr;
      row-gap: 40px;
    }

    li {
      min-height: auto;
      padding: 28px 24px;
      border-right: none;
      border-bottom: 1px solid #eeeeee;

      &:nth-child(4n),
      &:nth-child(2n) {
        border-right: none;
      }
    }
  }
}
.banner {
    height: 350px;
    width: 100%;
    background: url(@/assets/img/cpBanner.png) no-repeat center center;
    position: relative;
  }
</style>
