<template>
	<div class="form">
		<el-form :model="form" label-width="130px" ref="ruleFormRef">
			<el-form-item label="节点名称" prop="name" :rules="[{ required: true, message: '请输入节点名称', trigger: 'blur' }]">
				<el-input v-model="form.name" placeholder="请输入节点名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="节点编码" prop="code" :rules="[{ required: true, message: '请输入节点编码', trigger: 'blur' }]">
				<el-input v-model="form.code" disabled placeholder="请输入节点编码" clearable></el-input>
			</el-form-item>
			<el-form-item label="处理人" prop="handlerType" :rules="[{ required: true, message: '请选择处理人', trigger: 'change' }]">
				<el-select v-model="form.handlerType" class="w100" placeholder="请选择处理人" @change="changeOptions">
					<el-option v-for="item in handlerTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<!-- 选择其他 -->
			<el-form-item
				v-if="[0, 1, 2].includes(form.handlerType)"
				:label="itemName"
				prop="handlerClassifiesOrgin"
				:rules="[{ required: true, message: `请选择${itemName}`, trigger: 'change' }]"
			>
				<el-select-v2
					v-model="form.handlerClassifiesOrgin"
					class="w100"
					filterable
					:options="selectList"
					:placeholder="'请选择' + itemName"
					multiple
					clearable
					@change="getSelectValue"
				/>
			</el-form-item>
			<!-- 选择用户 -->
			<el-form-item
				v-if="[3].includes(form.handlerType)"
				:label="itemName"
				prop="handlerClassifiesOrgin"
				:rules="[{ required: true, message: `请选择${itemName}`, trigger: 'change' }]"
			>
				<el-select-v2
					v-model="form.handlerClassifiesOrgin"
					class="w100"
					filterable
					:options="usetList"
					:loading="loading"
					placeholder="请输入用户名称"
					multiple
					:remote-method="remoteMethod"
					clearable
					remote
					@change="getSelectValue"
				/>
			</el-form-item>
			<!-- 部门 -->
			<el-form-item
				v-if="[4].includes(form.handlerType)"
				:label="itemName"
				prop="handlerClassifiesOrgin"
				:rules="[{ required: true, message: `请选择${itemName}`, trigger: 'change' }]"
			>
				<el-tree-select
					:props="{ label: 'orgName' }"
					node-key="orgCode"
					class="w100"
					ref="treeSelectRef"
					v-model="form.handlerClassifiesOrgin"
					:placeholder="'请选择' + itemName"
					:data="orgData"
					multiple
					:render-after-expand="false"
					show-checkbox
					@check-change="checkChange"
					check-strictly
					default-expand-all
				/>
			</el-form-item>
			<el-form-item
				label="部门内部办理"
				prop="onlySelfOrg"
				v-if="form.handlerType === 0"
				:rules="[{ required: false, message: '请选择是否部门内部办理', trigger: 'change' }]"
			>
				<el-switch v-model="form.onlySelfOrg" inline-prompt active-text="是" inactive-text="否"></el-switch>
			</el-form-item>
			<el-form-item label="会签" prop="countersignMode" :rules="[{ required: true, message: '请选择会签', trigger: 'change' }]">
				<el-select v-model="form.countersignMode" class="w100" placeholder="请选择会签">
					<el-option v-for="item in countersignModeList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="会签结束节点" prop="CountersignEndCode" v-if="form.CountersignEndCode">
				<el-select v-model="form.CountersignEndCode" class="w100" disabled>
					<el-option v-for="item in nodesOptions" :key="item.id" :label="item.text.value" :value="item.id" />
				</el-select>
			</el-form-item>
		</el-form>
		<!-- <el-alert title="确定要发起会签" type="warning" :closable="false" show-icon
            v-if="form.handlerTypeOrigin && form.handlerTypeOrigin.length > 1" /> -->
	</div>
</template>
<script lang="ts" setup name="flowNode">
import { reactive, watch, onMounted, ref } from 'vue';
import { baseData, getSelectList } from '/@/api/system/workflow';
import { queryUser } from '/@/api/login/user';
import { getcanuseorg } from '/@/api/system/user';
// 注意:ref不能与model一样，相同的话表单双向绑定将会失效
const form = reactive<any>({} as any);
const ruleFormRef = ref();
// 定义属性
const props = defineProps<{
	modelValue: any;
}>();
const emits = defineEmits(['update:modelValue']);
// 处理人
const handlerTypeOptions = ref([] as any);
// 下拉内容
const selectList = ref([] as any);
// 指定用户列表
const usetList = ref([] as any);
// 会签
const countersignModeList = ref([] as any);
// 部门
const orgData = ref([] as any);
// 部门
const nodesOptions = ref([] as any);
// 会签
const itemName = ref('' as any);
//
const loading = ref(false);
watch(
	() => form,
	() => {
		emits('update:modelValue', Object.assign(props.modelValue, form));
	},
	{ deep: true }
);
// 选择处理人获取数据
const changeOptions = (e: any) => {
	form.handlerClassifiesOrgin = [];
	form.handlerClassifies = '[]';
	itemName.value = handlerTypeOptions.value[e].label;
	if ([0, 1, 2].includes(e)) {
		getSelectList(e).then((res: any) => {
			selectList.value = res.result ?? [];
			selectList.value = selectList.value.map((item: any) => ({
				value: item.key,
				label: item.value,
			}));
		});
	}
	if (e === 4) {
		getcanuseorgFn();
	}
};
// 远程搜索用户名称
const remoteMethod = (query: string) => {
	if (query !== '') {
		loading.value = true;
		queryUser({ name: query }).then((res: any) => {
			loading.value = false;
			if (res.result?.length) {
				usetList.value.push(...res.result);
				usetList.value = usetList.value.map((item: any) => {
					if (item.name) {
						return {
							value: item.id,
							label: item.name + '-' + item.orgName,
						};
					} else {
						return { ...item };
					}
				});
			}
		});
	}
};
// 获取可用组织
const getcanuseorgFn = () => {
	getcanuseorg().then((res: any) => {
		orgData.value = res?.result ?? [];
	});
};
const treeSelectRef = ref();
// 选择部门
const checkChange = () => {
	const data = treeSelectRef.value.getCheckedNodes();
	let arr: any[] = [];
	arr = data.map((v: any) => {
		return {
			id: v.orgCode,
			name: v.orgName,
		};
	});
	// 使用模板字符串
	form.handlerClassifies = `${JSON.stringify(arr)}`;
};
// 获取选择对象
const getSelectValue = (query: any[]) => {
	// 提炼函数
	const getSelectedItems = (list: any[]) => {
		return list.filter((item) => query.includes(item.value)).map((item) => ({ name: item.label, id: item.value }));
	};
	let arr: any[] = [];
	if (form.handlerType !== 3) {
		arr = getSelectedItems(selectList.value);
	} else {
		arr = getSelectedItems(usetList.value);
	}
	// 使用模板字符串
	form.handlerClassifies = `${JSON.stringify(arr)}`;
};
onMounted(async () => {
	// 获取页面基础数据
	const res: any = await baseData();
	handlerTypeOptions.value = res.result?.handlerTypeOptions ?? [];
	handlerTypeOptions.value = handlerTypeOptions.value.map((item: any) => ({
		value: item.key,
		label: item.value,
	}));
	countersignModeList.value = res.result?.countersignMode ?? [];
	countersignModeList.value = countersignModeList.value.map((item: any) => ({
		value: item.key,
		label: item.value,
	}));
	// 合并表单
	Object.assign(form, props.modelValue);
	if (form.handlerClassifies.includes('[')) {
		form.handlerClassifiesOrgin = JSON.parse(form.handlerClassifies).map((item: any) => {
			return item.id;
		});
		let handlerClassifies = JSON.parse(form.handlerClassifies);
		for (let i of handlerClassifies) {
			remoteMethod(i.name.split('-')[0]);
		}
	}
	if ([0, 1, 2].includes(form.handlerType)) {
		const res: any = await getSelectList(form.handlerType);
		selectList.value = res.result ?? [];
		selectList.value = selectList.value.map((item: any) => ({
			value: item.key,
			label: item.value,
		}));
		if (handlerTypeOptions.value.length) itemName.value = handlerTypeOptions.value[form.handlerType].label;
	} else if ([3].includes(form.handlerType)) {
		if (handlerTypeOptions.value.length) itemName.value = handlerTypeOptions.value[form.handlerType].label;
	} else if ([4].includes(form.handlerType)) {
		getcanuseorgFn();
	}
	nodesOptions.value = form.summarynodes ?? [];
});
// 导入属性及方法给外部调用
defineExpose({
	ruleFormRef,
});
</script>
