<script lang="ts" setup>
// @ts-ignore

import { computed } from 'vue';

import {
  ElCard,
  ElDescriptions,
  ElDescriptionsItem,
  ElImage,
} from 'element-plus';

// 定义组件的Props接口
interface EmergencyProps {
  taskDetail: any;
}

// 接收父组件传递的任务详情数据
const props = defineProps<EmergencyProps>();

// 计算属性，获取应急演练数据
const emergencyData = computed(() => {
  return props.taskDetail || {};
});

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-';
  return new Date(dateTime).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });
};
</script>

<template>
  <ElCard>
    <template #header>
      <div class="flex items-center gap-4">
        <div style="width: 4px; height: 12px; background-color: #215acd"></div>
        <span
          class="text-lg font-bold text-gray-800"
          style="font-size: 14px; font-weight: 600"
        >
          应急演练详情
        </span>
      </div>
    </template>

    <div class="task-info">
      <!-- 基本信息 -->
      <div class="section-title">
        <div class="section-bar"></div>
        <span class="section-text">基本信息</span>
      </div>
      <ElDescriptions :column="4" class="mb-6">
        <ElDescriptionsItem label="应急演练名称:">
          {{ emergencyData.drillName || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="演练时间:">
          {{ formatDateTime(emergencyData.drillTime) }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="组织部门:">
          {{ emergencyData.organizationDepartment || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="参加人数:">
          {{ emergencyData.participantsCount || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="总人数:">
          {{ emergencyData.totalCount || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="演练地点/装置:">
          {{ emergencyData.drillLocation || '-' }}
        </ElDescriptionsItem>
      </ElDescriptions>

      <!-- 演练方案 -->
      <div class="section-title">
        <div class="section-bar"></div>
        <span class="section-text">演练方案</span>
      </div>
      <ElDescriptions :column="4" class="mb-6">
        <ElDescriptionsItem label="演练目的:" :span="4">
          {{ emergencyData.drillPurpose || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="事件/事故现场假定:" :span="4">
          {{ emergencyData.accidentAssumption || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="演练方案简述:" :span="4">
          {{ emergencyData.drillPlanSummary || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="物资准备:" :span="4">
          {{ emergencyData.materialPreparation || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="演练注意事项及要求:" :span="4">
          {{ emergencyData.precautions || '-' }}
        </ElDescriptionsItem>
      </ElDescriptions>

      <!-- 演练报告 -->
      <div class="section-title">
        <div class="section-bar"></div>
        <span class="section-text">演练报告</span>
      </div>
      <ElDescriptions :column="4" class="mb-6">
        <ElDescriptionsItem label="演练评估:">
          {{ emergencyData.drillEvaluation || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="简述演练的主要内容:" :span="4">
          {{ emergencyData.mainContent || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="演练过程存在的问题:" :span="4">
          {{ emergencyData.existingProblems || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="针对问题的改进措施:" :span="4">
          {{ emergencyData.improvementMeasures || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="经理点评:" :span="4">
          {{ emergencyData.managerComment || '-' }}
        </ElDescriptionsItem>
      </ElDescriptions>

      <!-- 演练图片 -->
      <div class="section-title">
        <div class="section-bar"></div>
        <span class="section-text">演练图片</span>
      </div>
      <ElDescriptions :column="4" class="mb-6">
        <ElDescriptionsItem
          v-if="emergencyData.imagesUrl && emergencyData.imagesUrl.length > 0"
          label="演练现场图片:"
          :span="4"
        >
          <div class="task-images">
            <ElImage
              v-for="(image, index) in emergencyData.imagesUrl"
              :key="index"
              :src="image"
              :preview-src-list="emergencyData.imagesUrl"
              fit="cover"
              alt="演练照片"
              class="task-image"
            />
          </div>
        </ElDescriptionsItem>
        <ElDescriptionsItem v-else label="演练现场图片:" :span="4">
          -
        </ElDescriptionsItem>
      </ElDescriptions>
    </div>
  </ElCard>
</template>

<style scoped lang="scss">
.task-info {
  .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 12px 0;

    .section-bar {
      width: 4px;
      height: 12px;
      background-color: #215acd;
    }

    .section-text {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-color-primary);
    }
  }

  :deep(.el-descriptions) {
    margin-bottom: 0 !important;
  }

  :deep(.el-descriptions__label) {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color-secondary);
  }

  :deep(.el-descriptions__content) {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-primary);
  }

  :deep(.el-descriptions__table) {
    background: transparent !important;
  }
}

.task-images {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;

  .task-image {
    width: 80px;
    height: 80px;
    cursor: pointer;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.2s;
  }
}
</style>
