<template>
  <!-- 电话/网上微信投诉事件详情 -->
  <div class="publicContainer">
    <div class="publicDetail">
      <div class="part">
        <p class="title">事件名称：</p>
        <p class="content">{{ detailData.eventName }}</p>
      </div>
      <div class="part">
        <p class="title">事件编号：</p>
        <p class="content">{{ detailData.eventNo }}</p>
      </div>
      <div class="part">
        <p class="title">事件状态：</p>
        <p class="content">
          <dict-tag :options="eventStatusType" :value="detailData.eventStatus" />
        </p>
      </div>
      <div class="part">
        <p class="title">事件类型：</p>
        <p class="content">
          <dict-tag :options="eventTypes" :value="detailData.eventType" />
        </p>
      </div>
      <div class="part">
        <p class="title">事件紧急程度：</p>
        <p class="content"><dict-tag :options="urgencyType" :value="detailData.eventUrgency" /></p>
      </div>

      <div class="part">
        <p class="title">事件发生时间：</p>
        <p class="content">{{ detailData.eventHappenTime || '--' }}</p>
      </div>
      <div class="part" style="width: 100%">
        <p class="title">事件要求：</p>
        <p class="content">{{ detailData.eventRequirement || '--' }}</p>
      </div>
      <div class="part">
        <p class="title">期望完成时间：</p>
        <p class="content">{{ detailData.rpExpectTime || '--' }}</p>
      </div>
      <div class="part">
        <p class="title">实际完成时间：</p>
        <p class="content">{{ detailData.rpEndTime || '--' }}</p>
      </div>
      <div class="part">
        <p class="title">维修类型：</p>
        <p class="content">{{ detailData.rpType == 'minor' ? '小修' : '专项维修' }}</p>
      </div>
      <div class="part">
        <p class="title">事件处理前照片：</p>
        <p class="content">
          <ImagePreview :src="item.url" v-for="item in detailData.scenePhotosFileList" :key="item.id"></ImagePreview>
        </p>
      </div>
      <div class="part">
        <p class="title">维修人员：</p>
        <p class="content">{{ detailData.rpUserName || '--' }}</p>
      </div>
      <div class="part" style="width: 100%">
        <p class="title">维修完成情况说明：</p>
        <p class="content">{{ detailData.rpEndDesc || '--' }}</p>
      </div>
      <el-divider />
      <div class="part" style="width: 100%">
        <p class="title" style="width: 100%">事件处理进度：</p>
        <el-table :data="detailData.eventHistoryList" max-height="300px">
          <el-table-column label="时间" prop="createTime" />
          <el-table-column label="操作人" prop="createUserName" />
          <el-table-column label="事件状态" prop="remark" />
          <!-- <el-table-column label="事件状态" prop="eventStatus">
            <template #default="scope">
              <dict-tag :options="eventStatusType" :value="scope.row.eventStatus" />
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <el-divider />
      <div class="part" style="width: 100%">
        <p class="title" style="width: 100%">历史处理进度：</p>
        <el-table :data="detailData.operateRepairOrderVo.repairOrderHistoryList" max-height="300px">
          <el-table-column label="时间" prop="createTime" />
          <el-table-column label="现场处理描述" prop="rpOrderDesc" />
          <el-table-column label="处置照片" prop="postName">
            <template #default="scope">
              <ImagePreview :src="item.url" v-for="item in scope.row.repairPhotosFileList" :key="item.id"></ImagePreview>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup name="page">
import { eventManageDetail } from '@/api/floodSys/repair';

const { proxy } = getCurrentInstance();
const props = defineProps({
  eventId: {
    type: String,
    default: '',
  },
});
const detailData = ref({
  operateRepairOrderVo: {
    repairOrderHistoryList: [],
  },
});
const eventStatusType = proxy.fixDict['eventStatusType']; //事件处理状态
const urgencyType = proxy.fixDict['urgencyType']; //事件紧急程度
const eventTypes = proxy.fixDict['eventTypes']; //事件类型

// 获取详情数据
function getDataList() {
  proxy.$modal.loading('加载中...');
  eventManageDetail(props.eventId).then(response => {
    detailData.value = response.data;
    proxy.$modal.closeLoading(); //取消loading
  });
}
onMounted(() => {
  getDataList();
});
</script>
<style lang="scss"></style>