<template>
  <view class="detail-page">
    <uni-section class="mb-10" title="打卡详情" type="line"></uni-section>

    <uni-card isShadow>
      <view class="detail-row">
        <text class="label">巡检点：</text>
        <text class="value">{{ detail.inspectionPoint || '-' }}</text>
      </view>
      <view class="detail-row">
        <text class="label">巡检人：</text>
        <text class="value">{{ detail.inspectorUser || detail.inspectorName || '-' }}</text>
      </view>
      <view class="detail-row">
        <text class="label">打卡时间：</text>
        <text class="value">{{ formatDate(detail.inspectionTime) }}</text>
      </view>
      <view class="detail-row" v-if="detail.remark">
        <text class="label">备注：</text>
        <text class="value">{{ detail.remark }}</text>
      </view>

      <view v-if="images.length" class="img-group">
        <image v-for="(img, idx) in images" :key="idx" :src="imageUrl(img)" mode="aspectFill" class="img" @click="previewImage(idx)" />
      </view>
    </uni-card>
  </view>
</template>

<script>
import { getRecord } from '@/api/inspection/record.js'
import config from '@/config'
export default {
  data() {
    return {
      id: null,
      detail: {},
      images: []
    }
  },
  onLoad(query) {
    this.id = query.id
    this.fetchDetail()
  },
  methods: {
    async fetchDetail() {
      if (!this.id) {
        uni.showToast({ title: '缺少记录ID', icon: 'none' })
        return
      }
      try {
        const res = await getRecord(this.id)
        this.detail = (res && res.data) ? res.data : {}
        this.images = this.resolveImages(this.detail.inspectionImg || this.detail.clockInImg || this.detail.signImg)
      } catch (e) {
        console.error('fetch record detail error', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      }
    },
    resolveImages(imgs) {
      if (!imgs) return []
      if (Array.isArray(imgs)) return imgs
      if (typeof imgs === 'string') return imgs.split(',').filter(Boolean)
      return []
    },
    imageUrl(path) {
      if (!path) return ''
      if (/^https?:\/\//.test(path)) return path
      return `${config.baseUrl}${path.startsWith('/') ? path : '/' + path}`
    },
    previewImage(index = 0) {
      if (!this.images.length) return
      uni.previewImage({
        current: index,
        urls: this.images.map(this.imageUrl)
      })
    },
    formatDate(dateStr) {
      if (!dateStr) return '-'
      const d = new Date(dateStr)
      if (isNaN(d.getTime())) return dateStr
      const pad = n => (n < 10 ? ('0' + n) : n)
      return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
    }
  }
}
</script>

<style scoped>
.detail-page { padding: 10px; }
.detail-row { display: flex; margin-bottom: 8px; }
.label { color: #666; width: 80px; }
.value { color: #333; }
.img-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.img { width: 100px; height: 100px; border-radius: 6px; background: #f5f5f5; }
</style>