<template>
	<div class="node">
		<ElDrawer destroy-on-close append-to-body :title="title" ref="drawerRef" @close="handleClose" :before-close="beforeClose" v-model="showDrawer">
			<component
				:is="componentType"
				v-model="formData"
				:extendAttrConfig="props.extendAttrConfig || {}"
				ref="ruleFormRef"
				@countersignStartCode="countersignStartCodeChange"
			/>
		</ElDrawer>
	</div>
</template>
<script lang="ts" setup name="flowMain">
import { reactive, ref, computed, defineAsyncComponent, unref } from 'vue';
import { NodeTypeEnum } from '../enums';
const task = defineAsyncComponent(() => import('./task.vue'));
const summary = defineAsyncComponent(() => import('./summary.vue'));
const showDrawer = ref(false);
const drawerRef = ref(null);
let formData = reactive<any>({} as any);
const ruleFormRef = ref();
const NODE_NAME_LIST = ['hotline:summary', 'hotline:task'] as string[];
// 组件列表
const COMPONENT_LIST = {
	task,
	summary,
};
// 事件
const emits = defineEmits(['change', 'changeOther']);
// 定义属性
const props = defineProps({
	extendAttrConfig: {
		// 扩展属性配置
		type: Object,
		required: false,
		default: () => {},
	},
});
// 标题
const title = computed(() => {
	if (formData.type === 'process') {
		return '设置模板属性';
	} else if (formData.type === 'hotline:transition') {
		return '设置边属性';
	} else if (NODE_NAME_LIST.includes(formData.type)) {
		return '设置节点属性';
	}
	return '';
});
// 组件类型
const componentType = computed(() => {
	const mFormData = unref(formData);
	if (!mFormData || !mFormData.type) return;
	return COMPONENT_LIST[mFormData.type.replace('hotline:', '')];
});
// 节点名称
const nodeName = computed((): NodeTypeEnum => {
	const mFormData = unref(formData);
	if (!mFormData || !mFormData.type) return NodeTypeEnum.ignore;
	return mFormData.type.replace('hotline:', '') as unknown as NodeTypeEnum;
});
// 处理emits
const handleEmits = (propertyName: string, propertyValue: any) => {
	if (propertyValue === undefined) return;
	emits('change', {
		type: unref(nodeName),
		propertyName: propertyName,
		propertyValue: propertyValue,
	} as any);
};
// 处理其他节点emits
const handleEmitsOther = (propertyName: string, propertyValue: any, type: any, id: any) => {
	if (propertyValue === undefined) return;
	emits('changeOther', {
		type: type,
		propertyName: propertyName,
		propertyValue: propertyValue,
		id: id,
	} as any);
};

// 表单属性keys
const propertyKeys = [
	// 流程属性
	'name',
	'code',
	'id',
	'moduleName',
	'moduleCode',
	// 节点属性
	'name',
	'code',
	'handlerClassifies',
	'handlerType',
	'countersignMode',
	'form',
	'onlySelfOrg',
	'CountersignStartCode',
	'CountersignEndCode',
] as string[];
// 去重后的key
const propertyKeysSet = Array.from(new Set(propertyKeys));

// 显示抽屉
const show = (args: any) => {
	// 将args的值复制给formData
	Object.assign(formData, args);
	showDrawer.value = true;
};
// 抽屉关闭处理
const handleClose = () => {
	// 清空表单值
	Object.keys(formData).forEach((key: string) => {
		delete formData[key];
	});
};
// 会签节点变化
const countersignStartCodeChange = (val: any) => {
	propertyKeysSet.forEach((key: string) => {
		// 监听其他节点属性变化
		handleEmitsOther(key, val[key], val.type, val.id);
	});
};
// 关闭之前 保存
const beforeClose = (done: () => void) => {
	ruleFormRef.value.ruleFormRef.validate((valid: boolean) => {
		if (valid) {
			propertyKeysSet.forEach((key: string) => {
				// 监听属性变化
				handleEmits(key, formData[key]);
				done();
			});
		} else {
			return false;
		}
	});
};
// 导入属性及方法给外部调用
defineExpose({
	show,
});
</script>
