<!-- 小喷瓶 -->

<template>
  <div class="product-display">
    <ProductDetail
      :key="product.name"
      reverse
      :title="$t(`${product.name}.name`)"
      :content="$t(`${product.name}.info`)"
      :imagetitle="$t(`${product.name}.name`)"
      :info="$t(`${product.name}.info`)"
      :detailList="product.detailList"
      :imageUrl="product.imageUrl"
      :videoUrls="tm(`${product.name}.video-urls`) as VideoUrl[]"
    />
  </div>

  <div class="product-move">
    <div class="product-list">
      <div :key="product.name" class="product-card">
        <img :src="product.imageUrl" class="product-image" />
      </div>
    </div>

    <div class="detail-section">
      <transition name="fade" mode="out-in">
        <seekDetail :key="product.name" :productData="product.infoData" />
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import ProductDetail from '@/components/ProductDetail.vue'
import { useI18n } from 'vue-i18n'
import seekDetail from '@/components/seekDetail.vue'
import cjqImage from '@/assets/water/cjq.png'
import type { DetailItem, ProductInfoData } from '@/types/product'
import type { VideoUrl } from '@/types/VideoUrl'

// import { useI18n } from 'vue-i18n'
// const { t } = useI18n()
const { tm } = useI18n()

const product = ref({
  name: 'cjq',
  detailList: computed(() => tm('cjq.detail') as DetailItem[]),
  imageUrl: cjqImage,
  infoData: computed(() => tm('cjq') as ProductInfoData),
})
</script>

<style scoped>
/* 产品展示区域样式 */
.product-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}

.product-move {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.product-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.product-card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: auto;
  background: white;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.product-card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.product-card:hover:before {
  opacity: 1;
}

.product-card.active {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(106, 17, 203, 0.2);
}

.product-card.active:before {
  opacity: 1;
}

.product-image {
  width: 80%;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.detail-section {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-list {
    gap: 15px;
  }

  .product-card {
    width: 140px;
    height: 140px;
  }

  .product-display {
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .product-list {
    gap: 10px;
  }

  .product-card {
    width: 110px;
    height: 110px;
  }
}
</style>
