<template>
  <!-- 产品详情页 - 严格按 Figma 1544:530 实现 -->
  <view class="detail-page">
    <!-- 产品图片轮播 + 指示点 -->
    <DetailSwiper :images="productImages" />

    <!-- 产品信息：名称/SKU/国家/价格/4列快捷信息 -->
    <ProductInfo :info="product" />

    <!-- 灰色分隔条 -->
    <view class="section-divider"></view>

    <!-- 颜色选择 -->
    <ColorSelector
      :list="colors"
      :selected-id="selectedColorId"
      @select="selectColor"
    />

    <!-- 灰色分隔条 -->
    <view class="section-divider"></view>

    <!-- 尺码选择 -->
    <SizeSelector
      :list="sizes"
      :selected="selectedSize"
      @select="selectSize"
    />

    <!-- 灰色分隔条 -->
    <view class="section-divider"></view>

    <!-- 产品参数（含可展开的补充说明） -->
    <ParamsTable :list="productParams" />

    <!-- 灰色分隔条 -->
    <view class="section-divider"></view>

    <!-- 产品尺码表 -->
    <SizeChart :data="sizeChart" />

    <!-- 灰色分隔条 -->
    <view class="section-divider"></view>

    <!-- 包装规格表 -->
    <PackagingSpec :data="packaging" />
  </view>
</template>

<script>
import DetailSwiper from './components/DetailSwiper.vue'
import ProductInfo from './components/ProductInfo.vue'
import ColorSelector from './components/ColorSelector.vue'
import SizeSelector from './components/SizeSelector.vue'
import ParamsTable from './components/ParamsTable.vue'
import SizeChart from './components/SizeChart.vue'
import PackagingSpec from './components/PackagingSpec.vue'

import {
  mockProduct,
  mockImages,
  mockColors,
  mockSizes,
  mockParams,
  mockSizeChart,
  mockPackaging
} from './mock.js'

export default {
  components: {
    DetailSwiper,
    ProductInfo,
    ColorSelector,
    SizeSelector,
    ParamsTable,
    SizeChart,
    PackagingSpec
  },
  data() {
    return {
      productId: null,
      product: mockProduct,
      productImages: mockImages,
      colors: mockColors,
      // 默认选中"灰色"（id=3），与 Figma 设计稿一致
      selectedColorId: 3,
      sizes: mockSizes,
      // 默认选中 L，与 Figma 设计稿一致
      selectedSize: 'L',
      productParams: mockParams,
      sizeChart: mockSizeChart,
      packaging: mockPackaging
    }
  },
  onLoad(options) {
    if (options && options.id) {
      this.productId = options.id
    }
  },
  methods: {
    selectColor(id) {
      this.selectedColorId = id
    },
    selectSize(size) {
      this.selectedSize = size
    }
  }
}
</script>

<style>
@import './product-detail.css';
</style>
