<template>
  <scroll-view scroll-y class="page" v-if="detail">
    <view class="header">
      <text class="model">{{ detail.model }}</text>
      <text :class="['status', statusClass(detail.status)]">{{ statusLabel(detail.status) }}</text>
    </view>

    <view class="section">
      <view class="row"><text class="label">名称</text><text class="value">{{ detail.name || '-' }}</text></view>
      <view class="row"><text class="label">品牌</text><text class="value">{{ detail.brand || '-' }}</text></view>
      <view class="row"><text class="label">规格</text><text class="value">{{ detail.spec || '-' }}</text></view>
      <view class="row"><text class="label">产地</text><text class="value">{{ detail.origin || '-' }}</text></view>
      <view class="row"><text class="label">条码</text><text class="value">{{ detail.barcode || '-' }}</text></view>
      <view class="row"><text class="label">单位</text><text class="value">{{ unitName }}</text></view>
      <view class="row"><text class="label">类别</text><text class="value">{{ categoryName }}</text></view>
      <view class="row"><text class="label">安全库存</text><text class="value">{{ stockRange }}</text></view>
    </view>

    <view class="section">
      <view class="block-title">参数</view>
      <view v-if="parameterPairs.length" class="params">
        <view class="param" v-for="item in parameterPairs" :key="item.key">
          <text class="param-key">{{ item.key }}</text>
          <text class="param-val">{{ item.value }}</text>
        </view>
      </view>
      <view v-else class="placeholder">未填写参数</view>
    </view>

    <view class="section">
      <view class="block-title">图片</view>
      <view v-if="detail.images && detail.images.length" class="images">
        <image v-for="(img, idx) in detail.images" :key="idx" :src="img" class="image" mode="aspectFill" @click="preview(idx)" />
      </view>
      <view v-else class="placeholder">未上传图片</view>
    </view>

    <view class="section">
      <view class="block-title">备注</view>
      <view class="placeholder">{{ detail.remark || '无' }}</view>
    </view>

    <view class="section">
      <view class="row"><text class="label">提交时间</text><text class="value">{{ formatTime(detail.createdAt) }}</text></view>
      <view class="row"><text class="label">审核时间</text><text class="value">{{ formatTime(detail.reviewedAt) }}</text></view>
      <view class="row" v-if="detail.reviewRemark"><text class="label">审核说明</text><text class="value">{{ detail.reviewRemark }}</text></view>
    </view>

    <view class="footer">
      <button size="mini" @click="back">返回</button>
      <button size="mini" type="warn" v-if="detail.status === 'rejected'" @click="resubmit">重新提交</button>
    </view>
  </scroll-view>
  <view v-else class="loading">加载中...</view>
</template>

<script>
import { get } from '../../common/http.js'

export default {
  data() {
    return {
      id: '',
      detail: null,
      unitName: '-',
      categoryName: '-'
    }
  },
  async onLoad(query) {
    this.id = query?.id || ''
    if (!this.id) {
      uni.showToast({ title: '参数缺失', icon: 'none' })
      return
    }
    await this.loadDetail()
  },
  methods: {
    async loadDetail() {
      try {
        const data = await get(`/api/products/submissions/${this.id}`)
        this.detail = data
        this.unitName = this.unitLookup(data.unitId)
        this.categoryName = this.categoryLookup(data.categoryId)
      } catch (e) {
        const msg = e?.message || '加载失败'
        uni.showToast({ title: msg, icon: 'none' })
      }
    },
    statusLabel(s) {
      if (s === 'approved') return '已通过'
      if (s === 'rejected') return '已驳回'
      return '待审核'
    },
    statusClass(s) {
      if (s === 'approved') return 'approved'
      if (s === 'rejected') return 'rejected'
      return 'pending'
    },
    parameterPairs() {
      const params = this.detail?.parameters
      if (!params || typeof params !== 'object') return []
      return Object.keys(params).map(k => ({ key: k, value: params[k] }))
    },
    preview(idx) {
      if (!this.detail?.images || !this.detail.images.length) return
      uni.previewImage({ urls: this.detail.images, current: idx })
    },
    formatTime(value) {
      if (!value) return '-'
      try {
        const d = new Date(value)
        if (!Number.isFinite(d.getTime())) return value
        const y = d.getFullYear()
        const m = String(d.getMonth() + 1).padStart(2, '0')
        const day = String(d.getDate()).padStart(2, '0')
        const hh = String(d.getHours()).padStart(2, '0')
        const mm = String(d.getMinutes()).padStart(2, '0')
        return `${y}-${m}-${day} ${hh}:${mm}`
      } catch (_) { return value }
    },
    unitLookup(id) {
      try {
        const list = uni.getStorageSync('CACHE_UNITS') || []
        const found = list.find(x => String(x.id) === String(id))
        return found ? found.name : '-'
      } catch (_) { return '-' }
    },
    categoryLookup(id) {
      try {
        const list = uni.getStorageSync('CACHE_CATEGORIES') || []
        const found = list.find(x => String(x.id) === String(id))
        return found ? found.name : '-'
      } catch (_) { return '-' }
    },
    back() {
      uni.navigateBack({ delta: 1 })
    },
    resubmit() {
      const payload = {
        model: this.detail.model,
        name: this.detail.name,
        brand: this.detail.brand,
        spec: this.detail.spec,
        origin: this.detail.origin,
        unitId: this.detail.unitId,
        categoryId: this.detail.categoryId,
        remark: this.detail.remark,
        barcode: this.detail.barcode,
        parameters: this.detail.parameters
      }
      const query = encodeURIComponent(JSON.stringify(payload))
      uni.navigateTo({ url: `/pages/product/submit?prefill=${query}` })
    }
  },
  computed: {
    stockRange() {
      const min = this.detail?.safeMin
      const max = this.detail?.safeMax
      if (min == null && max == null) return '-'
      if (min != null && max != null) return `${min} ~ ${max}`
      if (min != null) return `≥ ${min}`
      return `≤ ${max}`
    }
  }
}
</script>

<style lang="scss">
.page { padding: 24rpx 24rpx 160rpx; background: #f6f7fb; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; }
.model { font-size: 36rpx; font-weight: 700; color: #2d3a4a; }
.status { font-size: 26rpx; padding: 6rpx 18rpx; border-radius: 999rpx; }
.status.pending { background: rgba(246, 190, 0, 0.15); color: #c47f00; }
.status.approved { background: rgba(103,194,58,0.15); color: #409eff; }
.status.rejected { background: rgba(255,87,115,0.18); color: #f56c6c; }
.section { background: #fff; border-radius: 16rpx; padding: 20rpx 22rpx; margin-bottom: 24rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.04); }
.row { display: flex; justify-content: space-between; padding: 12rpx 0; border-bottom: 1rpx solid #f1f2f5; }
.row:last-child { border-bottom: none; }
.label { width: 160rpx; font-size: 26rpx; color: #7a8899; }
.value { flex: 1; text-align: right; font-size: 26rpx; color: #2d3a4a; word-break: break-all; }
.block-title { font-size: 28rpx; font-weight: 600; color: #2d3a4a; margin-bottom: 12rpx; }
.placeholder { font-size: 26rpx; color: #7a8899; }
.params { display: flex; flex-direction: column; gap: 12rpx; }
.param { display: flex; justify-content: space-between; font-size: 26rpx; color: #2d3a4a; }
.param-key { color: #7a8899; }
.images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12rpx; }
.image { width: 100%; height: 200rpx; border-radius: 16rpx; background: #f0f2f5; }
.footer { display: flex; justify-content: flex-end; gap: 20rpx; }
.loading { height: 100vh; display: flex; align-items: center; justify-content: center; color: #7a8899; }
</style>
