<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getUserBuyRecordDetail } from '../../../api/my-index'
  import { navigateBack } from '../../../utils/router'

  // 商品数据
  const goods = ref({
    id: 1001,
    title: '简约纯棉T恤 2023夏季新款',
    description:
      '采用100%优质纯棉面料，亲肤透气，经典简约设计，多色可选，百搭时尚单品',
    price: 89.99,
    originalPrice: 129.99,
    discount: 6.9,
    stock: 256,
    monthlySales: 1234,
    totalSales: 8567,
    isFavorite: false,

    // 商品图片
    images: [
      'https://picsum.photos/seed/goods1/800/800',
      'https://picsum.photos/seed/goods2/800/800',
      'https://picsum.photos/seed/goods3/800/800',
      'https://picsum.photos/seed/goods4/800/800'
    ],

    // 商品标签
    tags: ['纯棉', '透气', '简约', '百搭', '夏季'],

    // 商品规格
    specifications: [
      { key: '材质', value: '100%纯棉' },
      { key: '颜色', value: '白色/黑色/灰色/藏青' },
      { key: '尺码', value: 'S/M/L/XL/XXL' },
      { key: '厚度', value: '常规厚度' },
      { key: '袖长', value: '短袖' },
      { key: '领型', value: '圆领' },
      { key: '风格', value: '简约休闲' },
      { key: '适用人群', value: '男女通用' }
    ],

    // 商品详情
    features:
      '采用精梳棉面料，柔软亲肤，透气性好，不易起球。简约设计，百搭各种风格，无论是休闲还是运动场合都能轻松驾驭。',
    material:
      '面料：100%精梳纯棉；里料：100%纯棉；洗涤建议：30°C以下水温，不可漂白，低温熨烫',
    sizeInfo:
      'S(肩宽44cm/胸围96cm/衣长68cm)、M(肩宽46cm/胸围100cm/衣长70cm)、L(肩宽48cm/胸围104cm/衣长72cm)、XL(肩宽50cm/胸围108cm/衣长74cm)、XXL(肩宽52cm/胸围112cm/衣长76cm)',
    instructions:
      '首次洗涤建议单独清洗，避免深色衣物褪色。自然晾干，避免暴晒。',

    // 商品参数
    parameters: [
      { key: '品牌', value: 'SimpleLife' },
      { key: '商品编号', value: 'SP20230615001' },
      { key: '产地', value: '中国浙江' },
      { key: '上市时间', value: '2023年6月' },
      { key: '适用季节', value: '夏季' },
      { key: '重量', value: '约0.25kg' },
      { key: '包装', value: 'OPP袋装' },
      { key: '质检', value: '已通过国家纺织品质量检验' }
    ],
    // 富文本内容（示例）
    detailContent: ''
  })

  const loading = ref(true)
  const detailData = ref({})

  // 预览图片
  const previewImage = index => {
    // detailData.imageGallery
    uni.previewImage({
      current: detailData.value.imageGallery[index],
      urls: detailData.value.imageGallery,
      indicator: 'number',
      loop: true
    })
  }

  const getData = async id => {
    try {
      loading.value = true
      const res = await getUserBuyRecordDetail(id)
      detailData.value = res.data
      loading.value = false
    } catch (error) {
      console.log(error)
      loading.value = false
      navigateBack()
    }
  }

  // 模拟加载数据
  onLoad(e => {
    getData(e.id)
  })
</script>

<template>
  <view v-if="!loading" class="goods-detail-page">
    <!-- 商品图片轮播 -->
    <swiper
      class="goods-swiper"
      :indicator-dots="true"
      :autoplay="false"
      :interval="3000"
      :duration="500"
      circular>
      <swiper-item
        v-for="(img, index) in detailData.imageGallery"
        :key="index">
        <image
          :src="img"
          class="swiper-image"
          mode="aspectFit"
          @tap="previewImage(index)" />
        <!-- 图片指示器 -->
        <view class="image-indicator">
          <text class="indicator-text">
            {{ index + 1
            }}/{{ detailData.imageGallery.length }}
          </text>
        </view>
      </swiper-item>
    </swiper>

    <!-- 商品基本信息卡片 -->
    <view class="goods-info-card">
      <!-- 价格和名称 -->
      <view class="price-section">
        <view class="current-price">
          <text class="price-symbol"
            >¥</text
          >
          <text
            class="price-number"
            >{{ detailData.payAmount }}</text
          >
          <text class="original-price">
            ¥{{ detailData.totalAmount }}
          </text>
          <!-- <view v-if="goods.discount" class="discount-tag">
            <text class="discount-text">{{ goods.discount }}折</text>
          </view> -->
        </view>
        <!-- <text class="goods-title">{{ goods.title }}</text> -->
      </view>

      <!-- 商品描述 -->
      <text
        class="goods-description"
        >{{ detailData.productName }}</text
      >

      <!-- 商品标签 -->
      <!-- <view class="tags-section">
        <view class="tag-item" v-for="tag in goods.tags" :key="tag">
          <text class="tag-text">{{ tag }}</text>
        </view>
      </view> -->
    </view>

    <!-- 商品规格信息卡片 -->
    <view class="spec-card">
      <view class="card-header">
        <text class="card-title"
          >商品参数</text
        >
      </view>
      <view class="spec-list">
        <view class="spec-item">
          <text class="spec-key"
            >订单号：</text
          >
          <text
            class="spec-value"
            >{{ detailData.orderNo }}</text
          >
        </view>
        <view class="spec-item">
          <text class="spec-key"
            >提交时间：</text
          >
          <text
            class="spec-value"
            >{{ detailData.updateTime }}</text
          >
        </view>
          <view class="spec-item">
          <text class="spec-key"
            >规格：</text
          >
          <text
            class="spec-value"
            >{{ detailData.specText }}</text
          >
        </view>
      </view>
    </view>

    <!-- 库存和销量信息卡片 -->
    <!-- <view class="info-card">
      <view class="info-grid">
        <view class="info-item">
          <text class="info-label">库存</text>
          <text class="info-value">{{ goods.stock }}件</text>
        </view>
        <view class="divider"></view>
        <view class="info-item">
          <text class="info-label">月销量</text>
          <text class="info-value">{{ goods.monthlySales }}件</text>
        </view>
        <view class="divider"></view>
        <view class="info-item">
          <text class="info-label">累计销量</text>
          <text class="info-value">{{ goods.totalSales }}件</text>
        </view>
      </view>
    </view> -->

    <!-- 商品详情描述 -->
    <!-- <view class="detail-card">
      <view class="card-header">
        <text class="card-title">商品详情</text>
      </view>
      <view class="detail-content">
        <rich-text :nodes="goods.detailContent"></rich-text>

        <view v-if="!goods.detailContent" class="default-detail">
          <view class="detail-section">
            <text class="detail-title">产品特色</text>
            <text class="detail-text">{{ goods.features }}</text>
          </view>
          <view class="detail-section">
            <text class="detail-title">材质说明</text>
            <text class="detail-text">{{ goods.material }}</text>
          </view>
          <view class="detail-section">
            <text class="detail-title">尺寸信息</text>
            <text class="detail-text">{{ goods.sizeInfo }}</text>
          </view>
          <view class="detail-section">
            <text class="detail-title">使用说明</text>
            <text class="detail-text">{{ goods.instructions }}</text>
          </view>
        </view>
      </view>
    </view> -->

    <!-- 配送和售后信息 -->
    <!-- <view class="service-card">
      <view class="card-header">
        <text class="card-title">服务保障</text>
      </view>
      <view class="service-list">
        <view class="service-item">
          <text class="service-icon">🚚</text>
          <view class="service-info">
            <text class="service-title">配送服务</text>
            <text class="service-desc">全国包邮 · 48小时内发货</text>
          </view>
        </view>
        <view class="service-item">
          <text class="service-icon">🔄</text>
          <view class="service-info">
            <text class="service-title">退换服务</text>
            <text class="service-desc">
              7天无理由退换货 · 质量问题包退
            </text>
          </view>
        </view>
        <view class="service-item">
          <text class="service-icon">🛡️</text>
          <view class="service-info">
            <text class="service-title">品质保障</text>
            <text class="service-desc">官方正品 · 假一赔十</text>
          </view>
        </view>
      </view>
    </view> -->

    <!-- 商品参数表格 -->
    <!-- <view class="params-card">
      <view class="card-header">
        <text class="card-title">商品参数</text>
      </view>
      <view class="params-table">
        <view
          class="param-row"
          v-for="param in goods.parameters"
          :key="param.key"
        >
          <text class="param-key">{{ param.key }}</text>
          <text class="param-value">{{ param.value }}</text>
        </view>
      </view>
    </view> -->

    <!-- 底部装饰 -->
    <view class="bottom-decor">
      <view class="decor-line"></view>
      <text class="end-text"
        >商品详情展示完毕</text
      >
      <view class="decor-line"></view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import './detail.scss';
</style>
