<template>
	<el-drawer v-model="state.dialogVisible" title="明细信息" destroy-on-close size="500px" append-to-body>
		<el-form label-width="110px" ref="ruleFormRef" :model="state.ruleForm" class="show-info-form" v-loading="state.loading">
      <p class="border-title mb10">申请信息</p>
			<el-form-item label="申请人"> {{ state.ruleForm.applyUserName }} </el-form-item>
			<el-form-item label="申请部门"> {{ state.ruleForm.applyOrgName }} </el-form-item>
			<el-form-item label="申请时间"> {{ formatDate(state.ruleForm.applyTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
			<el-form-item label="申请时限" v-if="currentType === 'delay'"> {{ state.ruleForm.applyDelayNum }} </el-form-item>
			<el-form-item label="申请原因" class="formatted-text"> {{ state.ruleForm.applyReason }} </el-form-item>
      <p class="border-title mb10 mt20">审核信息</p>
			<el-form-item label="审核人">{{ state.ruleForm.auditName }}</el-form-item>
			<el-form-item label="审核部门">{{ state.ruleForm.auditOrgName }}</el-form-item>
			<el-form-item label="审核时间"> {{ formatDate(state.ruleForm.auditTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
			<el-form-item label="审核状态">{{ state.ruleForm.auditState }}</el-form-item>
			<el-form-item label="审核原因" class="formatted-text">{{ state.ruleForm.auditContent }}</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDrawer" class="default-button">关 闭</el-button>
			</span>
		</template>
	</el-drawer>
</template>
<script setup lang="ts" name="businessUrgeDetailDialog">
import { reactive, ref } from 'vue';
import { formatDate } from '@/utils/formatTime';
import { provinceDelayDetail, provinceIdentifyDetail, provinceReturnDetail } from '@/api/province';

// 定义子组件向父组件传值/事件
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false, // 是否显示弹窗
	loading: false, // 是否显示加载
	ruleForm: {},
});
// 打开弹窗
const currentType = ref('');
const openDrawer = async (id: string, type: string) => {
	state.loading = true;
	state.dialogVisible = true;
	currentType.value = type;
	try {
		switch (type) {
			case 'delay':
				const { result } = await provinceDelayDetail({ id });
				state.ruleForm = result;
				state.loading = false;
				break;
			case 'return':
				const returnRes = await provinceReturnDetail({ id });
				state.ruleForm = returnRes.result;
				state.loading = false;
				break;
			case 'screen':
				const screenRes = await provinceIdentifyDetail({ id });
				state.ruleForm = screenRes.result;
				state.loading = false;
				break;
			default:
				break;
		}
	} catch (e) {
		console.log(e);
		state.loading = false;
    state.dialogVisible = false;
	}
};
// 关闭弹窗
const closeDrawer = () => {
	state.dialogVisible = false;
};
defineExpose({
	openDrawer,
	closeDrawer,
});
</script>
