<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

// @ts-ignore
import { Page } from '@vben/common-ui';

// @ts-ignore
import AttachmentViewer from '#/components/AttachmentViewer.vue';

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

// @ts-ignore
import { getTaskEventReportDetail } from '#/api/archive/HSSE/HSSE.ts';


import { DictEnum } from '@vben/constants';

import { DictTag } from '#/components/dict/index';
import { getDictOptions } from '#/utils/dict';
import type { DictOption } from '#/store/dict';

// 事件报告详情数据
const eventReport: any = ref({});

const jobGroupRef = ref<DictOption[]>([]);

// 图片预览相关
const images: string[] = ref([]);
const imageViewerVisible: boolean = ref(false);
const currentImageIndex: number = ref(0);

const route = useRoute();
const eventId = ref(Number(route.params.id));

// 格式化事件等级
const formatEventLevel = (level: number) => {
  const levelMap = {
    0: '轻微',
    1: '中等',
    2: '重大',
  };
  return levelMap[level] || level;
};

// 格式化环节
const formatProcessStage = (stage: number) => {
  const stageMap = {
    0: '事件填报',
    1: '事件审查',
    2: '已完成',
    3: '事件裁定',
  };
  return stageMap[stage] || stage;
};

// 格式化政府机构参与
const formatGovernmentInvolvement = (value: number) => {
  return value === 1 ? '是' : '否';
};

// 初始化数据
const init = async () => {
  try {
    const res: any = await getTaskEventReportDetail(eventId.value);
    eventReport.value = res || {};
    
    // 处理图片数据
    if (res?.images) {
      images.value = res.images.split(',').filter((img: string) => img);
    }
  } catch (error) {
    console.error('获取事件报告详情失败:', error);
  }
};

// 打开图片预览
const openImageViewer = (index: number) => {
  currentImageIndex.value = index;
  imageViewerVisible.value = true;
};

onMounted(async () => {
  jobGroupRef.value = await getDictOptions('event_type');
  await init();
});
</script>

<template>
  <Page title="事件报告详情" :auto-content-height="true">
    <div class="boxdev">
      <div class="min-w-0 flex-1">
        <!-- 基本信息卡片 -->
        <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>
          <ElDescriptions class="event-info" :column="4">
            <ElDescriptionsItem label="场站:">
              {{ eventReport.stationName || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="事件等级:">
              {{ formatEventLevel(eventReport.eventLevel) || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="事件名称:">
              {{ eventReport.eventName || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="发生时间:">
              {{ eventReport.occurrenceTime || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="发生地点:">
              {{ eventReport.occurrenceLocation || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="政府机构/媒体是否已参与:">
              {{ formatGovernmentInvolvement(eventReport.governmentMediaInvolvement) || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="事件类型:">
              <!-- {{ eventReport.eventType || '-' }} -->
                <DictTag :value="eventReport.eventType" :dicts="jobGroupRef" />
            </ElDescriptionsItem>
          </ElDescriptions>
        </ElCard>

        <!-- 车辆信息卡片 -->
        <ElCard class="mt-4">
          <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>
          <ElDescriptions class="event-info" :column="4">
            <ElDescriptionsItem label="车辆品牌.车型:">
              {{ eventReport.vehicleInfo || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="车牌号:">
              {{ eventReport.licensePlateNumber || '-' }}
            </ElDescriptionsItem>
          </ElDescriptions>
        </ElCard>

        <!-- 现场信息卡片 -->
        <ElCard class="mt-4">
          <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>
          <ElDescriptions class="event-info" :column="4">
            <ElDescriptionsItem label="现场天气情况:">
              {{ eventReport.weatherCondition || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="单位/部门:">
              {{ eventReport.department || '-' }}
            </ElDescriptionsItem>
          </ElDescriptions>
        </ElCard>

        <!-- 人员信息卡片 -->
        <ElCard class="mt-4">
          <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>
          <ElDescriptions class="event-info" :column="4">
            <ElDescriptionsItem label="当事员工:">
              {{ eventReport.involvedEmployee || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="性别:">
              {{ eventReport.gender || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="入职时间:">
              {{ eventReport.hireDate || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="岗位:">
              {{ eventReport.post || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="营业主管/当班经理:">
              {{ eventReport.manager || '-' }}
            </ElDescriptionsItem>
          </ElDescriptions>
        </ElCard>

        <!-- 事件详情卡片 -->
        <ElCard class="mt-4">
          <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>
          <ElDescriptions class="event-info" :column="1">
            <ElDescriptionsItem label="事件简述及造成的后果:">
              {{ eventReport.eventDescription || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="事件原因:">
              {{ eventReport.eventCause || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="已采取的措施及目前情况:">
              {{ eventReport.measuresTaken || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="建议的改善措施:">
              {{ eventReport.improvementSuggestions || '-' }}
            </ElDescriptionsItem>
          </ElDescriptions>
        </ElCard>

        <!-- 其他信息卡片 -->
        <ElCard class="mt-4">
          <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>
          <ElDescriptions class="event-info" :column="4">
            <ElDescriptionsItem label="是否提交:">
              {{ eventReport.isSubmitted ? '是' : '否' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="环节:">
              {{ formatProcessStage(eventReport.processStage) || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="扣分:">
              {{ eventReport.deductionScore || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="备注:">
              {{ eventReport.remarks || '-' }}
            </ElDescriptionsItem>
          </ElDescriptions>
        </ElCard>

        <!-- 图片信息卡片 -->
        <ElCard class="mt-4" v-if="eventReport?.imagesUrl?.length > 0">
          <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="image-list">
            <AttachmentViewer :files="eventReport.imagesUrl" />
          </div>
        </ElCard>
      </div>
    </div>
  </Page>
</template>

<style scoped lang="scss">
.boxdev {
  display: flex;
  gap: 20px;
}

.boxdev :deep(.el-card) {
  border: none !important;
  box-shadow: none !important;
}

.boxdev :deep(.el-card__header) {
  padding-top: 18px !important;
  padding-bottom: 4px !important;
  padding-left: 0px !important;
  border-bottom: none !important;
}

.boxdev :deep(.el-card__body) {
  padding-top: 16px !important;
}

::v-deep .el-descriptions__body {
  background: #ffffff00 !important;
}

.boxdev > div:nth-child(1) {
  flex: 1;
  min-width: 0;
}

.event-info {
  :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;
  }
}

.mt-4 {
  margin-top: 16px;
}

.image-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.image-item {
  width: 120px;
  height: 120px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}
</style>
