<template>
	<el-dialog v-model="state.dialogVisible" draggable title="甄别详情" ref="dialogRef" width="50%" append-to-body destroy-on-close>
		<el-form label-width="110px" ref="ruleFormRef" :model="state.ruleForm" class="show-info-form">
			<el-row :gutter="10">
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="工单编号"> {{ state.ruleForm?.no }} </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="工单标题"> {{ state.ruleForm?.visit?.order?.title }} </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="申请人">{{ state.ruleForm?.creatorName }} </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="申请部门">{{ state.ruleForm?.creatorOrgName }} </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="申请时间">{{ formatDate(state.ruleForm?.creationTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="申请类型"> {{ state.ruleForm?.typeDicName }} </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="发起甄别耗时"> {{ state.ruleForm?.timeConsuminText }} </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="是否省甄别">{{ state.ruleForm?.isProvince ? '是' : '否' }} </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="申请理由" class="formatted-text">{{ state.ruleForm?.content }} </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="附件"
						><annex-list name="甄别申请附件" v-model="state.ruleForm.files" readonly classify="甄别申请附件" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDialog" class="default-button">取 消</el-button>
				<el-button type="primary" @click="processDetail">流程明细</el-button>
				<el-button
					type="primary"
					@click="onAudit"
					v-if="[0, 1, 3, 5].includes(state.ruleForm.status) && state.ruleForm.isCanHandle"
					v-auths="['business:discern:audit:todo', 'business:discern:audit']"
					>甄别审批</el-button
				>
				<el-button
					type="primary"
					@click="onReturn"
					v-if="[0, 1, 3, 5].includes(state.ruleForm.status) && state.ruleForm.isCanHandle"
					v-auths="['business:discern:return:todo', 'business:discern:return']"
					>甄别退回</el-button
				>
			</span>
		</template>
	</el-dialog>
	<!-- 审核记录 -->
	<audit-record ref="auditRecordRef" />
	<!--  流程审批  -->
	<process-audit ref="processAuditRef" @orderProcessSuccess="orderProcessSuccess"></process-audit>
	<!-- 甄别修改 -->
	<discern-edit ref="discernEditRef" @updateList="orderProcessSuccess" />
</template>
<script setup lang="ts" name="discernDetail">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { formatDate } from '@/utils/formatTime';
import { screenDetail } from '@/api/business/discern';
import { commonEnum } from '@/utils/constants';
import { transformFile } from '@/utils/tools';

const AuditRecord = defineAsyncComponent(() => import('@/components/AuditRecord/index.vue')); // 流程明细
const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue')); // 附件列表
const ProcessAudit = defineAsyncComponent(() => import('@/components/ProcessAudit/index.vue')); // 流程审批
const DiscernEdit = defineAsyncComponent(() => import('@/views/business/discern/components/Discern-edit.vue')); // 甄别修改

const emit = defineEmits(['updateList']); // 定义事件
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false, // 是否显示弹窗
	loading: false, // 是否显示加载
	ruleForm: {},
});
/*
 * @params row 工单详情
 * @description 打开弹窗
 * */
const openDialog = async (row: any) => {
	state.dialogVisible = true;
	state.loading = true;
	try {
		const res = await screenDetail(row.id);
		state.ruleForm = res.result ?? {};
		state.ruleForm.files = transformFile(state.ruleForm.files);
		state.loading = false;
	} catch (e) {
		console.log(e);
		state.loading = false;
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 流程明细
const auditRecordRef = ref<RefType>(); // 审核记录ref
const processDetail = () => {
	const params = {
		dialogTitle: `甄别记录 （${state.ruleForm?.visit?.order?.title}）`,
		...state.ruleForm,
	};
	auditRecordRef.value.openDialog(params);
};
// 甄别审批
const processAuditRef = ref<RefType>();
const discernEditRef = ref<RefType>(); // 甄别修改ref
const onAudit = () => {
	try {
		const orderDetail = {
			visitId: state.ruleForm?.visitId,
			...state.ruleForm?.visit?.order,
		};
		let params = <EmptyObjectType>{};
		switch (state.ruleForm.status) {
			case 0: // 待办 申请甄别
			case 1:// 审批中 甄别审批
				params = {
					id: state.ruleForm.workflowId,
					commonEnum: commonEnum.Discriminate,
					processType: '甄别审批',
					orderDetail,
					extra: {
						dialogTitle: '甄别审批',
						inputPlaceholder: '审批意见',
						annexName: '甄别附件',
						classify: '甄别上传',
					},
				};
				processAuditRef.value.openDialog(params);
				break;
			case 3: // 审批拒绝 重新申请
				params = {
					id: state.ruleForm.workflowId,
					commonEnum: commonEnum.Discriminate,
					processType: '甄别申请',
					orderDetail,
					extra: {
						dialogTitle: '甄别申请',
						inputPlaceholder: '请填写甄别意见',
						annexName: '甄别附件',
						classify: '甄别上传',
					},
				};
				processAuditRef.value.openDialog(params);
				break;
			case 5: // 退回申请人 重新申请
				if(state.ruleForm.sendBackApply){ // 退回到申请人 修改甄别
					// 退回到了开始 需要重新打开编辑页面在发起流程
					discernEditRef.value.openDialog(state.ruleForm);
				}else{ // 审批
					params = {
						id: state.ruleForm.workflowId,
						commonEnum: commonEnum.Discriminate,
						processType: '甄别审批',
						orderDetail,
						extra: {
							dialogTitle: '甄别审批',
							inputPlaceholder: '审批意见',
							annexName: '甄别附件',
							classify: '甄别上传',
						},
					};
					processAuditRef.value.openDialog(params);
				}
				break;
			default:
				break;
		}
	} catch (error) {
		console.log(error);
	}
};
// 甄别退回
const onReturn = () => {
	try {
		const params = {
			id: state.ruleForm.workflowId,
			commonEnum: commonEnum.Discriminate,
			processType: '甄别退回',
			extra: {
				dialogTitle: '甄别退回',
				inputPlaceholder: '请填写甄别退回意见',
				annexName: '甄别附件',
				classify: '甄别上传',
			},
		};
		processAuditRef.value.openDialog(params);
	} catch (error) {
		console.log(error);
	}
};
// 流程成功刷新页面
const orderProcessSuccess = () => {
	closeDialog();
	emit('updateList');
};
defineExpose({
	openDialog,
	closeDialog,
});
</script>
