<template>
  <el-dialog
    v-model="visible"
    title="巡查记录详情"
    width="500px"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-descriptions border :column="1">
      <el-descriptions-item label="巡查时间">{{ record.time }}</el-descriptions-item>
      <el-descriptions-item label="巡更点">{{ record.pointName }}</el-descriptions-item>
      <el-descriptions-item label="巡查人员">{{ record.staffName }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="getStatusType(record.status)">{{ getStatusLabel(record.status) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="打卡定位">
        <span v-if="record.location">
          <vab-icon icon="map-pin-line" /> {{ record.location }}
        </span>
        <span v-else>-</span>
      </el-descriptions-item>
      <el-descriptions-item label="巡查说明">{{ record.remark || '无' }}</el-descriptions-item>
      <el-descriptions-item label="现场照片">
        <el-image 
          v-if="record.image"
          style="width: 100px; height: 100px; border-radius: 4px"
          :src="record.image" 
          :preview-src-list="[record.image]"
          fit="cover"
        />
        <span v-else>-</span>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const record = ref({})

const getStatusLabel = (status) => {
  const map = { normal: '正常', abnormal: '异常', missed: '漏巡' }
  return map[status]
}
const getStatusType = (status) => {
  const map = { normal: 'success', abnormal: 'danger', missed: 'warning' }
  return map[status]
}

const open = (row) => {
  record.value = row
  visible.value = true
}

defineExpose({
  open
})
</script>
