<template>
  <el-dialog :title="'预警记录详情'" v-model="dialogVisible" width="700px" append-to-body>
    <el-descriptions :column="2" border label-width="120px">
      <el-descriptions-item label="规则">{{ recordInfo.alertRule?.ruleName || '-' }}</el-descriptions-item>
      <el-descriptions-item label="预警类型">
        <dict-tag :options="alarm_type" :value="recordInfo.alertType" />
      </el-descriptions-item>
      <el-descriptions-item label="物资名称">{{ recordInfo.material?.materialName || '-' }}</el-descriptions-item>
      <el-descriptions-item label="规格型号">{{ recordInfo.material?.specification || '-' }}</el-descriptions-item>
      <el-descriptions-item label="仓库/库区/货架">
        <span v-if="recordInfo.warehouse?.warehouseName || recordInfo.area?.areaName || recordInfo.location?.locationName">
          {{ recordInfo.warehouse?.warehouseName || '-' }}/
          {{ recordInfo.area?.areaName || '-' }}/
          {{ recordInfo.location?.locationName || '-' }}
        </span>
        <span v-else>-</span>
      </el-descriptions-item>
      <el-descriptions-item label="当前值">{{ recordInfo.currentValue }}</el-descriptions-item>
      <el-descriptions-item label="阈值">{{ recordInfo.thresholdValue }}</el-descriptions-item>
        <el-descriptions-item label="预警时间">{{ formatDate(recordInfo.alertTime) }}</el-descriptions-item>
      <el-descriptions-item label="预警级别">
        <dict-tag :options="alert_level" :value="recordInfo.alertLevel" />
      </el-descriptions-item>
      <el-descriptions-item label="预警信息" :span="2">{{ recordInfo.alertMessage }}</el-descriptions-item>
      <el-descriptions-item label="处理状态">
        <dict-tag :options="alert_status" :value="recordInfo.alertStatus" />
      </el-descriptions-item>
      <el-descriptions-item label="处理人">{{ recordInfo.handlerId }}</el-descriptions-item>
      <el-descriptions-item label="处理时间">{{ formatDate(recordInfo.handleTime) }}</el-descriptions-item>
      <el-descriptions-item label="处理结果" :span="2">{{ recordInfo.handleResult }}</el-descriptions-item>
    
    </el-descriptions>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="DetailInfo">
import { parseTime } from '@/utils/ruoyi'

const { proxy } = getCurrentInstance()
const { alert_status, alert_level, alarm_type } = proxy.useDict('alert_status', 'alert_level', 'alarm_type')
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  recordInfo: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:visible'])

const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
})

function cancel() {
  emit('update:visible', false)
}

function formatDate(date) {
  if (!date) return ''
  return parseTime(date, '{y}-{m}-{d} {h}:{i}:{s}')
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}

:deep(.el-descriptions__cell) {
  padding: 12px 16px;
}
</style>