<script setup lang="ts">
import { shallowRef } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import {
  Descriptions,
  DescriptionsItem,
  Tag,
  Timeline,
  TimelineItem,
} from 'ant-design-vue';

const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: handleOpenChange,
  onClosed() {
    warningDetail.value = null;
  },
});

const warningDetail = shallowRef<any>(null);

async function handleOpenChange(open: boolean) {
  if (!open) {
    return null;
  }
  modalApi.modalLoading(true);
  const { id, data } = modalApi.getData() as {
    id: number | string;
    data: any[];
  };

  // 从传递的数据中查找对应的记录
  const record = data.find((item: any) => item.id === id);
  if (record) {
    warningDetail.value = record;
  }

  modalApi.modalLoading(false);
}
</script>

<template>
  <BasicModal
    :footer="false"
    :fullscreen-button="false"
    title="预警详情"
    class="w-[70%]"
  >
    <Descriptions
      v-if="warningDetail"
      size="small"
      :column="2"
      bordered
      :labelStyle="{ width: '120px' }"
      style="margin-bottom: 30px"
    >
      <DescriptionsItem label="预警编号">
        {{ warningDetail.alarmId }}
      </DescriptionsItem>
      <DescriptionsItem label="预警时间">
        {{ warningDetail.alarmTime }}
      </DescriptionsItem>
      <DescriptionsItem label="级别">
        <Tag
          :color="
            warningDetail.level === '特大'
              ? 'red'
              : warningDetail.level === '重要'
                ? 'orange'
                : 'blue'
          "
        >
          {{ warningDetail.level }}
        </Tag>
      </DescriptionsItem>
      <DescriptionsItem label="预警类型">
        {{ warningDetail.alarmType }}
      </DescriptionsItem>
      <DescriptionsItem label="描述" :span="2">
        {{ warningDetail.description }}
      </DescriptionsItem>
      <DescriptionsItem label="所在位置">
        {{ warningDetail.location }}
      </DescriptionsItem>
      <DescriptionsItem label="处理状态">
        <Tag
          :color="
            warningDetail.processingStatus === '待分配'
              ? 'red'
              : warningDetail.processingStatus === '处理中'
                ? 'orange'
                : 'green'
          "
        >
          {{ warningDetail.processingStatus }}
        </Tag>
      </DescriptionsItem>
      <DescriptionsItem label="处理情况" :span="2">
        {{ warningDetail.processingDetails || '-' }}
      </DescriptionsItem>
      <DescriptionsItem label="处理时间">
        {{ warningDetail.processingTime || '-' }}
      </DescriptionsItem>
      <DescriptionsItem label="设备名称">
        {{ warningDetail.deviceName || '-' }}
      </DescriptionsItem>
      <DescriptionsItem
        label="预处理时间"
        v-if="warningDetail.processingStatus === '处理中'"
      >
        {{ warningDetail.expectedProcessingTime || '-' }}
      </DescriptionsItem>
      <DescriptionsItem
        label="处理图片"
        v-if="warningDetail.processingStatus === '已完成'"
      >
        <img
          :src="warningDetail.imgUrl"
          alt="处理图片"
          style="max-width: 200px; max-height: 150px"
        />
      </DescriptionsItem>
    </Descriptions>
    <Timeline>
      <TimelineItem>
        <p style="display: flex">类型：已完成</p>
        <p>时间：2025-06-01 11:07:59</p>
        <p>处理人：张三</p>
      </TimelineItem>
      <TimelineItem>
        <p style="display: flex">类型：处理异常</p>
        <p>时间：2025-06-01 11:07:59</p>
        <p>处理人：张三</p>
        <p>异常原因：时长不够</p>
      </TimelineItem>
      <TimelineItem>
        <p style="display: flex">类型：处理中</p>
        <p>时间：2025-06-01 11:07:59</p>
        <p>处理人：张三</p>
      </TimelineItem>
      <TimelineItem>
        <p style="display: flex">类型：创建预警</p>
        <p>时间：2025-06-01 11:07:59</p>
        <p>处理人：张三</p>
      </TimelineItem>
    </Timeline>
  </BasicModal>
</template>
