<template>
	<div class="system-workflow-jump-container">
		<el-dialog v-model="state.isShowDialog" width="700px" 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="流程标题">
							{{ state.showForm.title }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
						<el-form-item label="当前环节">
							{{ state.showForm.currentStepName }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
						<el-form-item label="当前处理人">
							{{ 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"
								@change="selectHanders"
								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">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

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

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

// 定义变量内容
const ruleFormRef = ref();
const state = reactive<any>({
	ruleForm: {
		nextStepCode: '',
		nextHandlers: [],
		opinion: '',
	},
	showForm: {},
	isShowDialog: false,
	nextStepOptions: [],
	personList: [],
	loading: false,
});
// 打开弹窗
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.nextStepOptions = res.result;
		state.showForm = row;
		state.loading = false;
		state.isShowDialog = 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);
	state.handerOptions = next.handlerClassifies ?? [];
};
// 选择处理人
const selectHanders = (val: any) => {
	ruleFormRef.value?.resetFields('nextHandlers');
	ruleFormRef.value?.resetFields('nextMainHandler');
	state.ruleForm.nextHandlers = val.map((item: any) => {
		return {
			id: item.id,
			name: item.name,
			label: item.name,
			key: item.id,
		};
	});
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 保存
const onSubmit = () => {
	ruleFormRef.value.validate((valid: boolean) => {
		if (valid) {
			ElMessageBox.confirm(`确认提交?`, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
				draggable: true,
				cancelButtonClass: 'default-button',
				autofocus: false,
			})
				.then(() => {
					workflowJump(state.ruleForm).then(() => {
						ElMessage.success('操作成功');
						emit('updateList');
						state.isShowDialog = false;
					});
				})
				.catch(() => {});
		} else {
			return false;
		}
	});
};
//暴漏变量和方法
defineExpose({ closeDialog, openDialog });
</script>
