hanye-website/pages/index.vue

<template>
  <div>
    <div class="w-full h-[88px] md:h-[0]"></div>
    <!-- 轮播图 -->
    <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
      <Swiper
        :modules="[Pagination, Autoplay, EffectCreative]"
        :slides-per-view="1"
        :space-between="30"
        :loop="true"
        :pagination="{ el: '.swiper-pagination-1', clickable: true }"
        :autoplay="{
          delay: 5000,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
          waitForTransition: true,
        }"
        effect="creative"
        :creativeEffect="{
          prev: {
            shadow: true,
            translate: ['-120%', 0, -500],
            rotate: [0, 0, -90],
            opacity: 0,
          },
          next: {
            shadow: true,
            translate: ['120%', 0, -500],
            rotate: [0, 0, 90],
            opacity: 0,
          },
        }"
        :speed="1000"
        :grabCursor="true"
        :parallax="true"
        class="h-[320px] sm:h-[320px] md:h-[768px] lg:h-[900px] swiper-container-1"
      >
        <SwiperSlide>
          <div
            class="max-w-screen-2xl mx-auto h-full relative"
            :style="{
              backgroundImage: `url(${homeA1Webp})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              backgroundRepeat: 'no-repeat',
            }"
          >
            <div
              class="w-full h-full flex-col justify-center hidden md:flex relative z-10"
            >
              <div
                class="rounded border border-white w-11 h-6 leading-none justify-center flex items-center text-white text-sm font-normal"
              >
                SSD
              </div>
              <div class="justify-center">
                <span class="text-white text-6xl font-normal leading-[78px]">{{
                  t("home.carousel.one.title")
                }}</span>
                <span class="text-white text-6xl font-normal leading-[78px]">{{
                  t("home.carousel.one.description")
                }}</span>
                <br />
                <span class="text-white text-6xl font-normal leading-[78px]">{{
                  t("home.carousel.one.description2")
                }}</span
                ><br />
                <span
                  class="text-cyan-400 text-6xl font-normal leading-[78px]"
                  >{{ t("home.carousel.one.description3") }}</span
                >
              </div>
              <div class="flex flex-col gap-2 mt-4">
                <div
                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
                >
                  <div class="w-2 h-2 bg-white rounded-full"></div>
                  {{ t("home.carousel.one.description4") }}
                </div>
                <div
                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
                >
                  <div class="w-2 h-2 bg-white rounded-full"></div>
                  {{ t("home.carousel.one.description5") }}
                </div>
              </div>
              <div
                class="w-36 h-14 mt-12 flex items-center justify-center bg-[#35F1FF] rounded-lg hover:bg-[#35F1FF]/80 transition-colors duration-300"
              >
                <nuxt-link
                  :to="`${homepagePath}/products/HE80-2TNLHS`"
                  class="w-full h-full !flex items-center justify-center text-zinc-900"
                >
                  {{ t("products.view_details") }}
                </nuxt-link>
              </div>
            </div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div
            class="max-w-screen-2xl mx-auto h-full relative"
            :style="{
              backgroundImage: `url(${homeA2Webp})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              backgroundRepeat: 'no-repeat',
            }"
          >
            <div
              class="w-full h-full flex-col justify-center hidden md:flex relative z-10"
            >
              <div
                class="rounded border border-white w-11 h-6 leading-none justify-center flex items-center text-white text-sm font-normal"
              >
                SSD
              </div>
              <div class="justify-center">
                <span class="text-white text-6xl font-normal leading-[78px]">{{
                  t("home.carousel.one.title")
                }}</span>
                <span class="text-white text-6xl font-normal leading-[78px]">{{
                  t("home.carousel.one.description")
                }}</span>
                <br />
                <span class="text-white text-6xl font-normal leading-[78px]">{{
                  t("home.carousel.one.description2")
                }}</span
                ><br />
                <span
                  class="text-cyan-400 text-6xl font-normal leading-[78px]"
                  >{{ t("home.carousel.one.description3") }}</span
                >
              </div>
              <div class="flex flex-col gap-2 mt-4">
                <div
                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
                >
                  <div class="w-2 h-2 bg-white rounded-full"></div>
                  {{ t("home.carousel.one.description4") }}
                </div>
                <div
                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
                >
                  <div class="w-2 h-2 bg-white rounded-full"></div>
                  {{ t("home.carousel.one.description5") }}
                </div>
              </div>
              <div
                class="w-36 h-14 mt-12 flex items-center justify-center bg-[#35F1FF] rounded-lg hover:bg-[#35F1FF]/80 transition-colors duration-300"
              >
                <nuxt-link
                  :to="`${homepagePath}/products/HE80-2TNLHS`"
                  class="w-full h-full !flex items-center justify-center text-zinc-900"
                >
                  {{ t("products.view_details") }}
                </nuxt-link>
              </div>
            </div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div
            class="max-w-screen-2xl mx-auto h-full relative"
          >
            <video
              :src="homeA3Webp"
              autoplay
              muted
              loop
              class="w-full h-full object-cover"
            ></video>
            <div
              class="w-full h-full flex-col justify-center hidden md:flex absolute top-0 left-0 z-10"
            >
              <div
                class="rounded border border-white w-11 h-6 leading-none justify-center flex items-center text-white text-sm font-normal"
              >
                SSD
              </div>
              <div class="justify-center">
                <span class="text-white text-6xl font-normal leading-[78px]">{{
                  t("home.carousel.one.title")
                }}</span>
                <span class="text-white text-6xl font-normal leading-[78px]">{{
                  t("home.carousel.one.description")
                }}</span>
                <br />
                <span class="text-white text-6xl font-normal leading-[78px]">{{
                  t("home.carousel.one.description2")
                }}</span
                ><br />
                <span
                  class="text-cyan-400 text-6xl font-normal leading-[78px]"
                  >{{ t("home.carousel.one.description3") }}</span
                >
              </div>
              <div class="flex flex-col gap-2 mt-4">
                <div
                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
                >
                  <div class="w-2 h-2 bg-white rounded-full"></div>
                  {{ t("home.carousel.one.description4") }}
                </div>
                <div
                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
                >
                  <div class="w-2 h-2 bg-white rounded-full"></div>
                  {{ t("home.carousel.one.description5") }}
                </div>
              </div>
              <div
                class="w-36 h-14 mt-12 flex items-center justify-center bg-[#35F1FF] rounded-lg hover:bg-[#35F1FF]/80 transition-colors duration-300"
              >
                <nuxt-link
                  :to="`${homepagePath}/products/HE80-2TNLHS`"
                  class="w-full h-full !flex items-center justify-center text-zinc-900"
                >
                  {{ t("products.view_details") }}
                </nuxt-link>
              </div>
            </div>
          </div>
        </SwiperSlide>
        <div class="max-w-screen-2xl mx-auto relative">
          <div
            class="swiper-pagination swiper-pagination-1 text-left bottom-1 top-0"
          ></div>
        </div>
      </Swiper>
    </section>

    <!-- 按用途产品展示 -->
    <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
      <div class="max-w-screen-2xl mx-auto relative">
        <div
          class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"
        >
          {{ t("products.usage") }}
        </div>
        <div
          class="justify-center text-white font-normal mb-8 md:mb-16 text-xl sm:text-2xl md:text-4xl lg:text-6xl"
        >
          {{ t("products.usage_title") }}
        </div>
      </div>
      <div class="max-w-screen-2xl mx-auto">
        <div class="w-full mb-8">
          <div class="flex flex-wrap items-center gap-2">
            <div
              v-for="(usage, index) in typedUsageList"
              :key="usage.id"
              class="cursor-pointer select-none px-4 sm:px-7 py-2 sm:py-3 rounded-full border border-zinc-700 text-white transition-all duration-300 relative group"
              :class="{
                'bg-cyan-400/10 border-cyan-400 text-cyan-400':
                  activeIndex === index,
                'hover:border-zinc-600': activeIndex !== index,
              }"
              @click="handleUsageClick(usage.id)"
            >
              <div
                class="usage-name text-center text-xs sm:text-sm font-normal leading-tight md:text-base transition-colors duration-300 relative z-10"
              >
                {{ usage.name }}
                <!-- 用途名称 -->
              </div>
              <div
                class="absolute inset-0 rounded-full bg-cyan-400/20 scale-0 transition-transform duration-300 group-hover:scale-100"
              ></div>
            </div>
            <div class="flex items-center justify-center gap-4 ml-auto">
              <div
                class="swiper-button-prev-2 bg-zinc-700 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center cursor-pointer hover:bg-zinc-600 transition-colors duration-200"
              >
                <i
                  class="icon-arrow-left text-zinc-300 text-xs sm:text-sm font-normal"
                ></i>
              </div>
              <div
                class="swiper-button-next-2 bg-zinc-700 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center cursor-pointer hover:bg-zinc-600 transition-colors duration-200"
              >
                <i
                  class="icon-arrow-right text-zinc-300 text-xs sm:text-sm font-normal"
                ></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="max-w-screen-2xl mx-auto">
        <div
          class="w-full h-[380px] sm:h-[300px] md:h-[350px] lg:h-[360px] xl:h-[380px] 2xl:h-[460px] relative"
        >
          <TransitionGroup name="slide-fade" tag="div" class="relative h-full">
            <div :key="activeUsageId" class="w-full h-full">
              <Swiper
                :modules="[Navigation]"
                :spaceBetween="30"
                :slidesPerView="4"
                :breakpoints="{
                  320: { slidesPerView: 1, spaceBetween: 10 },
                  448: { slidesPerView: 2, spaceBetween: 10 },
                  640: { slidesPerView: 3, spaceBetween: 20 },
                  1024: { slidesPerView: 4, spaceBetween: 20 },
                  1280: { slidesPerView: 4, spaceBetween: 30 },
                  1536: { slidesPerView: 4, spaceBetween: 30 },
                }"
                :navigation="{
                  prevEl: '.swiper-button-prev-2',
                  nextEl: '.swiper-button-next-2',
                }"
                class="h-full"
              >
                <SwiperSlide
                  v-for="product in activeProducts"
                  :key="product.id"
                  class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4"
                >
                  <div class="w-full h-full p-2">
                    <nuxt-link :to="product.link" class="block w-full h-full">
                      <div
                        class="w-full h-full bg-zinc-900 rounded-2xl p-4 flex flex-col items-center justify-start relative overflow-hidden group hover:bg-zinc-800 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-400/10"
                      >
                        <!-- 图片加载占位 -->
                        <div
                          v-if="!isImageLoaded[product.id]"
                          class="absolute inset-0 bg-gradient-to-br from-zinc-800 via-zinc-700 to-zinc-800 animate-gradient"
                        >
                          <div
                            class="absolute inset-0 flex items-center justify-center"
                          >
                            <div
                              class="w-8 h-8 border-4 border-cyan-400/20 border-t-cyan-400 rounded-full animate-spin"
                            ></div>
                          </div>
                        </div>
                        <!-- 图片容器 -->
                        <div
                          class="w-full aspect-square relative transition-all duration-300 overflow-hidden rounded-lg"
                          :class="{ 'opacity-0': !isImageLoaded[product.id] }"
                        >
                          <img
                            :src="product.image"
                            :alt="product.title"
                            class="w-full h-full object-cover transition-all duration-500 group-hover:scale-110"
                            @load="handleImageLoad(product.id)"
                            @error="handleImageError(product.id)"
                            loading="lazy"
                          />
                          <div
                            class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                          ></div>
                          <!-- 添加查看详情按钮 -->
                          <div
                            class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-4 group-hover:translate-y-0"
                          >
                            <div
                              class="px-4 py-2 bg-cyan-400/20 backdrop-blur-sm rounded-full text-white text-sm font-medium border border-cyan-400/30 transform transition-transform duration-300 group-hover:scale-105"
                            >
                              {{ t("products.view_details") }}
                            </div>
                          </div>
                        </div>
                        <!-- 文字内容 -->
                        <div
                          class="w-full mt-4 min-h-[80px] transition-all duration-300 transform"
                          :class="{
                            'opacity-0 translate-y-4':
                              !isImageLoaded[product.id],
                            'opacity-100 translate-y-0':
                              isImageLoaded[product.id],
                          }"
                        >
                          <div
                            class="text-center text-white text-base font-bold leading-tight mb-2 line-clamp-2 group-hover:text-cyan-400 transition-colors duration-300"
                          >
                            {{ product.title }}
                          </div>
                          <div
                            class="text-center text-zinc-400 text-sm font-normal leading-tight line-clamp-2 group-hover:text-zinc-300 transition-colors duration-300"
                          >
                            {{ product.description }}
                          </div>
                        </div>
                      </div>
                    </nuxt-link>
                  </div>
                </SwiperSlide>
              </Swiper>
            </div>
          </TransitionGroup>
        </div>
      </div>
    </section>

    <!-- 按分类栏目展示 -->
    <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
      <div class="max-w-screen-2xl mx-auto relative">
        <div
          class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"
        >
          Hanye独自に開発・製造、販売
        </div>
        <div
          class="justify-center text-white font-normal mb-8 md:mb-16 text-xl sm:text-2xl md:text-4xl lg:text-6xl"
        >
          製品カテゴリー
        </div>
      </div>
      <div class="max-w-screen-2xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <nuxt-link
            v-for="category in typedCategoryList"
            :key="category.id"
            :to="category.link"
            class="bg-zinc-950/10 backdrop-blur-[50px] border border-white/10 rounded-lg flex gap-8 p-4 sm:p-8 justify-between category-item group hover:border-cyan-400/30 transition-all duration-300"
          >
            <div class="col-span-1 flex flex-col gap-4">
              <div
                class="flex flex-col gap-2 opacity-80 group-hover:opacity-100 transition-opacity duration-300"
              >
                <div
                  v-for="capacitie in category.capacities"
                  :key="capacitie"
                  class="text-white text-sm md:text-base font-normal leading-tight flex gap-2 items-center group-hover:text-cyan-400 transition-colors duration-300"
                >
                  <i
                    class="icon-star text-sm group-hover:scale-110 transition-transform duration-300"
                  ></i>
                  <span>{{ capacitie }}</span>
                </div>
              </div>
              <div
                class="p-2 sm:p-4 mt-auto bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-white/10 backdrop-blur-xl inline-flex justify-center items-center gap-3 overflow-hidden group-hover:bg-cyan-400/10 group-hover:outline-cyan-400/30 transition-all duration-300"
              >
                <div
                  class="justify-start text-neutral-200 text-xs md:text-sm font-medium uppercase leading-relaxed group-hover:text-cyan-400 transition-colors duration-300"
                >
                  {{ category.title }}
                </div>
              </div>
            </div>
            <div
              class="w-32 h-32 md:w-44 md:h-44 relative overflow-hidden rounded-lg"
            >
              <img
                :src="category.image"
                :alt="category.title"
                class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-110"
              />
              <div
                class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
              ></div>
            </div>
          </nuxt-link>
        </div>
      </div>
    </section>

    <!-- 产品核心展示 -->
    <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
      <div
        class="max-w-screen-2xl mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4"
      >
        <div class="inline-flex justify-start items-center gap-5">
          <div
            class="w-12 h-12 md:w-16 md:h-16 relative bg-gradient-to-b from-neutral-600 to-slate-400 rounded-xl border-b-[1.50px] border-neutral-700 overflow-hidden"
          >
            <div class="w-full h-full flex items-center justify-center">
              <i class="icon-h1 text-white text-5xl"></i>
            </div>
          </div>
          <div class="inline-flex flex-col justify-center items-start flex-1">
            <div
              class="justify-start text-white font-medium text-1xl md:text-lg"
            >
              {{ t("products.support") }}
            </div>
            <div
              class="justify-start text-zinc-300 text-xs font-normal md:text-sm"
            >
              {{ t("products.support_description") }}
            </div>
          </div>
        </div>
        <div class="inline-flex justify-start items-center gap-5">
          <div
            class="w-12 h-12 md:w-16 md:h-16 relative bg-gradient-to-b from-neutral-600 to-slate-400 rounded-xl border-b-[1.50px] border-neutral-700 overflow-hidden"
          >
            <div class="w-full h-full flex items-center justify-center">
              <i class="icon-h2 text-white text-5xl"></i>
            </div>
          </div>
          <div class="inline-flex flex-col justify-center items-start flex-1">
            <div
              class="justify-start text-white font-medium text-1xl md:text-lg"
            >
              {{ t("products.development") }}
            </div>
            <div
              class="justify-start text-zinc-300 text-xs font-normal md:text-sm"
            >
              {{ t("products.development_description") }}
            </div>
          </div>
        </div>
        <div class="inline-flex justify-start items-center gap-5">
          <div
            class="w-12 h-12 md:w-16 md:h-16 relative bg-gradient-to-b from-neutral-600 to-slate-400 rounded-xl border-b-[1.50px] border-neutral-700 overflow-hidden"
          >
            <div class="w-full h-full flex items-center justify-center">
              <i class="icon-h3 text-white text-5xl"></i>
            </div>
          </div>
          <div class="inline-flex flex-col justify-center items-start flex-1">
            <div
              class="justify-start text-white font-medium text-1xl md:text-lg"
            >
              {{ t("products.develop") }}
            </div>
            <div
              class="justify-start text-zinc-300 text-xs font-normal md:text-sm"
            >
              {{ t("products.develop_description") }}
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 当社の強み -->
    <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
      <div class="max-w-screen-2xl mx-auto relative">
        <div
          class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"
        >
          {{ t("products.strong_point") }}
        </div>
        <div
          class="justify-center text-white font-normal mb-8 md:mb-16 text-xl sm:text-2xl md:text-4xl lg:text-6xl"
        >
          {{ t("products.strong_point_title") }}
        </div>
        <div
          class="absolute right-0 top-1/2 -translate-y-1/2 z-10 lg:block hidden"
        >
          <div class="flex items-center justify-center gap-4">
            <div
              class="swiper-button-prev-3 bg-zinc-700 w-10 h-10 rounded-full flex items-center justify-center cursor-pointer hover:bg-zinc-600 transition-colors duration-200"
            >
              <i class="icon-arrow-left text-zinc-300 text-sm font-normal"></i>
            </div>
            <div
              class="swiper-button-next-3 bg-zinc-700 w-10 h-10 rounded-full flex items-center justify-center cursor-pointer hover:bg-zinc-600 transition-colors duration-200"
            >
              <i class="icon-arrow-right text-zinc-300 text-sm font-normal"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="max-w-screen-2xl mx-auto">
        <div class="w-full relative max-w-full">
          <Swiper
            :modules="[Navigation, Pagination]"
            slides-per-view="auto"
            :space-between="30"
            :pagination="{ el: '.swiper-pagination-3', clickable: true }"
            :navigation="{
              prevEl: '.swiper-button-prev-3',
              nextEl: '.swiper-button-next-3',
            }"
            class="h-[320px] sm:h-[320px] md:h-[480px] lg:h-[720px] max-w-full"
          >
            <SwiperSlide class="!max-w-screen-2xl !w-full">
              <div
                class="w-full h-full flex items-center px-0 md:px-20"
                :style="{
                  backgroundImage: `url(${homeC1Webp})`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  backgroundRepeat: 'no-repeat',
                }"
              >
                <div
                  class="w-full lg:w-[50%] h-full md:h-auto bg-white/5 rounded-0 md:rounded-2xl backdrop-blur-[50px] px-4 py-8 md:py-12 md:px-8 flex flex-col gap-8 border border-white/10"
                >
                  <div
                    class="opacity-90 justify-start text-white text-2xl font-normal md:text-4xl"
                  >
                    一貫体制による高品質と安定供給
                  </div>
                  <div
                    class="opacity-70 justify-start text-white text-base md:text-lg font-normal leading-relaxed"
                  >
                    「企画・開発から製造、品質管理、販売、オンラインショップ運営まで自社で完結。ISO認証取得の工場で生産された信頼性の高い製品を、安定してお届けします。」
                  </div>
                </div>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
        <div class="max-w-screen-2xl mx-auto relative">
          <div class="swiper-pagination swiper-pagination-3"></div>
        </div>
      </div>
    </section>

    <!-- 产品咨询 -->
    <section class="max-w-full h-[240px] md:h-[480px] bg-black/80 md:block">
      <div class="h-full relative">
        <div
          class="absolute top-0 left-0 w-full h-full flex flex-col gap-6 items-center justify-center z-10"
        >
          <h1
            class="text-center justify-start text-white font-normal text-xl sm:text-2xl md:text-3xl px-2"
          >
            {{ t("products.consultation") }}
          </h1>
          <nuxt-link
            :to="locale === defaultLocale ? '/contact' : `/${locale}/contact`"
            class="w-32 h-10 md:w-40 md:h-11 bg-zinc-300/10 rounded-lg outline outline-1 flex items-center justify-center gap-2 outline-white/20 backdrop-blur-[10px] cursor-pointer hover:bg-zinc-300/20 transition-colors duration-200"
          >
            <span class="text-xs md:text-sm font-normal">{{
              t("products.consultation_button")
            }}</span>
            <i class="icon-arrow-right text-sm font-normal"></i>
          </nuxt-link>
        </div>
        <img
          v-if="isMobile"
          :src="videoWebp"
          alt="video"
          class="w-full h-full object-cover opacity-20"
        />
        <video
          v-else
          :src="videoSrc"
          autoplay
          muted
          loop
          :poster="videoWebp"
          class="w-full h-full object-cover opacity-20"
        ></video>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import {
  Navigation,
  Pagination,
  Autoplay,
  EffectCreative,
} from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
import { useI18n, useRoute, useAsyncData, queryCollection } from "#imports";
import video from "@/assets/videos/video.mp4";
import videoWebp from "@/assets/videos/video.webp";
import homeA1Webp from "@/assets/images/home-a-1.webp";
import homeA2Webp from "@/assets/images/home-a-2.webp";
import homeA3Webp from "@/assets/videos/banner03.mp4";
import homeC1Webp from "@/assets/images/home-c-1.webp";


// 数据类型定义
interface Product {
  id: number;
  title: string;
  image: string;
  link: string;
  description?: string;
}

interface Usage {
  id: number;
  name: string;
  category?: string;
  products: Product[];
}

interface Category {
  id: number;
  title: string;
  description: string;
  capacities: string[];
  summary: string;
  sort: number;
  image: string;
  link: string;
}

// 使用i18n
const { t, locale } = useI18n();
// 默认语言
const defaultLocale = "ja";
// 获取路由
const route = useRoute();
// 断点
const breakpoints = useBreakpoints(breakpointsTailwind);
// 是否移动端
const isMobile = breakpoints.smaller("md");

const videoSrc = ref(video);

/**
 * 使用计算属性获取当前语言的数据文件URL
 */
const usageDataUrl = computed(() => {
  return `/data/usages-${locale.value}.json`;
});

const categoryDataUrl = computed(() => {
  return `/data/categories-${locale.value}.json`;
});

const productsDataUrl = computed(() => {
  return `/data/products-${locale.value}.json`;
});

const homepagePath = computed(() => {
  return locale.value === "zh" ? "" : `/${locale.value}`;
});

// 获取按用途产品数据
const usageList = ref<Usage[]>([]);
const isLoadingUsage = ref(true);
const activeUsageId = ref(1);

// 获取按分类栏目数据
const categoryList = ref<Category[]>([]);
const isLoadingCategory = ref(true);

// 加载用途数据
const loadUsageData = async () => {
  try {
    isLoadingUsage.value = true;
    // 使用fetch获取数据
    if (process.client) {
      const response = await fetch(usageDataUrl.value);
      if (!response.ok) {
        throw new Error(`加载用途数据失败: ${response.status}`);
      }
      const usageData = await response.json();
      // 加载对应的产品数据
      const productsResponse = await fetch(productsDataUrl.value);
      if (!productsResponse.ok) {
        throw new Error(`加载产品数据失败: ${productsResponse.status}`);
      }

      const productsData = await productsResponse.json();
      // 处理数据
      usageList.value = usageData
        .map((usage: any) => {
          console.log(`处理用途: ${usage.id} - ${usage.title}`, usage);

          // 为每种用途找到对应的产品
          const usageProducts = [];

          // 按照正确的设计模式：使用用途的title与产品的usage数组进行匹配
          // 找出所有usage属性包含当前用途title的产品
          const matchedProducts = productsData.filter(
            (product: any) =>
              product.usage &&
              Array.isArray(product.usage) &&
              product.usage.includes(usage.title)
          );

          console.log(
            `用途"${usage.title}"匹配到 ${matchedProducts.length} 个产品`
          );

          // 将匹配的产品添加到列表
          if (matchedProducts.length > 0) {
            matchedProducts.forEach((product: any) => {
              usageProducts.push({
                id: product.id,
                title: product.title,
                image: product.image,
                link: `${homepagePath.value}/products/${product.id}`,
                description: product.summary,
              });
            });
          } else {
            // 如果没有找到匹配的产品，添加一个占位产品
            console.log(`用途 ${usage.title} 没有匹配到任何产品，添加占位产品`);

            usageProducts.push({
              id: `placeholder-${usage.id}`,
              title: usage.title,
              image: ``,
              link: `${homepagePath.value}/products?usage=${encodeURIComponent(
                usage.title
              )}`,
              description: "",
            });
          }

          return {
            id: parseInt(usage.id) || 0,
            name: usage.title,
            category: usage.category || "",
            products: usageProducts,
          };
        })
        .sort((a: any, b: any) => a.id - b.id);

      // 设置默认选中的用途
      if (usageList.value.length > 0) {
        activeUsageId.value = usageList.value[0].id;
      }
    }
  } catch (error) {
    console.error("Error loading usage data:", error);
  } finally {
    isLoadingUsage.value = false;
  }
};

// 加载分类数据
const loadCategoryData = async () => {
  try {
    isLoadingCategory.value = true;
    // 使用fetch获取数据
    if (process.client) {
      const response = await fetch(categoryDataUrl.value);
      if (!response.ok) {
        throw new Error(`加载分类数据失败: ${response.status}`);
      }

      const data = await response.json();
      console.log("Raw category data:", data);

      // 处理数据
      categoryList.value = data
        .map((category: any) => {
          return {
            id: parseInt(category.id) || 0,
            title: category.title || "",
            description: category.description || "",
            image: category.image || "",
            link: `${homepagePath.value}/products?category=${encodeURIComponent(
              category.title
            )}`,
            capacities: category.capacities || [],
            summary: category.summary || "",
            sort: category.sort || 0,
          };
        })
        .sort((a: any, b: any) => a.id - b.id);
    }
  } catch (error) {
    console.error("Error loading category data:", error);
  } finally {
    isLoadingCategory.value = false;
  }
};

// 当页面加载或语言改变时加载数据
onMounted(() => {
  loadUsageData();
  loadCategoryData();
});

watch(locale, () => {
  loadUsageData();
  loadCategoryData();
});

// 处理数据变化
watchEffect(() => {
  if (usageList.value) {
    console.log("Updated usage list:", usageList.value);
  }

  if (categoryList.value) {
    console.log("Updated category list:", categoryList.value);
  }
});

// 计算当前用途列表
const typedUsageList = computed(() => {
  console.log("Typed Usage List:", usageList.value);
  return usageList.value as Usage[];
});

// 计算当前激活的索引
const activeIndex = computed(() => {
  return typedUsageList.value.findIndex(
    (item) => item.id === activeUsageId.value
  );
});

const activeProducts = computed(() => {
  const currentUsage = typedUsageList.value.find(
    (item: Usage) => item.id === activeUsageId.value
  );
  if (currentUsage?.products) {
    console.log(
      "Products:",
      currentUsage.products.map((p: Product) => ({
        id: p.id,
        title: p.title,
        image: p.image,
        link: p.link,
      }))
    );
  }
  return currentUsage?.products || [];
});

// 图片加载状态
const isImageLoaded = ref<Record<number, boolean>>({});
const imageErrors = ref<Record<number, boolean>>({});

// 监听图片加载状态
watch(
  activeProducts,
  (newProducts: Product[]) => {
    console.log("Active Products Changed:", newProducts);
    if (process.client) {
      newProducts.forEach((product: Product) => {
        if (product.image) {
          console.log(
            `Checking image for product ${product.id}:`,
            product.image
          );
          const img = new window.Image();
          img.onload = () => handleImageLoad(product.id);
          img.onerror = () => handleImageError(product.id);
          img.src = product.image;
        }
      });
    }
  },
  { immediate: true }
);

// 处理图片加载
const handleImageLoad = (id: number) => {
  if (process.client) {
    console.log(`Image loaded for product ${id}`);
    isImageLoaded.value[id] = true;
    imageErrors.value[id] = false;
  }
};

// 处理图片加载错误
const handleImageError = (id: number) => {
  if (process.client) {
    console.error(`Failed to load image for product ${id}`);
    isImageLoaded.value[id] = true;
    imageErrors.value[id] = true;
  }
};

// 处理用途点击
const handleUsageClick = (id: number) => {
  if (process.client) {
    console.log("Usage clicked:", id);
    // 重置图片加载状态
    isImageLoaded.value = {};
    imageErrors.value = {};
    activeUsageId.value = id;
  }
};

// 计算当前分类列表
const typedCategoryList = computed(() => {
  return categoryList.value as Category[];
});

// SEO优化
useHead({
  title: t("home.title") + " - Hanye",
  meta: [
    {
      name: "description",
      content: t("home.description"),
    },
    {
      name: "keywords",
      content: t("home.keywords"),
    },
  ],
});
</script>

<style lang="scss" scoped>
:deep(.swiper-pagination-3) {
  margin: auto;
  position: static;
  padding: 1rem 0;
}
:deep(.swiper-pagination-bullet) {
  background-color: var(--color-bg); /* Example color */
  border: 2px solid var(--color-text);
}
:deep(.swiper-pagination-bullet-active) {
  background-color: var(--color-text); /* Example color */
}
.category-item {
  background-image: url("@/assets/images/home-b-1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;

  &:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

    &::before {
      opacity: 1;
    }
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(6, 182, 212, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
}

// 优化过渡动画
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  width: 100%;
  height: 300px;
}

@media (min-width: 640px) {
  .slide-fade-enter-active,
  .slide-fade-leave-active {
    height: 350px;
  }
}

@media (min-width: 768px) {
  .slide-fade-enter-active,
  .slide-fade-leave-active {
    height: 400px;
  }
}

@media (min-width: 1024px) {
  .slide-fade-enter-active,
  .slide-fade-leave-active {
    height: 450px;
  }
}

.slide-fade-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

// 添加响应式优化
@media (max-width: 640px) {
  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateX(15px);
  }
}

// 优化图片加载动画
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient 3s ease infinite;
}

// 移除 pagination 相关样式
:deep(.swiper-pagination-2) {
  display: none;
}

// 添加导航按钮禁用样式
:deep(.swiper-button-disabled) {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

// 优化轮播图样式
:deep(.swiper-container-1) {
  .swiper-slide {
    transition: all 0.5s ease;
    transform-origin: center center;
    backface-visibility: hidden;
    perspective: 1000px;
  }

  .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: all 0.3s ease;
    margin: 0 8px !important;

    &-active {
      background: #fff;
      border-color: #fff;
      transform: scale(1.2);
    }
  }

  .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
  }
}

// 添加轮播图遮罩效果
.swiper-slide {
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.4) 100%
    );
    z-index: 1;
  }
}

// 优化图片加载动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.swiper-slide-active {
  img {
    animation: fadeIn 0.8s ease-out forwards;
  }
}

// 优化产品卡片动画和交互
.swiper-slide {
  a {
    text-decoration: none;
    display: block;
    height: 100%;

    &:hover {
      text-decoration: none;
    }

    > div {
      position: relative;
      z-index: 1;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      }
    }
  }
}

// 移除卡片抖动动画
@keyframes cardHover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-2px);
  }
}
</style>