<template>
  <view class="page">
    <view class="hero">
      <text class="title">我的配件提交</text>
      <text class="desc">查看待审核、已通过、已驳回的记录</text>
    </view>

    <view class="tabs">
      <view class="tab" :class="{ active: status === '' }" @click="switchStatus('')">全部</view>
      <view class="tab" :class="{ active: status === 'pending' }" @click="switchStatus('pending')">待审核</view>
      <view class="tab" :class="{ active: status === 'approved' }" @click="switchStatus('approved')">已通过</view>
      <view class="tab" :class="{ active: status === 'rejected' }" @click="switchStatus('rejected')">已驳回</view>
    </view>

    <scroll-view scroll-y class="list" @scrolltolower="loadMore">
      <view v-if="items.length" class="cards">
        <view class="card" v-for="item in items" :key="item.id">
          <view class="card-header">
            <text class="model">{{ item.model || '-' }}</text>
            <text :class="['status', statusClass(item.status)]">{{ statusLabel(item.status) }}</text>
          </view>
          <view class="card-body">
            <text class="name">{{ item.name || '未填写名称' }}</text>
            <text class="brand">品牌：{{ item.brand || '-' }}</text>
            <text class="time">提交：{{ formatTime(item.createdAt) }}</text>
            <text class="time" v-if="item.reviewedAt">审核：{{ formatTime(item.reviewedAt) }}</text>
          </view>
          <view class="card-footer">
            <button size="mini" @click="viewDetail(item.id)">详情</button>
            <button size="mini" type="primary" v-if="item.status === 'pending'" @click="notifyPending">等待审核</button>
            <button size="mini" type="warn" v-else-if="item.status === 'rejected'" @click="resubmit(item)">重新提交</button>
          </view>
        </view>
      </view>
      <view v-else class="empty">
        <text>暂无提交记录，快去提交新的配件吧</text>
        <button size="mini" class="primary" @click="goSubmit">立即提交</button>
      </view>
      <view v-if="loading" class="loading">加载中...</view>
      <view v-else-if="finished && items.length" class="finished">没有更多了</view>
    </scroll-view>

    <view class="fab" @click="goSubmit">＋</view>
  </view>
</template>

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

export default {
  data() {
    return {
      status: '',
      items: [],
      page: 1,
      size: 20,
      total: 0,
      loading: false,
      finished: false,
      cacheUnitsLoaded: false,
      cacheCategoriesLoaded: false
    }
  },
  onShow() {
    this.preloadDictionaries()
    this.reload()
  },
  methods: {
    async preloadDictionaries() {
      try {
        const [units, categories, templates] = await Promise.all([
          this.cacheUnitsLoaded ? Promise.resolve(null) : get('/api/product-units'),
          this.cacheCategoriesLoaded ? Promise.resolve(null) : get('/api/product-categories'),
          get('/api/product-templates')
        ])
        if (units) {
          const list = Array.isArray(units?.list) ? units.list : (Array.isArray(units) ? units : [])
          uni.setStorageSync('CACHE_UNITS', list)
          this.cacheUnitsLoaded = true
        }
        if (categories) {
          const list = Array.isArray(categories?.list) ? categories.list : (Array.isArray(categories) ? categories : [])
          uni.setStorageSync('CACHE_CATEGORIES', list)
          this.cacheCategoriesLoaded = true
        }
        if (templates) {
          const list = Array.isArray(templates?.list) ? templates.list : (Array.isArray(templates) ? templates : [])
          uni.setStorageSync('CACHE_TEMPLATES', list)
        }
      } catch (_) {
        // 忽略缓存失败
      }
    },
    switchStatus(s) {
      if (this.status === s) return
      this.status = s
      this.reload()
    },
    async reload() {
      this.page = 1
      this.items = []
      this.finished = false
      await this.loadMore()
    },
    async loadMore() {
      if (this.loading || this.finished) return
      this.loading = true
      try {
        const params = { page: this.page, size: this.size }
        if (this.status) params.status = this.status
        const res = await get('/api/products/submissions', params)
        const list = Array.isArray(res?.list) ? res.list : []
        this.items = this.items.concat(list)
        this.total = Number(res?.total || this.items.length)
        if (list.length < this.size) this.finished = true
        this.page += 1
      } catch (e) {
        console.warn('加载提交记录失败', e)
        const msg = e?.message || '加载失败'
        uni.showToast({ title: msg, icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    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'
    },
    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 }
    },
    viewDetail(id) {
      uni.navigateTo({ url: `/pages/product/submission-detail?id=${id}` })
    },
    notifyPending() {
      uni.showToast({ title: '审核中，请耐心等待', icon: 'none' })
    },
    resubmit(item) {
      const payload = {
        model: item.model,
        name: item.name,
        brand: item.brand,
        spec: item.spec,
        origin: item.origin,
        unitId: item.unitId,
        categoryId: item.categoryId,
        remark: item.remark
      }
      const query = encodeURIComponent(JSON.stringify(payload))
      uni.navigateTo({ url: `/pages/product/submit?prefill=${query}` })
    },
    goSubmit() {
      uni.navigateTo({ url: '/pages/product/submit' })
    }
  }
}
</script>

<style lang="scss">
.page { display: flex; flex-direction: column; height: 100vh; background: #f6f7fb; padding-bottom: 140rpx; }
.hero { padding: 24rpx; background: #fff; box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.04); }
.title { font-size: 34rpx; font-weight: 700; color: #2d3a4a; }
.desc { font-size: 24rpx; color: #7a8899; margin-top: 8rpx; }
.tabs { display: flex; background: #fff; margin: 16rpx; border-radius: 999rpx; overflow: hidden; box-shadow: inset 0 0 0 1rpx rgba(76,141,255,0.1); }
.tab { flex: 1; text-align: center; padding: 20rpx 0; font-size: 28rpx; color: #7a8899; }
.tab.active { background: linear-gradient(135deg, #4c8dff, #6ab7ff); color: #fff; font-weight: 600; }
.list { flex: 1; padding: 0 20rpx; }
.cards { display: flex; flex-direction: column; gap: 20rpx; padding-bottom: 40rpx; }
.card { background: #fff; border-radius: 18rpx; padding: 22rpx; box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.05); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
.model { font-size: 30rpx; font-weight: 700; color: #2d3a4a; }
.status { font-size: 24rpx; 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; }
.card-body { display: flex; flex-direction: column; gap: 6rpx; color: #4f5969; font-size: 26rpx; }
.name { font-weight: 600; color: #2d3a4a; }
.card-footer { display: flex; gap: 12rpx; margin-top: 16rpx; }
.empty { height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #8894a3; gap: 20rpx; }
.empty .primary { background: #4c8dff; color: #fff; border-radius: 999rpx; padding: 12rpx 30rpx; }
.loading, .finished { text-align: center; padding: 20rpx 0; color: #7a8899; }
.fab { position: fixed; right: 30rpx; bottom: 120rpx; width: 100rpx; height: 100rpx; background: linear-gradient(135deg, #4c8dff, #6ab7ff); color: #fff; border-radius: 50rpx; display: flex; align-items: center; justify-content: center; font-size: 48rpx; box-shadow: 0 20rpx 40rpx rgba(0,0,0,0.2); }
</style>
