<template>
  <div class="homepage">
    <div v-if="!pending" class="carousel">
      <el-carousel
        class="homepage-carousel"
        height="auto"
        :interval="5000"
        arrow="never"
        autoplay
      >
        <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
          <div class="carousel-item">
            <el-image
              class="carousel-image"
              :src="useStrapiMedia(item.url || '')"
              :alt="item.alternativeText || `Carousel Image ${index + 1}`"
              fit="contain"
              lazy
            />
            <p v-if="item.caption" class="carousel-image-caption">
              {{ item.caption }}
            </p>
          </div>
        </el-carousel-item>
      </el-carousel>
      <section class="homepage-section">
        <h2>推荐产品</h2>
        <p>
          探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。
        </p>
        <el-carousel
          class="recommend-carousel"
          height="auto"
          arrow="never"
          indicator-position="outside"
          :autoplay="false"
        >
          <el-carousel-item
            v-for="n in Math.floor(recommend_productions.length / 3) + 1"
            :key="n"
            class="recommend-list"
          >
            <div class="recommend-card-group">
              <el-card
                v-for="(item, index) in recommend_productions.slice(
                  (n - 1) * 3,
                  n * 3
                )"
                :key="index"
                class="recommend-card"
                @click="handleProductionCardClick(item.documentId || '')"
              >
                <template #header>
                  <el-image
                    :src="useStrapiMedia(item.cover?.url || '')"
                    :alt="item.cover?.alternativeText || item.title"
                    fit="cover"
                    lazy
                  />
                </template>
                <div class="recommend-card-body">
                  <!-- Title -->
                  <div class="text-center">
                    <span class="recommend-card-title">{{ item.title }}</span>
                  </div>
                  <!-- Description -->
                  <div class="recommend-card-description text-left opacity-25">
                    {{ item.summary }}
                  </div>
                </div>
              </el-card>
            </div>
          </el-carousel-item>
        </el-carousel>
      </section>
      <section class="homepage-section">
        <h2>推荐解决方案</h2>
        <p>了解我们的定制解决方案，帮助您优化业务流程，提高效率。</p>
        <el-carousel
          class="recommend-carousel"
          height="auto"
          arrow="never"
          indicator-position="outside"
          :autoplay="false"
        >
          <el-carousel-item
            v-for="n in Math.floor(recommend_solutions.length / 3) + 1"
            :key="n"
            class="recommend-list"
          >
            <div class="recommend-card-group">
              <el-card
                v-for="(item, index) in recommend_solutions.slice(
                  (n - 1) * 3,
                  n * 3
                )"
                :key="index"
                class="recommend-card"
                @click="handleSolutionCardClick(item.documentId || '')"
              >
                <template #header>
                  <el-image
                    :src="useStrapiMedia(item.cover?.url || '')"
                    :alt="item.cover?.alternativeText || item.title"
                    fit="cover"
                    lazy
                  />
                </template>
                <div class="recommend-card-body">
                  <!-- Title -->
                  <div class="text-center">
                    <span class="recommend-card-title">{{ item.title }}</span>
                  </div>
                  <!-- Description -->
                  <div class="recommend-card-description text-left opacity-25">
                    {{ item.summary }}
                  </div>
                </div>
              </el-card>
            </div>
          </el-carousel-item>
        </el-carousel>
      </section>
    </div>
    <div v-else class="loading">
      <el-skeleton :rows="3" animated />
    </div>
  </div>
</template>

<script setup lang="ts">
  const { findOne } = useStrapi();
  const { getStrapiLocale } = useLocalizations();
  const strapiLocale = getStrapiLocale();

  const carouselImages = ref<StrapiImage[]>([]);
  const recommend_productions = ref<Production[]>([]);
  const recommend_solutions = ref<Solution[]>([]);

  const pending = ref(true);

  onMounted(async () => {
    try {
      const response = await findOne<StrapiHomepage>('homepage', undefined, {
        populate: {
          carousel: {
            populate: '*',
          },
          recommend_productions: {
            populate: {
              cover: {
                populate: '*',
              },
            },
          },
          recommend_solutions: {
            populate: {
              cover: {
                populate: '*',
              },
            },
          },
        },
        locale: strapiLocale,
      });
      if (response.data) {
        carouselImages.value = response.data.carousel || [];
        recommend_productions.value = response.data.recommend_productions || [];
        recommend_solutions.value = response.data.recommend_solutions || [];
        console.log('推荐产品:', recommend_productions.value);
        console.log('推荐解决方案:', recommend_solutions.value);
      }
    } catch (error) {
      console.error('Error fetching homepage data:', error);
    } finally {
      pending.value = false;
    }
  });

  const handleProductionCardClick = (documentId: string) => {
    // 使用路由导航到产品详情页
    if (documentId) {
      const localePath = useLocalePath();
      const router = useRouter();
      router.push(localePath(`/productions/${documentId}`));
    }
  };

  const handleSolutionCardClick = (documentId: string) => {
    // 使用路由导航到解决方案详情页
    if (documentId) {
      const localePath = useLocalePath();
      const router = useRouter();
      router.push(localePath(`/solutions/${documentId}`));
    }
  };
</script>

<style scoped lang="scss">
  section {
    padding: 2rem;
  }

  section h2 {
    color: var(--el-text-color-primary);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }

  section p {
    color: var(--el-text-color-regular);
    line-height: 1.6;
  }

  .homepage-carousel .el-carousel__item {
    width: 100%;
    height: 33vw;
    /* 16:9 Aspect Ratio */
  }

  .el-carousel__item h3 {
    display: flex;
    color: #475669;
    opacity: 0.8;
    line-height: 300px;
    margin: 0;
  }

  .homepage-carousel .carousel-item {
    width: 100%;
    height: 100%;
    background-color: #f5f7fa;
  }

  .carousel-image {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .carousel-image-caption {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
  }

  .homepage-section {
    max-width: 1200px;
    margin: 0 auto;
  }

  .recommend-carousel :deep(.el-carousel__button) {
    /* 指示器按钮样式 */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #475669;
    transition: all 0.3s ease;
  }

  .recommend-list {
    display: flex;
    padding: 1rem;
    height: 400px;
  }

  .recommend-card-group {
    display: flex;
    gap: 1rem;
    width: 100%;
    margin: 0 auto;
    height: 100%;
  }

  .recommend-card {
    width: 33%;
    transition: all 0.3s ease;
    text-align: center;
  }

  .recommend-card :deep(.el-card__header) {
    padding: 0;
    border: none;
  }

  .recommend-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    cursor: pointer;
  }

  .recommend-card-body {
    margin: 10px auto;
    padding: 0px auto;
  }

  .recommend-card-title {
    font-size: 1rem;
    font-weight: 600;
  }

  .recommend-card-description {
    font-size: 0.8rem;
    margin-top: 5px;
  }

  .recommend-card .el-image {
    width: 100%;
    border-radius: 4px;
  }
</style>
