<template>
	<el-drawer
		:close-on-click-modal="false"
		class="local-launch_drawer-wrap"
		:title="record.processName"
		:model-value="modelValue"
		size="760px"
		@update:model-value="updateModelValue"
	>
		<div v-if="validateForm.loading" v-loading="true" class="local_loading"></div>
		<div class="info-wrap">
			<el-divider content-position="left">{{ record.processName }}表单</el-divider>
			<div class="self-Everright-formEditor">
				<!-- :is-show-complete-button="false" -->
				<er-form-preview ref="EReditorRef" :is-show-complete-button="false" :file-upload-u-r-i="uploadFileApi" />
			</div>
			<el-divider content-position="left">审批流程</el-divider>
			<el-timeline class="timeline-wrap">
				<el-timeline-item v-for="(v, index) in processTimelineList" :key="index">
					<template v-if="v.conditionNodes">
						<el-radio-group v-model="processChecked[v.local_name]" size="small">
							<el-radio-button v-for="c of v.conditionNodes" :key="c.local_name" :label="c.local_name">{{ c.nodeName }}</el-radio-button>
						</el-radio-group>
					</template>
					<template v-else>
						<div style="padding-bottom: 6px">{{ v.nodeName }}</div>
						<div v-if="assigneeMap[v.local_name]" style="display: flex; align-items: center; gap: 6px; flex-wrap: wrap">
							<template v-if="assigneeMap[v.local_name].type === 1">
								<el-tooltip v-if="!assigneeMap[v.local_name].disabled" content="添加用户" placement="left">
									<el-button style="width: 32px" @click="selectHandler(v.local_name, 1)">
										<svg-icon style="font-size: 18px" icon-class="flow-user-add" />
									</el-button>
								</el-tooltip>
								<FlowNodeAvatar v-for="(item, index) in assigneeMap[v.local_name].assignees" :key="index" :name="item.name" style="margin-top: 5px" />
							</template>
							<template v-else>
								<el-tooltip v-if="!assigneeMap[v.local_name].disabled" content="添加角色" placement="left">
									<el-button style="width: 32px" @click="selectHandler(v.local_name, 3)">
										<svg-icon style="font-size: 18px" icon-class="flow-group-add" />
									</el-button>
								</el-tooltip>
								<FlowNodeAvatar v-for="(item, index) in assigneeMap[v.local_name].assignees" :key="index" :name="item.name" style="margin-top: 5px">
									<template #avatar>
										<svg-icon icon-class="flow-group" color="#fff" />
									</template>
								</FlowNodeAvatar>
							</template>
						</div>
						<div v-else-if="assigneeDesc[v.local_name]">
							<!-- 没有assigneeMap 的情况下 尝试获取描述 -->
							<el-tag>{{ assigneeDesc[v.local_name] }}</el-tag>
						</div>
					</template>
				</el-timeline-item>
				<el-timeline-item>
					<div style="padding-bottom: 6px">结束</div>
				</el-timeline-item>
			</el-timeline>
			<el-divider></el-divider>
		</div>

		<template #footer>
			<el-button @click="updateModelValue(false)">{{ $t('le.btn.cancel') }}</el-button>
			<el-button :disabled="validateForm.loading" type="primary" style="margin-left: 8px" @click="onSubmit">{{ $t('le.btn.confirm') }}</el-button>
		</template>
	</el-drawer>
	<!--  选择人员/角色-->
	<use-select ref="useSelectRef" v-bind="active_selectOpts" @update:selected="updateActive_assigneeMap"></use-select>
</template>
<script setup lang="ts">
import model from '@/api/flow/process'
import { erFormPreview } from '@ER/formEditor'
// import { erFormPreview } from 'everright-formeditor'
import { ref, computed, reactive, inject } from 'vue'
import { ElMessage } from 'element-plus'
import UseSelect from '@/components/scWorkflow/select.vue'
import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
import { setTypeOptions_config } from '@/components/scWorkflow/nodes/config'
const { VITE_APP_BASE_API } = import.meta.env
const uploadFileApi = ref(`${VITE_APP_BASE_API}/v1/oss/upload`)
const EReditorRef = ref()
type Props = {
	modelValue: boolean
	record: { processId: string; processName: string; [key: string]: any }
}
const props = defineProps<Props>()
const emit = defineEmits<{
	'update:modelValue': [bool: boolean] // 具名元组语法
	update: [value: string]
}>()
const updateModelValue = (bool: boolean) => emit('update:modelValue', bool)
type Assignee = {
	type: 1 | 3 // 1: 用户 3: 角色
	assignees: { [key: string]: any /*name, id*/ }
	disabled?: boolean
	selectOpts?: any
	// minSelected?: number
	// maxSelected?: number
}
const useSelectRef = ref()
const assigneeMap = ref<{
	[key: string]: Assignee
}>({})
const assigneeDesc = ref<{
	[key: string]: string
}>({})
const active_assigneeKey = ref<string>()
const active_selectOpts = ref({})
const updateActive_assigneeMap = (assignees: any[]) => {
	const _cur = assigneeMap.value[active_assigneeKey.value]
	if (_cur) {
		_cur.assignees = assignees
	}
}
const selectHandler = (local_name: string, type: 1 | 3) => {
	if (!assigneeMap.value[local_name]) {
		assigneeMap.value[local_name] = { assignees: [], type }
	}
	const config = assigneeMap.value[local_name]
	active_assigneeKey.value = local_name
	active_selectOpts.value = config.selectOpts || {}
	useSelectRef.value.open(type, config.assignees)
}
const validateForm = ref({
	api: {},
	option: {
		submitBtn: false
	},
	rule: [],
	loading: false
})

const onSubmit = async () => {
	const processId = props.record.processId
	const form = EReditorRef.value.getSelfFormRef()
	form.validate(valid => {
		if (valid) {
			// 表单验证通过 进行保存
			validateForm.value.loading = true
			const formData = EReditorRef.value.getData()
			let processForm = JSON.parse(cur_processForm_str)
			processForm = { ...processForm, formData }
			const _assigneeMap = assigneeMap.value
			const assigneeMap_ = Object.keys(_assigneeMap).reduce((obj, key) => {
				const _o = _assigneeMap[key]
				obj[key] = {
					assigneeList: _o.assignees,
					type: _o.type
				}
				return obj
			}, {})
			model
				.processLaunchApi({
					processId, // 流程ID
					processForm: JSON.stringify(processForm), // 流程表单JSON内容 & local_value 保存
					assigneeMap: assigneeMap_
				})
				.then(res => {
					ElMessage.success('提交成功')
					updateModelValue(false)
				})
				.finally(() => {
					validateForm.value.loading = false
				})
		}
	})
}

// 当前form 表单数据字符串
let cur_processForm_str = '{}'
const processChecked = reactive<{ [key: string]: any }>({})
const modelContentConfig = ref({})
const packageProcess = (data, list = [], levelIdx = 0) => {
	const new_list = [data]
	let curData = data
	while (curData.childNode) {
		new_list.push(curData.childNode)
		curData = curData.childNode
	}
	return new_list.reduce((_list, config, i) => {
		// 节点唯一key
		if (!config.local_name) {
			config.local_name = `${config.nodeName}&_&${levelIdx}_${i}`
		}
		// 条件分支
		if (Array.isArray(config.conditionNodes)) {
			// console.log('条件节点', config)
			_list.push(config)
			if (Array.isArray(config.conditionNodes) && config.conditionNodes.length) {
				// 节点唯一key(条件分支 额外处理)
				config.conditionNodes.map((v, _i) => {
					v.local_name = v.local_name || `${config.local_name}_${v.nodeName}*${_i}`
				})
				const _val = processChecked[config.local_name]
				let condition: any = config.conditionNodes[0]
				if (_val) {
					config.conditionNodes.some(_condition => {
						if (_condition.local_name === _val) {
							condition = _condition
							return true
						}
					})
				} else {
					// console.error('else......', condition)
					processChecked[config.local_name] = condition.local_name
				}
				// console.warn('条件节点', condition.nodeName)
				if (condition.childNode) {
					packageProcess(condition.childNode, _list, levelIdx + 1)
				}
			}
		} else {
			// console.log(config.nodeName, 'nodeName 普通节点名称', config, data)
			// 0，发起人 1，审批人 2，抄送人 3，条件审批 4，条件分支 5，办理子流程 6，定时器在务 7，触发器在务
			switch (+config.type) {
				case 0: {
					// 发起人
					// console.error('发起人')
					break
				}
				case 1: {
					// 审批人
					// 针对审核人 不同情况控制
					if (Reflect.has(config, 'setType')) {
						let disabled = false
						let selectOpts = {}
						const user_fn = () => {
							assigneeMap.value[config.local_name] = { assignees: config.nodeUserList, type: 1, disabled, selectOpts }
						}
						switch (config.setType) {
							case 1:
								// 指定人员 (不允许重新选择) // 但展示
								disabled = true
								user_fn()
								break
							case 2:
								// 主管 (不需要选择)
								assigneeDesc.value[config.local_name] = config.examineLevel === 1 ? '直接主管' : `发起人的第${config.examineLevel}级主管`
								break
							case 3:
								// 角色 选择角色 (允许重新选择)
								assigneeMap.value[config.local_name] = { assignees: config.nodeRoleList, type: 3 }
								break
							case 4:
								// 发起人自选 (1: 选择一个人, 2: 选择多个人)
								// const isMultiple = config.selectMode === 2
								if (config.selectMode === 1) {
									selectOpts = { maxSelected: 1 }
								}
								user_fn()
								break
							case 5: // 发起人自己 (不能选择)
								assigneeDesc.value[config.local_name] = setTypeOptions_config[5]
								break
							case 6:
								// 连续多级主管 (不能选择)
								assigneeDesc.value[config.local_name] = config.examineLevel === 1 ? '直接主管' : `发起人的第${config.examineLevel}级主管`
								break
						}
					}
					break
				}
				case 2: {
					// 抄送人
					// 选择人员 & allowSelection 控制 true 允许选择 否则  隐藏
					assigneeMap.value[config.local_name] = { assignees: config.nodeUserList, type: 1, disabled: !config.allowSelection }
					break
				}
				/*case 3: {
					// 条件审批
					console.error('条件审批')
					break
				}
				case 4: {
					// 条件分支
					console.error('条件分支')
					break
				}
				case 5: {
					// 办理子流程
					console.error('办理子流程')
					break
				}
				case 6: {
					// 定时器在务
					console.error('定时器在务')
					break
				}
				case 7: {
					// 触发器在务
					console.error('触发器在务')
					break
				}*/
			}
			_list.push(config)
		}
		return _list
	}, list)
}
const processTimelineList = computed(() => {
	return packageProcess(modelContentConfig.value)
})
// window.assigneeMap = assigneeMap
// window.processChecked = processChecked
// watchEffect(() => {
// 	console.error(processTimelineList.value, 'processTimelineList')
// })
validateForm.value.loading = true
Promise.all([
	/*model.processListNodeMapApi(props.record.processId).then((res: any) => {
		console.error('旧 processListNodeMapApi  modelContent_config', res)
		// localProcessData.value = res
	}),*/
	model.processDetailApi(props.record.processId).then((res: any) => {
		let modelContent_config = {}
		try {
			console.log(JSON.parse(res.modelContent), 'modelContent')
			const modelContent = JSON.parse(res.modelContent)
			modelContent_config = modelContent.nodeConfig ?? modelContent.childNode
		} catch (e) {}
		// console.error(modelContent_config, 'modelContent_config')
		modelContentConfig.value = modelContent_config
		cur_processForm_str = res.processForm || '{}'
		// const x = JSON.parse(cur_processForm_str)
		// x[0].validate = [{ required: true, message: '请输入商品简介', trigger: 'blur' }]

		// processForm 动态表单
		// validateForm.value.rule = [...JSON.parse(cur_processForm_str) /*, { ...workflowItem, value: modelContent_config }*/ /*, { type: 'input', field: 'test_3' }*/]
		const { formStructure } = JSON.parse(cur_processForm_str)
		EReditorRef.value.setData(formStructure)
		// validateForm.value.rule = JSON.parse(cur_processForm_str)
	})
]).finally(() => {
	validateForm.value.loading = false
})
</script>
<style lang="scss">
.local-launch_drawer-wrap {
	.el-drawer__header {
		display: flex;
		padding: 16px 24px;
		align-items: center;
		justify-content: space-between;
		background-color: var(--el-color-info-light-9);
		text-align: left;
		/* margin-right: 0; */
		margin-bottom: 0;
	}
	.el-drawer__close-btn {
		padding: 0;
		margin-right: -12px;
	}
	.el-drawer__body {
		position: relative;
		display: flex;
		flex-direction: column;
	}
	.el-drawer__footer {
		border-top: 1px solid var(--el-border-color-lighter);
		padding: 12px 24px;
	}
	.local_loading {
		position: absolute;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		z-index: 999;
		background: rgba(0, 0, 0, 0.05);
	}
}
</style>
<style scoped lang="scss">
.info-wrap {
	//display: flex;
	.form-wrap {
		flex: 1;
	}
	.timeline-wrap {
		//margin-left: 8px;
		flex-shrink: 0;
		padding-left: 60px;
		//padding: 0;
		//width: 360px;
	}

	// 修改everright 表单的样式
	.self-Everright-formEditor {
		:deep(.Everright-formEditor-selectElement) {
			padding: 0px 16px;
		}
	}
}
</style>
