<template>
  <el-drawer v-model="visible" title="预警详情" size="720px" append-to-body>
    <template v-if="row">
      <div class="detail-hero">
        <div class="detail-kicker">WARNING EVENT</div>
        <div class="detail-title">{{ detail.warningName }}</div>
        <div class="detail-meta">
          <el-tag :type="levelTag">{{ detail.warningLevel }}</el-tag>
          <el-tag :type="statusTag" effect="plain">{{ detail.status }}</el-tag>
          <span>{{ detail.warningNo || detail.warningId || '暂无编号' }}</span>
        </div>
      </div>

      <el-descriptions :column="2" border class="detail-descriptions">
        <el-descriptions-item label="预警类型">{{ detail.warningType }}</el-descriptions-item>
        <el-descriptions-item label="预警专项">{{ detail.warningSpecial }}</el-descriptions-item>
        <el-descriptions-item label="预警位置" :span="2">{{ detail.location }}</el-descriptions-item>
        <el-descriptions-item label="权属单位">{{ detail.ownershipUnit }}</el-descriptions-item>
        <el-descriptions-item label="发布人">{{ detail.publisher }}</el-descriptions-item>
        <el-descriptions-item label="发布时间">{{ detail.publishTime }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detail.createTime }}</el-descriptions-item>
      </el-descriptions>

      <section class="content-block">
        <div class="block-title">预警描述</div>
        <p>{{ detail.warningContent }}</p>
      </section>

      <section v-if="detail.todoInfo" class="content-block todo-block">
        <div class="block-title">待办信息</div>
        <el-descriptions :column="2" size="small">
          <el-descriptions-item label="处置人">{{ detail.todoInfo.userName || detail.todoInfo.user_name || '未分配' }}</el-descriptions-item>
          <el-descriptions-item label="任务类型">{{ detail.todoInfo.taskName || detail.todoInfo.task_name || detail.todoInfo.todoType || '预警处置' }}</el-descriptions-item>
          <el-descriptions-item label="待办时间">{{ formatDashboardTime(detail.todoInfo.createTime || detail.todoInfo.create_time, '未设置') }}</el-descriptions-item>
        </el-descriptions>
      </section>
    </template>
    <el-empty v-else description="暂无预警详情" />
  </el-drawer>
</template>

<script setup>
import { computed } from 'vue'
import { detailView, formatDashboardTime, warningLevelTag, warningStatusTag } from './dashboardShared'

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  row: { type: Object, default: null }
})
const emit = defineEmits(['update:modelValue'])
const visible = computed({
  get: () => props.modelValue,
  set: value => emit('update:modelValue', value)
})
const detail = computed(() => detailView(props.row || {}))
const levelTag = computed(() => warningLevelTag(props.row || {}))
const statusTag = computed(() => warningStatusTag(props.row || {}))
</script>

<style scoped lang="scss">
.detail-hero { padding: 4px 0 20px; border-bottom: 1px solid #e8eef5; margin-bottom: 20px; }
.detail-kicker { color: #2563eb; font-size: 11px; letter-spacing: 2px; font-weight: 700; }
.detail-title { margin: 8px 0 12px; font-size: 23px; font-weight: 700; color: #172b4d; line-height: 1.35; }
.detail-meta { display: flex; align-items: center; gap: 8px; color: #7b8ba5; font-size: 12px; }
.detail-descriptions { margin-bottom: 22px; }
.content-block { padding: 16px; margin-top: 16px; border: 1px solid #e8eef5; border-radius: 8px; background: #f8fafc; }
.block-title { margin-bottom: 8px; font-weight: 650; color: #334155; }
.content-block p { margin: 0; color: #52637a; line-height: 1.7; white-space: pre-wrap; }
.todo-block { background: #fff8ed; border-color: #fde4b3; }
</style>
