<template>
	<el-dialog v-model="state.dialogVisible" draggable title="终止详情" append-to-body destroy-on-close>
		<el-form label-width="110px" ref="ruleFormRef" :model="state.ruleForm" class="show-info-form" v-loading="state.loading">
			<el-row :gutter="10">
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="工单编号"> {{ state.ruleForm?.order?.no }} </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="工单标题"> {{ state.ruleForm?.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="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="onAudit"
					v-if="[1, 4].includes(state.ruleForm.status) && state.ruleForm.isCanHandle"
					v-auth="'business:terminate:audit'"
					>终止审批</el-button
				>
				<el-button
					type="primary"
					@click="onReturn"
					v-if="[1, 4].includes(state.ruleForm.status) && state.ruleForm.isCanHandle"
					v-auth="'business:terminate:return'"
					>终止退回</el-button
				>
			</span>
		</template>
	</el-dialog>
	<!--  流程审批  -->
	<process-audit ref="processAuditRef" @orderProcessSuccess="orderProcessSuccess"></process-audit>
	<!-- 终止修改 -->
	<terminate-edit ref="terminateEditRef" @updateList="orderProcessSuccess" />
</template>
<script setup lang="ts">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { formatDate } from '@/utils/formatTime';
import { commonEnum } from '@/utils/constants';
import { transformFile } from '@/utils/tools';
import { terminateDetail } from '@/api/business/terminate';

const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue')); // 附件列表
const ProcessAudit = defineAsyncComponent(() => import('@/components/ProcessAudit/index.vue')); // 流程审批
const TerminateEdit = defineAsyncComponent(() => import('@/views/business/terminate/components/Terminate-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 terminateDetail(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 processAuditRef = ref<RefType>();
const terminateEditRef = ref<RefType>(); // 终止修改ref
const onAudit = () => {
	try {
		const orderDetail = {
			...state.ruleForm.order,
		};
		let params = <EmptyObjectType>{};
		switch (state.ruleForm.status) {
			case 0: // 待办 申请甄别
			case 1: // 审批中 甄别审批
				params = {
					id: state.ruleForm.workflowId,
					commonEnum: commonEnum.OrderCirculation,
					processType: '终止审批',
					orderDetail,
					extra: {
						dialogTitle: '终止审批',
						inputPlaceholder: '审批意见',
						annexName: '终止附件',
						classify: '终止上传',
					},
				};
				processAuditRef.value.openDialog(params);
				break;
			case 4: // 审批拒绝 重新申请
				params = {
					id: state.ruleForm.workflowId,
					commonEnum: commonEnum.OrderCirculation,
					processType: '终止申请',
					orderDetail,
					extra: {
						dialogTitle: '终止申请',
						inputPlaceholder: '请填写终止申请理由',
						annexName: '终止附件',
						classify: '终止上传',
					},
				};
				processAuditRef.value.openDialog(params);
				break;
			case 5: // 退回申请人 重新申请
				if (state.ruleForm.sendBackApply) {
					// 退回到申请人 修改甄别
					// 退回到了开始 需要重新打开编辑页面在发起流程
					terminateEditRef.value.openDialog(state.ruleForm);
				} else {
					// 审批
					params = {
						id: state.ruleForm.workflowId,
						commonEnum: commonEnum.OrderCirculation,
						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.OrderCirculation,
			processType: '终止退回',
			extra: {
				dialogTitle: '终止退回',
				inputPlaceholder: '终止退回意见',
				annexName: '终止附件',
				classify: '终止附件',
			},
		};
		processAuditRef.value.openDialog(params);
	} catch (error) {
		console.log(error);
	}
};
// 流程成功刷新页面
const orderProcessSuccess = () => {
	closeDialog();
	emit('updateList');
};
defineExpose({
	openDialog,
	closeDialog,
});
</script>
