

<template>
  <el-dialog v-model="state.dialogVisible" width="50%" draggable title="重复性事件详情" append-to-body destroy-on-close>
    <el-form :model="state.ruleForm" label-width="80px" ref="ruleFormRef">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="标题">
              {{ state.ruleForm.title }}
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="关键词">
            {{ state.ruleForm.keyWords }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider content-position="left"><span class="font16"> 重复事件工单 </span></el-divider>
    <el-table :data="state.repeatTable" v-loading="state.loading">
      <el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
      <el-table-column width="100" label="省/市工单" prop="isProvince">
        <template #default="{ row }">
          <span>{{ row.order?.isProvince ? '省工单' : '市工单' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="order.currentStepName" label="当前办理节点" show-overflow-tooltip width="150"></el-table-column>
      <el-table-column label="工单状态" show-overflow-tooltip width="100" prop="order.statusText"></el-table-column>
      <el-table-column label="标题" show-overflow-tooltip width="300">
        <template #default="{ row }">
          <span class="color-primary">{{ row.order?.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="受理时间" show-overflow-tooltip width="170">
        <template #default="{ row }">
          <span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="expiredTime" label="工单期满时间" show-overflow-tooltip width="170">
        <template #default="{ row }">
          <span>{{ formatDate(row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="order.actualHandleOrgName" label="接办部门" show-overflow-tooltip width="170"></el-table-column>
      <el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip width="150"></el-table-column>
      <el-table-column label="紧急程度" show-overflow-tooltip prop="order.emergencyLevelText" width="100"></el-table-column>
      <el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
      <el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="120">
        <template #default="{ row }">
						<span
            >{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
						</span>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
				<span class="dialog-footer">
					<el-button @click="state.dialogVisible = false" class="default-button">关 闭</el-button>
				</span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts" name="repeatEventDetail">
import {reactive} from "vue";
import {formatDate} from "/@/utils/formatTime";
import {repeatEventDetail} from '/@/api/business/repeatEvent';

const state = reactive<any>({
  loading: false, // 加载
  dialogVisible: false, // 弹窗
  ruleForm: <EmptyObjectType>{},
  repeatTable: [], // 重复事件工单
});

// 创建重复事件
const openDialog = (row:any) => {
  getDetail(row)
};
// 查询详情
const getDetail = async (row:any)=>{
   try {
      const {result} = await repeatEventDetail({id:row.id,Keyword:null});
      state.ruleForm = result;
      state.repeatTable = result.details;
     state.dialogVisible = true;
   }catch (e) {
      console.log(e);
   }
}
defineExpose({
  openDialog,
});
</script>