<template>
  <view class="container">
    <uni-section title="异常详情" type="line" class="mb-10" />

    <uni-card :title="detail.inspectionPoint" :is-shadow="true" @click="onCardClick">
      <uni-row class="row" :width="730">
        <uni-col :span="16">
          <view>
            <text class="uni-body">巡检类型：{{ typeLabel(detail.inspectionType) }}</text>
          </view>
          <view>
            <text class="uni-body">巡检人：{{ detail.inspectorId }}</text>
          </view>
          <view>
            <text class="uni-body">巡检时间：{{ formatDate(detail.inspectionTime) }}</text>
          </view>
          <view>
            <text class="uni-body">备注：{{ detail.remark || '-' }}</text>
          </view>
        </uni-col>
        <uni-col :span="8">
          <view class="thumbs">
            <image v-for="(img,idx) in imageArray(detail.inspectionImg)" :key="idx" :src="imageUrl(img)" mode="aspectFill" class="thumb" @click.stop="preview(img, detail.inspectionImg)" />
          </view>
        </uni-col>
      </uni-row>
    </uni-card>
  </view>
</template>

<script>
import { getAbnormal } from '@/api/inspection/abnormal.js'
import { listData } from '@/api/system/dict/data.js'
import config from '@/config'

export default {
  data() {
    return {
      id: null,
      detail: {},
      typeDict: [],
    }
  },
  async onLoad(options) {
    this.id = options?.id || null
    await this.initDict()
    if (this.id) {
      await this.fetchDetail()
    }
  },
  methods: {
    async initDict() {
      const typeData = await listData({ dictType: 'inspection_type' })
      this.typeDict = typeData.rows || []
    },
    typeLabel(val) {
      const item = this.typeDict.find(i => String(i.dictValue) === String(val))
      return item ? item.dictLabel : (val ?? '-')
    },
    async fetchDetail() {
      const res = await getAbnormal(this.id)
      this.detail = res?.data || {}
    },
    imageArray(inspectionImg) {
      if (!inspectionImg) return []
      return inspectionImg.split(',').filter(Boolean)
    },
    imageUrl(path) {
      if (!path) return ''
      return config.baseUrl + path
    },
    preview(current, all) {
      const urls = this.imageArray(all).map(p => this.imageUrl(p))
      uni.previewImage({ current: this.imageUrl(current), urls })
    },
    formatDate(val) {
      if (!val) return ''
      try {
        const d = new Date(val)
        const y = d.getFullYear()
        const m = String(d.getMonth()+1).padStart(2,'0')
        const dd = String(d.getDate()).padStart(2,'0')
        const hh = String(d.getHours()).padStart(2,'0')
        const mm = String(d.getMinutes()).padStart(2,'0')
        const ss = String(d.getSeconds()).padStart(2,'0')
        return `${y}-${m}-${dd} ${hh}:${mm}:${ss}`
      } catch(e) { return val }
    },
    onCardClick(type) {
      // 可按需处理卡片各区域点击，目前不做特殊逻辑
    }
  }
}
</script>

<style lang="scss">
.container { padding: 10px; }
.thumbs { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.thumb { width: 60px; height: 60px; border-radius: 6px; background: #f5f5f5; }
.mb-10 { margin-bottom: 10px; }
</style>