<script setup lang="ts">
import type {ContingenPlanVO} from '#/api/property/customerService/contingenPlan/model';
import {shallowRef} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {
  Descriptions,
  DescriptionsItem,
  Divider,
  Rate,
  Timeline,
  TimelineItem
} from 'ant-design-vue';
import {contingenPlanInfo} from '#/api/property/customerService/contingenPlan';
import {renderDict} from "#/utils/render";

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

const contingenPlanIDetail = shallowRef<null | ContingenPlanVO>(null);
const handleRecords = shallowRef<null | ContingenPlanVO>(null);
async function handleOpenChange(open: boolean) {
  if (!open) {
    return null;
  }
  modalApi.modalLoading(true);
  const {id} = modalApi.getData() as { id: number | string };
  const response = await contingenPlanInfo(id);
  contingenPlanIDetail.value = response;
  handleRecords.value = response.contingenPlanRecordVos.map(item => ({
    status: item.status,
    createTime: item.createTime,
    handlerName: item.dutyPersionName
  }));
  console.log(handleRecords.value)
  modalApi.modalLoading(false);
}
</script>

<template>
  <BasicModal :footer="false" :fullscreen-button="false" title="详情" class="w-[70%]">
    <Descriptions v-if="contingenPlanIDetail" size="small" :column="2" bordered :labelStyle="{width:'120px'}">
      <DescriptionsItem label="预案名称">
        {{ contingenPlanIDetail.contingenPlanName }}
      </DescriptionsItem>
      <DescriptionsItem label="创建时间">
        {{ contingenPlanIDetail.createTime }}
      </DescriptionsItem>
      <DescriptionsItem label="预案类型" v-if="contingenPlanIDetail.contingenPlanType!=null">
        <component
          :is="renderDict(contingenPlanIDetail.contingenPlanType,'type_contingency_plan')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="最后更新时间">
        {{ contingenPlanIDetail.updateTime }}
      </DescriptionsItem>
      <DescriptionsItem label="演练状态" v-if="contingenPlanIDetail.status!=null">
        <component
          :is="renderDict(contingenPlanIDetail.status,'pro_exercise_status')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="完成时间">
        {{ contingenPlanIDetail.compleTimes }}
      </DescriptionsItem>
      <DescriptionsItem label="发起人">
        {{ contingenPlanIDetail.initiatName }}
      </DescriptionsItem>
      <DescriptionsItem label="责任人">
        {{ contingenPlanIDetail.dutyPersionName}}
      </DescriptionsItem>
      <DescriptionsItem label="预案内容" :span="2">
        <div v-html="contingenPlanIDetail.contingenPlanContent"></div>
      </DescriptionsItem>
      <DescriptionsItem label="风险等级">
        <Rate :value="contingenPlanIDetail.grade" disabled />
      </DescriptionsItem>
    </Descriptions>

    <Divider orientation="left" orientation-margin="0px">
      处理记录
    </Divider>
    <Timeline>
      <TimelineItem v-for="(item,index) in handleRecords" :key="index">
        <p style="display: flex;">类型：
          <component
            :is="renderDict(item.status,'pro_exercise_status')"
          /></p>
        <p>时间：{{item.createTime}}</p>
        <p>处理人：{{item.handlerName}}</p>
      </TimelineItem>
    </Timeline>
  </BasicModal>
</template>
