<template>
  <!-- 维修管理 维修工单详情 -->
  <div class="publicContainer">
    <div class="publicDetail">
      <div class="part">
        <p class="title">工单描述：</p>
        <p class="content">{{ detailData.rpOrderDesc }}</p>
      </div>
      <div class="part">
        <p class="title">维修状态：</p>
        <p class="content"><dict-tag :options="statusType" :value="detailData.rpStatus" /></p>
      </div>
      <div class="part">
        <p class="title">工单类型：</p>
        <p class="content"><dict-tag :options="orderType" :value="detailData.rpOrderType" /></p>
      </div>
      <div class="part">
        <p class="title">维修开始时间：</p>
        <p class="content">{{ detailData.rpStartTime || '--' }}</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.rpCost || '--' }}</p>
      </div>
      <div class="part">
        <p class="title">工程整治措施：</p>
        <p class="content">{{ detailData.rpMeasures || '--' }}</p>
      </div>
      <div class="part">
        <p class="title">问题照片：</p>
        <p class="content">
          <ImagePreview :src="item.url" v-for="item in detailData.problemFileList" :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.rpRequire || '--' }}</p>
      </div>
      <div class="part" style="width: 100%">
        <p class="title">维修完成情况：</p>
        <p class="content">{{ detailData.rpEndDesc || '--' }}</p>
      </div>
      <div class="part">
        <p class="title">审核意见：</p>
        <p class="content">{{ detailData.emAppraise || '--' }}</p>
      </div>
      <el-divider />
      <div class="part" style="width: 100%">
        <p class="title" style="width: 100%">历史处置记录：</p>
        <el-table :data="detailData.repairOrderHistoryList" max-height="300px">
          <el-table-column label="开始时间" prop="createTime" />
          <el-table-column label="现场处理描述" prop="rpEndDesc" />
          <el-table-column label="处置照片" prop="repairPhotosFileList">
            <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 { repairDetail } from '@/api/floodSys/repair';

const { proxy } = getCurrentInstance();
const statusType = ref([
  { label: '待处理', value: 'unprocess' },
  { label: '处理中', value: 'ongoing' },
  { label: '已处理待评价', value: 'completed' },
  { label: '已审核评价', value: 'examined' },
]);
const orderType = ref([
  { label: '电话投诉事件', value: 'phone' },
  { label: '网上投诉事件', value: 'internet' },
  { label: '微信公众投诉事件', value: 'weChat' },
  { label: '设备故障维修工单', value: 'device_fault' },
]);

const props = defineProps({
  eventId: {
    type: String,
    default: '',
  },
});
const detailData = ref({
  operateRepairOrderVo: {
    repairOrderHistoryList: [],
  },
});
// 获取详情数据
function getDataList() {
  proxy.$modal.loading('加载中...');
  repairDetail(props.eventId).then(response => {
    detailData.value = response.data;
    proxy.$modal.closeLoading(); //取消loading
  });
}
onMounted(() => {
  getDataList();
});
</script>
<style lang="scss"></style>