// 流程管理 - 流程设计 - 用户任务节点 - 右侧人员面板点击展示用户 - 中间页
<template>
	<a-modal
		v-model:visible="confirmModalVisibleValue"
		:confirm-loading="submitButtonLoading"
		:title="getI18n('system', 'SYSTEM_Process_UsersSelect')"
		:closable="true"
		:maskClosable="false"
		@cancel="onResetButtonClick()"
		:width="'80%'"
	>
		<a-row>
			<a-col :span="24">
				<div :class="style['user-show']">
					{{ currentUsersSelectValue }}
				</div>
			</a-col>
		</a-row>

		<design-users-select
			:is-start-event-node="isStartEventNode"
			:users-data="usersData"
			:confirm-users-modal-visible="confirmModalVisible"
			@design-users-modal-update="e => onUsersChange(e)"
			@design-dept-users-modal-update="e => onDeptUsersChange(e)"
			@design-dept-users-job-modal-update="e => onDeptUsersJobChange(e)"
			@design-role-users-modal-update="e => onRoleUsersChange(e)"
			@design-relations-modal-update="e => onRelationsChange(e)"
			@design-posts-modal-update="e => onPostsChange(e)"
		/>

		<template #footer>
			<a-button
				type="primary"
				:loading="submitButtonLoading"
				@click="onSubmitButtonClick"
			>
				<save-outlined />
				{{ getI18n('common', 'Common_Certain') }}
			</a-button>
			<a-button
				@click="onResetButtonClick"
				:loading="submitButtonLoading"
			>
				<close-outlined />
				{{ getI18n('common', 'Common_Remove') }}
			</a-button>
		</template>
	</a-modal>
</template>
<script lang="ts">
import { getI18n } from '@/utils/i18n'
import { message } from 'ant-design-vue'
import { defineComponent, ref, watch, PropType, computed, reactive } from 'vue' //  reactive, computed

import style from './index.module.less'
import { UsersModel } from '@/types/user'
import { UsersConstant } from '@/utils/constant'
import { CloseOutlined, SaveOutlined } from '@ant-design/icons-vue'

import DesignUsersSelect from '@/views/design/components/DesignUsersSelect/DesignUsersSelect.vue'

export default defineComponent({
	components: {
		DesignUsersSelect,
		CloseOutlined,
		SaveOutlined,
	},
	props: {
		// 操作确认弹出层是否展示
		confirmModalVisible: {
			type: Boolean,
			required: false,
			default: false,
		},
		// 默认显示的流程Id
		currentDefinitionId: {
			type: String,
			required: false,
			default: '',
		},
		// 开始节点，设置抄送人时  只显示用户
		isStartEventNode: {
			type: Boolean,
			required: false,
			default: false,
		},
		// 选中的用户列表
		usersData: {
			type: Object as PropType<{
				assigneeSelectType: string
				users: {
					id: string
					type?: string
					name?: string
					deptId?: string
					deptName?: string
					value?: string
					relationType?: string
				}[]
			}>,
			required: false,
			default: () => {},
		},
	},
	emits: ['confirm-add-modal-refresh', 'confirm-add-modal-cancel'],
	setup(props, context) {
		// 弹窗是否展示
		let confirmModalVisibleValue = ref(props.confirmModalVisible)

		// 按钮loading
		const submitButtonLoading = ref<boolean>(false)

		const usersDataTemps = ref()
		// 用户tab 选择的人员列表
		const usersList = ref<UsersModel[]>([])
		// 部门tab 选择的人员列表
		const deptsList = ref<UsersModel[]>([])
		const deptsJobList = ref<UsersModel[]>([])
		// 角色tab 选择的人员列表
		const rolesList = ref<UsersModel[]>([])
		// 关系tab 选择的列表
		const relationsList = ref<UsersModel[]>([])
		// 岗位tab 选择的列表
		const postsList = ref<UsersModel[]>([])

		const tabsDataTemp = reactive<
			{
				usersList?: UsersModel[]
				deptsList?: UsersModel[]
				deptsJobList?: UsersModel[]
				rolesList?: UsersModel[]
				relationsList?: UsersModel[]
				postsList?: UsersModel[]
			}[]
		>([])

		// 用户tab
		const onUsersChange = (arr: UsersModel[]) => {
			if (!tabsDataTemp[0]) {
				tabsDataTemp.push({
					usersList: arr.filter(f => {
						return (
							f.type ==
							UsersConstant.userCategory.rolesUsers.category
						)
					}),
				})
			} else {
				tabsDataTemp[0]['usersList'] = [
					...arr.filter(f => {
						return (
							f.type ==
							UsersConstant.userCategory.rolesUsers.category
						)
					}),
				]
			}
			usersList.value = tabsDataTemp
				.map(v => {
					// if(!validatenull(v.usersList)) { return v.usersList } else { return []}
					return v.usersList || []
				})
				.flat()
		}
		// 部门tab
		const onDeptUsersChange = (arr: UsersModel[]) => {
			if (!tabsDataTemp[0]) {
				tabsDataTemp.push({
					deptsList: arr.filter(f => {
						return (
							f.type ==
								UsersConstant.userCategory.dept.category &&
							!f.name
						)
					}),
				})
			} else {
				tabsDataTemp[0]['deptsList'] = [
					...arr.filter(f => {
						return (
							f.type ==
								UsersConstant.userCategory.dept.category &&
							!f.name
						)
					}),
				]
			}
			deptsList.value = tabsDataTemp
				.map(v => {
					return v.deptsList || []
				})
				.flat()
		}
		// 部门tab
		const onDeptUsersJobChange = (arr: UsersModel[]) => {
			if (!tabsDataTemp[0]) {
				tabsDataTemp.push({
					deptsJobList: arr.filter(f => {
						return (
							f.type ==
								UsersConstant.userCategory.dept.category &&
							f.name
						)
					}),
				})
			} else {
				tabsDataTemp[0]['deptsJobList'] = [
					...arr.filter(f => {
						return (
							f.type ==
								UsersConstant.userCategory.dept.category &&
							f.name
						)
					}),
				]
			}
			deptsJobList.value = tabsDataTemp
				.map(v => {
					return v.deptsJobList || []
				})
				.flat()
		}
		// 角色tab
		const onRoleUsersChange = () => {
			// _arr: UsersModel[]
			// if (!tabsDataTemp[0]) {
			// 	tabsDataTemp.push({
			// 		rolesList: arr.filter(f => {
			// 			return (
			// 				f.type == UsersConstant.userCategory.roles.category
			// 			)
			// 		}),
			// 	})
			// } else {
			// 	tabsDataTemp[0]['rolesList'] = [
			// 		...arr.filter(f => {
			// 			return (
			// 				f.type == UsersConstant.userCategory.roles.category
			// 			)
			// 		}),
			// 	]
			// }
			// rolesList.value = tabsDataTemp
			// 	.map(v => {
			// 		return v.rolesList || []
			// 	})
			// 	.flat()
		}
		// 关系tab
		const onRelationsChange = (arr: UsersModel[]) => {
			if (!tabsDataTemp[0]) {
				tabsDataTemp.push({
					relationsList: arr.filter(f => {
						return (
							f.type ==
							UsersConstant.userCategory.relations.category
						)
					}),
				})
			} else {
				tabsDataTemp[0]['relationsList'] = [
					...arr.filter(f => {
						return (
							f.type ==
							UsersConstant.userCategory.relations.category
						)
					}),
				]
			}
			relationsList.value = tabsDataTemp
				.map(v => {
					return v.relationsList || []
				})
				.flat()
		}

		// 岗位tab
		const onPostsChange = (arr: UsersModel[]) => {
			if (!tabsDataTemp[0]) {
				tabsDataTemp.push({
					postsList: arr.filter(f => {
						return (
							f.type == UsersConstant.userCategory.posts.category
						)
					}),
				})
			} else {
				tabsDataTemp[0]['postsList'] = [
					...arr.filter(f => {
						return (
							f.type == UsersConstant.userCategory.posts.category
						)
					}),
				]
			}
			postsList.value = tabsDataTemp
				.map(v => {
					return v.postsList || []
				})
				.flat()
		}

		// 输出字符串
		const computeString = (arr1, arr2, arr3, arr4, arr5, arr6) => {
			return `${arr6.length > 0 ? '【岗位】' : ''}${arr6
				.map(v => {
					if (v.type === UsersConstant.userCategory.posts.category) {
						return v.name
					}
				})
				.filter(f => f)
				?.toString()}${
				arr2.length > 0 || arr3.length > 0 ? '【部门】' : ''
			}${arr2
				.map(v => {
					if (v.type === UsersConstant.userCategory.dept.category) {
						return v.deptName
					}
				})
				.filter(f => f)
				?.toString()}${arr2.length > 0 ? ',' : ''}${arr3
				.map(v => {
					if (v.type === UsersConstant.userCategory.dept.category) {
						return v.deptName + '#' + v.name
					}
				})
				.filter(f => f)
				?.toString()}${arr4.length > 0 ? '【用户】' : ''}${arr4
				.map(v => {
					if (
						v.type ===
						UsersConstant.userCategory.rolesUsers.category
					) {
						return v.name + '/' + v.deptName
					}
				})
				.filter(f => f)
				?.toString()}${arr1.length > 0 ? '【角色】' : ''}${arr1
				.map(v => {
					if (v.type === UsersConstant.userCategory.posts.category) {
						return v.name
					}
				})
				.filter(f => f)
				?.toString()}${arr5.length > 0 ? '【关系】' : ''}${arr5
				.map(v => {
					if (
						v.type === UsersConstant.userCategory.relations.category
					) {
						return v.name
					}
				})
				.filter(f => f)
				?.toString()}`
		}

		// 当前选择的用户 字符串
		const currentUsersSelectValue = computed(() => {
			return computeString(
				rolesList.value,
				deptsList.value,
				deptsJobList.value,
				usersList.value,
				relationsList.value,
				postsList.value
			)
		})

		// 取消按钮
		const onResetButtonClick = () => {
			context.emit('confirm-add-modal-cancel')
			confirmModalVisibleValue.value = false
			usersList.value = []
			deptsList.value = []
			deptsJobList.value = []
			rolesList.value = []
			relationsList.value = []
			postsList.value = []
			usersDataTemps.value = undefined
		}

		// 确定按钮被点击
		const onSubmitButtonClick = () => {
			let params = {
				assigneeSelectType: '1',
			}
			params['users'] = [
				...usersList.value,
				...deptsList.value,
				...deptsJobList.value,
				...rolesList.value,
				...relationsList.value,
				...postsList.value,
			]
			let _str = computeString(
				rolesList.value,
				deptsList.value,
				deptsJobList.value,
				usersList.value,
				relationsList.value,
				postsList.value
			)

			context.emit('confirm-add-modal-refresh', params, _str.trim())
			message.success(getI18n('common', 'Common_Success'))
			onResetButtonClick()
		}

		watch(
			() => props.usersData,
			newValue => {
				usersDataTemps.value = newValue
				if (
					newValue &&
					Array.isArray(newValue.users) &&
					newValue.users.length > 0
				) {
					// 用户tab 选择的人员列表
					usersList.value = newValue?.users.filter(f => {
						return (
							f.type ==
							UsersConstant.userCategory.rolesUsers.category
						)
					})
					// 部门tab 选择的人员列表
					deptsList.value = newValue?.users.filter(f => {
						return (
							f.type ==
								UsersConstant.userCategory.dept.category &&
							!f.name
						)
					})
					deptsJobList.value = newValue?.users.filter(f => {
						return (
							f.type ==
								UsersConstant.userCategory.dept.category &&
							f.name
						)
					})
					// 角色tab 选择的人员列表
					// rolesList.value = newValue?.users.filter(f => {
					// 	return (
					// 		f.type == UsersConstant.userCategory.roles.category
					// 	)
					// })
					// 关系tab 选择的列表
					relationsList.value = newValue?.users.filter(f => {
						return (
							f.type ==
							UsersConstant.userCategory.relations.category
						)
					})
					// 岗位tab 选择的列表
					postsList.value = newValue?.users.filter(f => {
						return (
							f.type == UsersConstant.userCategory.posts.category
						)
					})
				} else {
					usersList.value = []
					deptsList.value = []
					deptsJobList.value = []
					rolesList.value = []
					relationsList.value = []
					postsList.value = []
				}
			}
		)

		watch(
			() => props.confirmModalVisible,
			async newValue => {
				confirmModalVisibleValue.value = newValue
				if (newValue) {
					// await getApplicationTabs()
				}
			},
			{ deep: true, immediate: true }
		)

		return {
			confirmModalVisibleValue,
			submitButtonLoading,
			getI18n,
			onSubmitButtonClick,
			onResetButtonClick,

			style,
			usersDataTemps,
			currentUsersSelectValue,
			onUsersChange,
			onDeptUsersChange,
			onDeptUsersJobChange,
			onRoleUsersChange,
			onRelationsChange,
			onPostsChange,
		}
	},
})
</script>