<script setup>
import { ref, onBeforeMount, onMounted, computed } from "vue";
import { useRouter } from "#imports";
import { useI18n } from "#imports";
import { usePageTitle } from "@/composables/usePageTitle.js";
import { useImagePath } from "@/composables/useImagePath.js";
import topBar from "@/components/top/title-bar.vue";
import footBar from "@/components/bottom/foot-bar.vue";
import { Swiper } from "swiper";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

const router = useRouter();
const { t } = useI18n();
const { cdnImageUrl } = useImagePath();

// 设置页面标题
usePageTitle("page.home");

// 响应式数据定义 - 使用computed确保国际化文本能响应语言切换
const swiperData = computed(() => [
  {
    image: cdnImageUrl("/static/home/swiper_01.png"),
    title: t("home.swiper.led.title"),
    subtitle: t("home.swiper.led.subtitle"),
    description: t("home.swiper.led.description"),
    buttonText: t("home.swiper.led.button"),
  },
  {
    image: cdnImageUrl("/static/home/swiper_03.jpg"),
    title: t("home.swiper.monitor.title"),
    subtitle: t("home.swiper.monitor.subtitle"),
    description: t("home.swiper.monitor.description"),
    buttonText: t("home.swiper.monitor.button"),
  },
  {
    image: cdnImageUrl("/static/home/swiper_02.jpg"),
    title: t("home.swiper.security.title"),
    subtitle: t("home.swiper.security.subtitle"),
    description: t("home.swiper.security.description"),
    buttonText: t("home.swiper.security.button"),
  }
]);

const productList = computed(() => [
  {
    _id: "S01",
    name: t("product.s01.name"),
    category: t("product.s01.category"),
    description: t("product.s01.description"),
    image: cdnImageUrl("/static/product/monitor/S01.png"),
    isHot: true
  },
  {
    _id: "T11",
    name: t("product.t11.name"),
    category: t("product.t11.category"),
    description: t("product.t11.description"),
    image: cdnImageUrl("/static/product/monitor/T11.png")
  },
  {
    _id: "XA-01",
    name: t("product.xa01.name"),
    category: t("product.xa01.category"),
    description: t("product.xa01.description"),
    image: cdnImageUrl("/static/product/street_light/XA-01.png")
  }
]);

// 获取产品列表
const currentProducts = computed(() => {
  return productList.value;
});

// 跳转到产品页面
const goProduct = (item) => {
  // 根据产品类型确定分类
  const category = item._id === "XA-01" ? "street-light" : "monitor";
  router.push({
    path: "/product",
    query: {
      category: category,
      id: item._id,
    },
  });
};

// 跳转到产品页面（查看更多）
const goToProductPage = () => {
  router.push("/product");
};

// 处理轮播图按钮点击
const handleSwiperButtonClick = (item) => {
  // 根据轮播图标题中的关键词来判断产品类型
  // 使用图片路径来判断，避免依赖可变的国际化文本
  if (item.image.includes("swiper_01")) {
    // LED照明相关 - 对应路灯产品
    router.push({
      path: "/product",
      query: {
        category: "street-light"
      }
    });
  } else {
    // 监控设备相关
    router.push({
      path: "/product",
      query: {
        category: "monitor"
      }
    });
  }
};



onMounted(() => {
  // 初始化Swiper轮播图
  const swiper = new Swiper(".swiper-container", {
    modules: [Navigation, Pagination, Autoplay],
    loop: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false,
      pauseOnMouseEnter: true,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      dynamicBullets: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    speed: 800,
    effect: "slide",
  });
});
</script>

<template>
  <div class="home-page">
    <topBar class="define-topBar__components"></topBar>

    <section class="hero-banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            v-for="(item, index) in swiperData"
            :key="index"
            class="swiper-slide"
          >
            <div
              class="slide-bg"
              :style="{ backgroundImage: `url(${item.image})` }"
            ></div>

            <div class="container">
              <div class="slide-content">
                <div class="slide-tag">{{ item.title }}</div>
                <h1 class="slide-title">{{ item.subtitle }}</h1>
                <p class="slide-description">{{ item.description }}</p>
                <button class="cta-button" @click="handleSwiperButtonClick(item)">{{ item.buttonText }}</button>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </section>

    <!-- 产品展示 -->
    <section class="products-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">{{ t("home.products.title") }}</h2>
          <p class="section-subtitle">{{ t("home.products.subtitle") }}</p>
        </div>

        <!-- 精选产品展示 -->
        <div class="featured-products">
          <div
            v-for="(item, index) in currentProducts"
            :key="item._id"
            class="featured-product-card"
            :class="`card-${index + 1}`"
            @click="goProduct(item)"
          >
            <div v-if="item.isHot" class="hot-badge">{{ t("product.hot.badge") }}</div>
            <div class="product-image-section">
              <div class="product-image-container">
                <img v-lazy="item.image" :alt="item.name" />
              </div>
            </div>
            <div class="product-content-section">
              <div class="product-category">{{ item.category }}</div>
              <h3 class="product-title">{{ item.name }}</h3>
              <p class="product-description">{{ item.description }}</p>

              <div class="product-action">
                <button class="learn-more-btn">
                  {{ t("product.learn-more") }}
                  <i class="arrow-icon"></i>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 查看更多产品按钮 -->
        <div class="more-products-section">
          <button class="more-products-btn" @click="goToProductPage">
            {{ t("home.products.view-all") }}
            <i class="arrow-right"></i>
          </button>
        </div>
      </div>
    </section>

    <foot-bar></foot-bar>
  </div>
</template>

<style lang="scss" scoped>
// 基础样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.home-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  padding-top: 50px; // 为固定导航栏留出空间

  // 4K 和超大屏幕适配
  @media (min-width: 2560px) {
    padding-top: 80px;
  }

  @media (max-width: 1440px) {
    padding-top: 50px;
  }

  @media (max-width: 768px) {
    padding-top: 45px;
  }

  @media (max-width: 480px) {
    padding-top: 40px;
  }

  @media (max-width: 375px) {
    padding-top: 35px;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;

  // 4K 和超大屏幕
  @media (min-width: 2560px) {
    max-width: 1800px;
    padding: 0 60px;
  }

  @media (min-width: 1920px) and (max-width: 2559px) {
    max-width: 1400px;
    padding: 0 40px;
  }

  @media (min-width: 1440px) and (max-width: 1919px) {
    max-width: 1200px;
    padding: 0 30px;
  }

  @media (max-width: 1024px) {
    padding: 0 24px;
  }

  @media (max-width: 768px) {
    padding: 0 20px;
  }

  @media (max-width: 480px) {
    padding: 0 16px;
  }

  @media (max-width: 375px) {
    padding: 0 12px;
  }
}

// Hero Banner Swiper
.hero-banner {
  position: relative;
  height: 400px;
  overflow: hidden;

  // 4K 和超大屏幕
  @media (min-width: 2560px) {
    height: 640px;
  }

  @media (min-width: 1920px) and (max-width: 2559px) {
    height: 520px;
  }

  @media (min-width: 1440px) and (max-width: 1919px) {
    height: 440px;
  }

  @media (max-width: 1024px) {
    height: 360px;
  }

  @media (max-width: 768px) {
    height: 320px;
  }

  @media (max-width: 480px) {
    height: 280px;
  }

  @media (max-width: 375px) {
    height: 260px;
  }
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

// 移除遮罩层样式

.slide-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 600px;
  padding: 0 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

  // 4K 和超大屏幕
  @media (min-width: 2560px) {
    max-width: 1000px;
    padding: 0 40px;
  }

  @media (min-width: 1920px) and (max-width: 2559px) {
    max-width: 800px;
    padding: 0 30px;
  }

  @media (min-width: 1440px) and (max-width: 1919px) {
    max-width: 700px;
    padding: 0 25px;
  }

  @media (max-width: 1024px) {
    max-width: 90%;
    padding: 0 20px;
  }

  @media (max-width: 768px) {
    max-width: 90%;
    padding: 0 16px;
  }

  @media (max-width: 480px) {
    max-width: 95%;
    padding: 0 12px;
  }

  @media (max-width: 375px) {
    max-width: 95%;
    padding: 0 10px;
  }
}

.slide-tag {
  display: inline-block;
  background: rgba(79, 140, 239, 0.9);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.slide-title {
  font-size: 46px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 1.5px;

  // 4K 和超大屏幕
  @media (min-width: 2560px) {
    font-size: 72px;
    margin-bottom: 24px;
    letter-spacing: 2px;
  }

  @media (min-width: 1920px) and (max-width: 2559px) {
    font-size: 60px;
    margin-bottom: 20px;
  }

  @media (min-width: 1440px) and (max-width: 1919px) {
    font-size: 52px;
    margin-bottom: 18px;
  }

  @media (max-width: 1024px) {
    font-size: 40px;
    margin-bottom: 14px;
  }

  @media (max-width: 768px) {
    font-size: 32px;
    margin-bottom: 12px;
    letter-spacing: 1px;
  }

  @media (max-width: 480px) {
    font-size: 28px;
    margin-bottom: 10px;
  }

  @media (max-width: 375px) {
    font-size: 24px;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
  }
}

.slide-description {
  font-size: 18px;
  opacity: 0.9;
  letter-spacing: 1px;
  margin-bottom: 30px;

  @media (max-width: 768px) {
    font-size: 16px;
    margin-bottom: 20px;
  }
}

.cta-button {
  background: #4f8cef;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;

  &:hover {
    background: #3a7bd8;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79, 140, 239, 0.3);
  }

  @media (max-width: 768px) {
    padding: 10px 24px;
    font-size: 14px;
  }
}

// 轮播图样式完成

// Swiper 控制按钮样式
.swiper-pagination {
  bottom: 20px !important;

  .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    margin: 0 6px;

    &.swiper-pagination-bullet-active {
      background: white;
    }
  }
}

.swiper-button-prev,
.swiper-button-next {
  color: white !important;
  width: 40px !important;
  height: 40px !important;
  margin-top: -20px !important;

  &:after {
    font-size: 16px !important;
  }

  @media (max-width: 768px) {
    display: none;
  }
}

// 产品展示部分
.products-section {
  padding: 60px 0;
  background: #f8f9fa;

  // 4K 和超大屏幕
  @media (min-width: 2560px) {
    padding: 120px 0;
  }

  @media (min-width: 1920px) and (max-width: 2559px) {
    padding: 100px 0;
  }

  @media (min-width: 1440px) and (max-width: 1919px) {
    padding: 80px 0;
  }

  @media (max-width: 1024px) {
    padding: 50px 0;
  }

  @media (max-width: 768px) {
    padding: 40px 0;
  }

  @media (max-width: 480px) {
    padding: 30px 0;
  }

  @media (max-width: 375px) {
    padding: 25px 0;
  }
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 10px;

  @media (max-width: 768px) {
    font-size: 28px;
  }
}

.section-subtitle {
  font-size: 16px;
  color: #7f8c8d;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

// 精选产品展示
.featured-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;

  // 4K 和超大屏幕
  @media (min-width: 2560px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 80px;
  }

  @media (min-width: 1920px) and (max-width: 2559px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 60px;
  }

  @media (min-width: 1440px) and (max-width: 1919px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 50px;
  }

  @media (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
  }

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 30px;
  }

  @media (max-width: 480px) {
    gap: 20px;
    margin-bottom: 25px;
  }

  @media (max-width: 375px) {
    gap: 16px;
    margin-bottom: 20px;
  }
}

.featured-product-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  cursor: pointer;
  position: relative;

  &:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

    .product-image-container img {
      transform: scale(1.1);
    }

    .learn-more-btn {
      background: linear-gradient(135deg, #4f8cef, #3a7bd8);
      color: white;

      .arrow-icon {
        transform: translateX(5px);
      }
    }
  }
}

.hot-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.product-image-section {
  height: 240px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
}

.product-image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
  }
}

.product-content-section {
  padding: 24px;
}

.product-category {
  color: #4f8cef;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.product-title {
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 12px;
  line-height: 1.3;
}

.product-description {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.4;
  margin-bottom: 18px;
}

.product-action {
  text-align: center;
}

.learn-more-btn {
  background: transparent;
  color: #4f8cef;
  border: 2px solid #4f8cef;
  padding: 12px 30px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  .arrow-icon {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid currentColor;
    transition: transform 0.3s ease;
  }
}

// 查看更多产品按钮
.more-products-section {
  text-align: center;
  margin-top: 30px;
}

.more-products-btn {
  background: linear-gradient(135deg, #4f8cef, #3a7bd8);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  &:hover {
    background: linear-gradient(135deg, #3a7bd8, #2c5aa0);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79, 140, 239, 0.3);
  }

  .arrow-right {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid white;
    transition: transform 0.3s ease;
  }

  &:hover .arrow-right {
    transform: translateX(3px);
  }
}
</style>
