<template>
	<el-dialog v-model="state.dialogVisible" draggable title="流程跳转">
		<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="90px" v-loading="state.loading">
			<el-row :gutter="5">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="流程标题" class="mb10">
						{{ state.showForm.title }}
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
					<el-form-item label="当前环节" class="mb10">
						{{ state.showForm.currentStepName }}
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
					<!-- <el-form-item label="当前处理人" class="mb10">
							{{ state.showForm.assignOrgs }}
						</el-form-item> -->
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
					<el-form-item label="跳转到" prop="nextStepCode" :rules="[{ required: true, message: '请选择跳转到', trigger: 'change' }]">
						<el-select v-model="state.ruleForm.nextStepCode" placeholder="请选择跳转到" class="w100" @change="selectNextStep">
							<el-option v-for="item in state.nextStepOptions" :key="item.code" :label="item.name" :value="item.code" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
					<el-form-item label="处理人" prop="nextHandlers" :rules="[{ required: true, message: '请选择处理人', trigger: 'change' }]">
						<el-select v-model="state.ruleForm.nextHandlers" multiple filterable placeholder="请选择处理人" class="w100" value-key="id" clearable>
							<el-option v-for="item in state.handerOptions" :key="item.id" :label="item.name" :value="item" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
					<el-form-item label="情况说明" prop="opinion" :rules="[{ required: true, message: '请输入情况说明', trigger: 'blur' }]">
						<el-input
							v-model="state.ruleForm.opinion"
							type="textarea"
							:autosize="{ minRows: 6, maxRows: 8 }"
							placeholder="请输入情况说明"
							max-length="1000"
						></el-input>
					</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="onSubmit(ruleFormRef)">保 存</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup name="workflowJump">
import { ref, reactive } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import other from '/@/utils/other';
import { workflowJump, workflowGetJump, workflowStepOptions } from '/@/api/system/workflow';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList', 'openDialog', 'closeDialog']);

// 定义变量内容
const state = reactive<any>({
	ruleForm: {
		workflowId: '', // 流程ID
		nextStepCode: '', // 下一环节
		nextHandlers: [], // 下一处理人
		opinion: '', // 情况说明
	},
	showForm: {
		title: '', // 流程标题
		currentStepName: '', // 当前环节
	},
	dialogVisible: false, // 弹窗显示隐藏
	nextStepOptions: [], // 下一环节
	personList: [], // 人员列表
	loading: false, // 加载状态
	handleId: '', // 流程处理ID
});
const ruleFormRef = ref<RefType>(); // 表单ref
// 打开弹窗
const openDialog = async (row: any) => {
	try {
		state.loading = true;
		ruleFormRef.value?.resetFields();
		ruleFormRef.value?.clearValidate();
		const res: any = await workflowGetJump(row.id);
		state.ruleForm.workflowId = row.id;
		state.handleId = res.result.id;
		state.nextStepOptions = res.result.steps;
		state.showForm = row;
		state.loading = false;
		state.dialogVisible = true;
	} catch (error) {
		state.loading = false;
	}
};
// 流程选择下一个环节
const selectNextStep = (val: any) => {
	ruleFormRef.value?.resetFields('nextHandlers');
	ruleFormRef.value?.resetFields('nextMainHandler');
	const next = state.nextStepOptions.find((item: any) => item.code === val);
	getNextStepOption(state.handleId, next.code);
};
// 查询流程下一节点参数
const getNextStepOption = async (DefineId: string, Code: string) => {
	try {
		const res: any = await workflowStepOptions({ DefineId, Code });
		state.handerOptions = res.result.handlers ?? [];
	} catch (error) {
		console.log(error);
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 保存
const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
		let submitObj = other.deepClone(state.ruleForm);
		if (submitObj.nextHandlers && submitObj.nextHandlers.length) {
			submitObj.nextHandlers = submitObj.nextHandlers.map((item: any) => {
				return {
					id: item.id,
					name: item.name,
				};
			});
		}
		workflowJump(submitObj).then(() => {
			ElMessage.success('操作成功');
			emit('updateList');
			state.dialogVisible = false;
		});
	});
};
//暴漏变量和方法
defineExpose({ closeDialog, openDialog });
</script>
