<template>
  <div class="product-header">
    <div class="product-image">
      <el-image
        v-if="product.images.length <= 1"
        :src="getImageUrl(product.images[0].image)"
        :alt="product.name"
        fit="contain"
      />
      <el-carousel
        v-else
        class="product-carousel"
        height="auto"
        :autoplay="false"
        :loop="false"
        arrow="always"
      >
        <el-carousel-item
          v-for="(item, index) in product.images || []"
          :key="index"
          class="product-carousel-item"
        >
          <div>
            <el-image
              :src="getImageUrl(item.image || '')"
              :alt="product.name"
              fit="contain"
              lazy
            />
            <p v-if="item.caption" class="product-image-caption">
              {{ item.caption }}
            </p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="product-info">
      <h1>{{ product.name }}</h1>
      <p class="summary">{{ product.summary }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
  defineProps({
    product: {
      type: Object as PropType<ProductView>,
      required: true,
    },
  });

  const { getImageUrl } = useDirectusImage();
</script>

<style scoped>
  .product-header {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
  }

  .product-carousel-item {
    height: 500px;
  }

  .product-image .el-image {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 8px;
  }

  .product-image-caption {
    position: absolute;
    bottom: 10px;
    /* left: 10%; */
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 5px 10px;
    text-align: center;
    color: white;
    font-size: 0.8rem;
  }

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

  .product-info h1 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 2rem;
  }

  .summary {
    color: var(--el-color-info);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
  }

  @media (max-width: 768px) {
    .product-header {
      grid-template-columns: 1fr;
    }

    .product-carousel-item {
      height: 300px;
    }

    .product-image .el-image {
      height: 300px;
    }

    .product-info h1 {
      font-size: 1.5rem;
      margin-top: 0;
    }
  }
</style>
