<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;<NuxtLink :to="{ path: `/newProduct/flq`, query: { sort: 2 } }">Products</NuxtLink>&nbsp;>&nbsp;Active Components&nbsp;>&nbsp;{{ sParams.records[0].searchValue }}
      </div>
    </div>

    <div class="content auto clearfix" style="padding-bottom: 0">
      <div class="filter-box">
        <div class="filter-inp">
          <span class="title">{{ sText }}</span>

          <el-input v-model.trim="sParams.records[0].searchValue" class="t15" placeholder="Search by model or package" style="width: 458px" @keyup.enter="flqSearchFun(1)" />

          <el-button class="el-search" @click="flqSearchFun(1)">
            Search
          </el-button>

          <el-button @click="cancel">Back to Directory</el-button>
        </div>

        <p class="s-error">{{ sError }}</p>

        <div v-if="showDiv" class="result-wrap">
          <p class="tip">{{ tip }}</p>

          <ul v-if="nAllSearchList.length" class="r-type-wrap">
            <li v-for="(item, index) in nAllSearchList" :key="item.category?.id || index" :class="{ current: item.category?.id == curId }" @click="flqSearchFun(2, item.category?.id, 1)">
              {{ item.category?.nameEn }}
            </li>
          </ul>
        </div>
      </div>

      <div class="rightCon rightCon2 product-new">
        <div class="table-wrap">
          <div>
            <table width="100%" border="0" align="center" cellpadding="1" cellspacing="1" class="data">
              <tbody>
                <tr class="tr-header">
                  <td rowspan="2">Model</td>
                  <td rowspan="2">Image</td>
                  <td rowspan="2">Package Type</td>
                  <td rowspan="2">Datasheet</td>

                  <template v-for="(v, i) in zrTitle" :key="`head-${i}`">
                    <td v-if="v || zrTitleDw[i]">
                      <span>{{ v }}</span>
                    </td>
                  </template>
                </tr>

                <tr class="tr-header">
                  <template v-for="(v, i) in zrTitleDw" :key="`dw-${i}`">
                    <td v-if="v || zrTitle[i]">
                      <span>{{ v }}</span>
                    </td>
                  </template>
                </tr>

                <template v-if="newParams.seekType == '2'">
                  <tr v-for="(v, i) in nSearchList.records || []" :key="i">
                    <td>{{ v.goodsType }}</td>

                    <td>
                      <img :src="v.img" :alt="v.img || v.goodsType" height="45" />
                    </td>

                    <td>{{ v.packageSpecification }}</td>

                    <td>
                      <a v-if="v.manual" :href="v.manual" target="_blank">
                        <img src="@/assets/img/d.png" :alt="v.manual" style="margin-top:6px; width: 18px; min-width:18px; height:24px;">
                      </a>
                    </td>

                    <template v-for="(v2, i2) in zrTitle" :key="`attr-${i}-${i2}`">
                      <td v-if="v2 || zrTitleDw[i2]">
                        <span v-html="v[`attr${i2 + 1}`]"></span>
                      </td>
                    </template>
                  </tr>
                </template>
              </tbody>
            </table>

            <div v-if="newParams.seekType == '2'" class="page-size">
              <el-pagination v-model:current-page="sParams.current" :page-size="sParams.size" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[30, 60, 100, 200]" :total="totalPage2" @current-change="changePagination" @size-change="handleSizeChange" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

interface SearchCategoryItem {
  category?: {
    id: number | string;
    nameEn: string;
  };
  page?: {
    records?: any[];
    total?: number;
    current?: number;
  };
  typeHead2?: Record<string, string>;
  typeHead3?: Record<string, string>;
}

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

const isFirst = ref(true);
const zrTitle = ref<string[]>([]);
const zrTitleDw = ref<string[]>([]);
const sError = ref("");
const totalPage2 = ref(0);
const tip = ref("");
const leftText = ref("Discrete Components");
const sText = ref("Search");
const showDiv = ref(false);
const curId = ref<number | string>(-1);

const newParams = ref({
  categoryId: "",
  page: 1,
  seek: String(route.query.con || ""),
  seekFields: "",
  seekType: "2",
  size: 10,
});

const sParams = ref({
  current: 1,
  size: 30,
  records: [
    {
      searchValue: String(route.query.con || ""),
      categoryId: "",
    },
  ],
});

const nAllSearchList = ref<SearchCategoryItem[]>([]);
const nSearchList = ref<Record<string, any>>({});

const seekType = computed(() => String(route.query.seekType || ""));
const sort = computed(() => String(route.query.sort || ""));

if (seekType.value == "1") {
  leftText.value = "Resistors & Capacitors";
}

if (!seekType.value || !sort.value) {
  await navigateTo("/", { replace: true });
}

const seo = computed(() => {
  if (seekType.value == "1") {
    return {
      title: "Chip Resistors - Metal Film Resistors - Ceramic Capacitors - Shenzhen Hotking Electronics Co., Ltd.",
      description:
        "Provides detailed package, model, and parameter information for Hotking resistor and capacitor products, along with PDF downloads, including metal film resistors, thick-film chip resistors, alloy chip resistors, ceramic capacitors, standard MLCCs, and medium/high-voltage chip capacitors.",
      keywords:
        "chip resistor, metal film resistor, carbon film resistor, wirewound resistor, variable resistor, ceramic capacitor, variable capacitor, trimmer capacitor, chip capacitor",
    };
  }

  return {
    title: "Schottky Diodes - Zener Diodes - Fast Recovery Diodes - Shenzhen Hotking Electronics Co., Ltd.",
    description:
      "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.",
    keywords:
      "Schottky diode, Zener diode, fast recovery diode, MOSFET, TVS diode, ESD diode, PNP transistor, bridge rectifier",
  };
});

useHead({
  title: seo.value.title,
  meta: [
    { name: "description", content: seo.value.description },
    { name: "keywords", content: seo.value.keywords },
  ],
});

function resetTitleData() {
  zrTitle.value = [];
  zrTitleDw.value = [];
}

function fillTitleData(
  typeHead2?: Record<string, string>,
  typeHead3?: Record<string, string>
) {
  resetTitleData();

  if (!typeHead2) return;

  Object.keys(typeHead2).forEach((key) => {
    if (key.includes("attr")) {
      zrTitle.value.push(typeHead2[key]);
      zrTitleDw.value.push(typeHead3?.[key] || "");
    }
  });
}

async function flqSearchFun(type: number, id?: number | string, page?: number) {
  if (type == 1) {
    sParams.value.records[0].categoryId = "";
    sParams.value.current = 1;
  } else if (id !== undefined) {
    sParams.value.records[0].categoryId = id;
  }

  if (page == 1) {
    sParams.value.current = 1;
  }

  const result = await flqSearch(sParams.value);
  const raw = result?.data?.data || result?.data || result;

  if (
    (result?.httpCode || raw?.httpCode) !== 200 &&
    (result?.httpCode || raw?.httpCode) !== "200"
  ) {
    return;
  }

  const resultData = result?.data || raw?.data || raw || {};

  if (isFirst.value) {
    curId.value = String(route.params.id || "");
  }

  if (type !== 1 && id !== undefined) {
    curId.value = id;
  } else {
    nAllSearchList.value = [];
  }

  nSearchList.value = {};
  showDiv.value = true;
  tip.value = `Found "${sParams.value.records[0].searchValue}" in the following categories. Please click a category to view it.`;

  Object.keys(resultData).forEach((key) => {
    const item = resultData[key];

    if (type == 1) {
      if (item?.category) {
        nAllSearchList.value.push(item);

        if (!isFirst.value && nAllSearchList.value.length == 1) {
          curId.value = nAllSearchList.value[0].category?.id;
        }

        if (String(curId.value) == String(item.category.id)) {
          nSearchList.value = item.page || {};
          totalPage2.value = item.page?.total || 0;
          sParams.value.current = item.page?.current || 1;
          fillTitleData(item.typeHead2, item.typeHead3);
        }
      }
    } else {
      nSearchList.value = item?.page || {};
      totalPage2.value = item?.page?.total || 0;
      sParams.value.current = item?.page?.current || 1;
      fillTitleData(item?.typeHead2, item?.typeHead3);
    }
  });

  if (!Object.keys(nSearchList.value).length && nAllSearchList.value.length) {
    curId.value = nAllSearchList.value[0].category?.id || "";
    nSearchList.value = nAllSearchList.value[0].page || {};
    totalPage2.value = nAllSearchList.value[0].page?.total || 0;
    sParams.value.current = nAllSearchList.value[0].page?.current || 1;
    fillTitleData(
      nAllSearchList.value[0].typeHead2,
      nAllSearchList.value[0].typeHead3
    );
  }

  isFirst.value = false;

  await nextTick();
}

function cancel() {
  router.push({
    path: `/newProduct/flq`,
    query: { sort: "2" },
  });
}

function handleSizeChange(size: number) {
  sParams.value.size = size;
  flqSearchFun(2, curId.value);
}

function changePagination(page: number) {
  sParams.value.current = page;
  flqSearchFun(2, curId.value);
}

await flqSearchFun(1);

watch(
  () => nSearchList.value?.records,
  () => {
    if (process.client) {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  }
);
</script>

<style scoped lang="scss">
/* 原页面样式直接迁移过来即可 */
.product {
  .filter-box {
    padding: 40px 0;
    // box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    .s-error {
      font-size: 14px;
      color: #ec1e24;
      margin-top: 5px;
      margin-left: 473px;
    }

    .filter-inp {
      display: flex;
      align-items: center;
      justify-content: center;

      .title {
        height: 40px;
        line-height: 40px;
        font-size: 24px;
        color: #333333;
        margin-right: 20px;
      }
      .el-input {
        height: 40px;
        line-height: 40px;
      }
      :deep(.el-select__wrapper) {
        height: 40px;
        line-height: 40px;
      }
      .el-input__inner {
        border-radius: 0;
      }

      .el-button {
        border-radius: 0;
      }

      .el-search {
        background: #e5484c;
        border-color: #e5484c;
        height: 40px !important;
        color: #fff;
      }

      .el-select {
        margin-left: -1px;
        margin-right: -1px;
      }

      .el-icon-search {
        color: #fff;
      }
    }

    .result-wrap {
      .tip {
        height: 22px;
        font-size: 16px;
        line-height: 22px;
        color: #ec1e24;
        margin-top: 10px;
        margin-left: 525px;
      }

      ul {
        padding: 20px 0 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        li {
          margin-top: 20px;
          margin-left: 20px;
          border: 1px solid #eb5559;
          height: 40px;
          line-height: 40px;
          border-radius: 4px;
          padding: 0 17px;
          color: #ec1e24;
          cursor: pointer;

          &:hover,
          &.current {
            background: #e5484c;
            color: #fff;
          }
        }
      }
    }
  }

  .banner {
    height: 350px;
    width: 100%;
    background: url(@/assets/img/cpBanner.png) no-repeat center center;
    position: relative;
  }

  .content {
    padding: 10px 15px 30px;
    max-width: 1600px;
    margin: 0 auto;
    width: 90%;
  }

  .leftNav {
    width: 200px;
    box-shadow: 0 0px 6px rgba($color: #000000, $alpha: 0.1);
    padding: 30px 20px 0;

    h3 {
      font-size: 24px;
      margin-bottom: 20px;
      line-height: 30px;
    }

    .item-wrap {
      .item {
        h4 {
          cursor: pointer;
          display: block;
          line-height: 70px;
          font-size: 18px;
          color: #333333;
          border-top: 1px solid #e8e8e8;
          position: relative;

          i {
            background: url("@/assets/img/right.png") no-repeat right center;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 25px;
            right: 0;
            transition: all 0.4s ease 0s;

            &.isOpen {
              transform: rotate(90deg);
            }
          }
        }

        li {
          padding-left: 20px;
          font-size: 14px;
          line-height: 50px;
          display: block;
          color: #333333;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          & + a {
            border-top: 1px solid #e8e8e8;
          }

          &:hover {
            color: #e5484c;
          }

          &.current {
            color: #ec1e24;
          }
        }
      }
    }
  }

  .rightCon {
    flex: 1;

    &.rightCon2 {
      width: 100%;
    }

    .product-wrap {
      box-shadow: 0 2px 6px rgba($color: #000000, $alpha: 0.1);
      padding: 0 0 1px;
    }

    .filter-wrap {
      padding: 0 20px;
      height: 70px;
      line-height: 70px;
      background: #f5f5f5;
      border: 1px solid #e8e8e8;
      margin-bottom: 12px;

      .name {
        margin-right: 5px;
        float: left;
        line-height: 70px;
      }

      .el-input-group__prepend,
      .el-input-group__append {
        height: 38px;
        line-height: 38px;
      }

      .el-input {
        width: 250px;
        line-height: 40px;
      }

      .el-select {
        float: left;
        vertical-align: middle;
      }

      .t15 {
        top: 15px;
        margin-right: 20px;
        float: left;
      }
    }
    img {
      margin: 0 auto;
      height: 45px;
    }

    .tr-two {
      height: 35px;
      line-height: 35px;

      td {
        border: 1px solid #ddd;
        border-right: none;
        border-top: none;

        &:last-child {
          // border-right: 1px solid #ddd;
        }

        &:first-child {
          //border-left: none;
        }
      }
    }

    .check {
      line-height: 1.5;
      color: #333;
      text-align: left;
    }

    .bol-tr {
      font-size: 12px;
      height: 40px;
      line-height: 40px;
      background: #db515b;
      color: #fff;
    }

    .but {
      width: 50px;
      height: 20px;
      background: #db515b;
      color: #fff;
      text-align: center;
      margin-top: 5px;
      cursor: pointer;
    }

    .po-td {
      position: relative;
      cursor: pointer;

      img {
        position: relative;
        top: 4px;
        width: 16px;
      }
    }

    .hide-1 {
      width: 200px;
      min-height: 60px;
      max-height: 280px;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 10px;
      background: #fff;
      position: absolute;
      left: 30px;
      top: 40px;
      border: 1px solid #ccc;
      z-index: 999;

      .check {
        width: 200px;
        overflow-x: hidden;
      }
    }

    :deep(.el-table .cell),
    :deep(.el-table th div),
    :deep(.el-table--border td:first-child .cell),
    :deep(.el-table--border th:first-child .cell) {
      padding-left: 0 !important;
    }

    .page-size {
      margin: 20px 0;
      text-align: right;
      display: flex;
      justify-content: flex-end;
    }

    .bord {
      border: 1px solid #ccc;
      border-right: none;

      &:last-child {
        border-right: 1px solid #ccc;
      }
    }

    .data-table {
      td {
        height: 32px;
        line-height: 32px;
        text-align: center;

        &:first-child {
          border-right: none;
        }
      }
    }

    .crumbs {
      margin: 20px auto 16px;
      line-height: 16px;
    }

    .search {
      border: 2px solid #666;
      margin-bottom: 40px;

      .search-top {
        height: 48px;
        background: #db515b;

        ul {
          li {
            float: left;
            width: 16%;
            line-height: 48px;
            font-size: 18px;
            color: #fff;
            text-align: center;

            &:last-child {
              width: 10%;
            }
          }
        }
      }

      .serch-center {
        ul {
          border-bottom: 2px solid #ccc;
          height: 48px;

          &:last-child {
            border-bottom: none;
          }

          a {
            color: #333;
          }

          &:nth-child(2n-1) {
            a {
              color: #e4342e;
            }
          }

          li {
            float: left;
            width: 16%;
            line-height: 48px;
            font-size: 16px;

            text-align: center;

            &:last-child {
              width: 10%;
            }

            a {
              &:hover {
                color: #e4342e;
              }
            }
          }
        }
      }
    }

    .p-description {
      margin-top: 10px;
      margin-bottom: 30px;

      h3 {
        font-size: 18px;
        line-height: 32px;
        color: rgba(102, 102, 102, 1);
      }

      p {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: rgba(153, 153, 153, 1);
      }
    }

    .p-application {
      .p-application-tit {
        margin-top: 10px;
        margin-bottom: 5px;
        font-size: 18px;
        line-height: 32px;
        color: rgba(102, 102, 102, 1);
      }

      .cation-items {
        ul {
          li {
            width: 48%;
            float: left;
            margin-bottom: 10px;

            &:nth-child(2n-1) {
              padding-right: 2%;
            }

            img {
              float: left;
              margin-right: 10px;
            }

            a {
              line-height: 20px;
              font-size: 12px;

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

    .p-search {
      border: 1px solid rgba(204, 204, 204, 1);
      height: 40px;
      padding-left: 10px;

      .p-text {
        line-height: 40px;
        width: 80%;
        float: left;
      }

      .p-search-btn {
        width: 18%;
        float: right;
        text-align: center;
        height: 38px;
        background: #db515b;
        cursor: pointer;

        img {
          position: relative;
          top: 10px;
        }
      }
    }

    .p-img {
      margin-right: 20px;
    }

    .p-dl {
      dt {
        font-size: 20px;
        font-weight: bold;
        line-height: 32px;
        color: rgba(51, 51, 51, 1);
      }

      dd {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: rgba(153, 153, 153, 1);
        margin-bottom: 10px;

        .p-titl {
          font-size: 18px;
          font-weight: bold;
          line-height: 32px;
          color: rgba(102, 102, 102, 1);
        }

        .p-btn {
          width: 180px;
          height: 40px;
          display: inline-block;
          background: rgba(219, 81, 91, 1);
          color: #fff;
          text-align: center;
          line-height: 40px;
          border-radius: 4px;
          font-size: 16px;
          margin-top: 20px;
          cursor: pointer;
        }
      }
    }

    :deep(table) {
      margin-top: 0 !important;
    }

    :deep(.el-table th) {
      background: #db515b;
      color: #fff;
    }

    :deep(.el-table th > .cell) {
      text-align: center !important;
    }

    :deep(.el-table .cell) {
      text-align: center !important;
    }

    :deep(.el-table td),
    :deep(.el-table th) {
      padding: 8px 0;
    }
  }
}
/* breadcrumb */
.breadcrumb-wrap {
  height: 56px;
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #eee;
}

:deep(.el-breadcrumb) {
  font-size: 14px;
  color: #999;
}

:deep(.el-breadcrumb__inner) {
  color: #999;
  font-weight: 400;
}

:deep(.el-breadcrumb__inner.is-link) {
  color: #999;
  font-weight: 400;
}

:deep(.el-breadcrumb__inner.is-link:hover) {
  color: #d7000f;
}
.container {
  width: 1600px;
  margin: 0 auto;
}
.content-con {
  display: flex;
  justify-content: space-between;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
</style>
