// 流程管理 - 流程设计 - 用户任务节点 - 右侧人员面板点击展示用户 - 关联应用 -
用户选择
<template>
	<a-tabs @change="onTabsChange">
		<!-- 角色tab（岗位） -->
		<a-tab-pane
			v-if="!isStartEventNode"
			:key="UsersConstant.userCategory.posts.value"
			:tab="UsersConstant.userCategory.posts.label"
		>
			<user-posts-list
				:show-data-list="usersData"
				:depts-lists-option="deptsListsOption"
				@on-users-posts-confirm="onPostsUsersSelect"
			/>
		</a-tab-pane>
		<!-- 部门tab -->
		<a-tab-pane
			v-if="!isStartEventNode"
			:key="UsersConstant.userCategory.dept.value"
			:tab="UsersConstant.userCategory.dept.label"
		>
			<user-task-dept-list
				:show-data-list="usersData"
				:depts-lists-option="deptsListsOption"
				@on-users-dept-job-confirm="onDeptUsersJobSelect"
				@on-users-dept-confirm="onDeptUsersSelect"
			/>
		</a-tab-pane>
		<!-- 用户tab -->
		<a-tab-pane
			:key="UsersConstant.userCategory.rolesUsers.value"
			:tab="UsersConstant.userCategory.rolesUsers.label"
		>
			<user-task-roles-users-list
				:show-data-list="usersData"
				:depts-lists-option="deptsListsOption"
				:confirm-users-tab-visible="confirmUsersModalVisible"
				@on-users-confirm="onUsersSelect"
			/>
		</a-tab-pane>
		<!-- 角色tab -->
		<!-- <a-tab-pane
			:key="UsersConstant.userCategory.roles.value"
			:tab="UsersConstant.userCategory.roles.label"
		>
			<user-task-roles-list
				:show-data-list="usersData"
				@on-users-role-confirm="onRoleUsersSelect"
			/>
		</a-tab-pane> -->
		<!-- 关系tab -->
		<a-tab-pane
			v-if="!isStartEventNode"
			:key="UsersConstant.userCategory.relations.value"
			:tab="UsersConstant.userCategory.relations.label"
		>
			<user-relations-list
				:show-data-list="usersData"
				@on-users-relations-confirm="onRelationsSelect"
			/>
		</a-tab-pane>
	</a-tabs>
</template>
<script lang="ts">
import router from '@/router'
import { getI18n } from '@/utils/i18n'
import { defineComponent, ref, watch, PropType } from 'vue'
import { UsersConstant } from '@/utils/constant'
import style from './index.module.less'

import { arrayToTree } from '@/utils/tool/translateValue'
import { RequestResult } from '@/utils/request/model'
import { GetDepartmentsListParamsModel } from '@/api/user-management/model'
import { getDepartmentsListApi } from '@/api/user-management'

import { UsersModel } from '@/types/user'

import UserTaskRolesUsersList from '@/views/design/components/components/UserTaskRolesUsersList/UserTaskRolesUsersList.vue'
import UserTaskDeptList from '@/views/design/components/components/UserTaskDeptList/UserTaskDeptList.vue'
import UserPostsList from '@/views/design/components/components/UserPostsList/UserPostsList.vue'
// import UserTaskRolesList from '@/views/design/components/components/UserTaskRolesList/UserTaskRolesList.vue'
import UserRelationsList from '@/views/design/components/components/UserRelationsList/UserRelationsList.vue'

export default defineComponent({
	components: {
		UserTaskRolesUsersList,
		UserTaskDeptList,
		UserPostsList,
		// UserTaskRolesList,
		UserRelationsList,
	},
	props: {
		// 操作确认弹出层是否展示
		confirmUsersModalVisible: {
			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: () => {},
		},
		// 开始节点，设置抄送人时  只显示用户
		isStartEventNode: {
			type: Boolean,
			required: false,
			default: false,
		},
	},
	emits: [
		'confirm-add-modal-refresh',
		'confirm-add-modal-cancel',
		'design-users-modal-update',
		'design-dept-users-modal-update',
		'design-dept-users-job-modal-update',
		'design-role-users-modal-update',
		'design-relations-modal-update',
		'design-posts-modal-update',
	],
	setup(props, context) {
		// const usersDataTemps = ref()

		// 弹窗是否展示
		let confirmModalVisibleValue = ref(props.confirmUsersModalVisible)

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

		// 当前选择的tab
		const currentSelectTab = ref<string>(
			UsersConstant.userCategory.rolesUsers.label
		)
		// tab切换
		const onTabsChange = (val: string) => {
			currentSelectTab.value = val
		}

		// 用户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[]>([])

		// 用户tab
		const onUsersSelect = (val: UsersModel[]) => {
			usersList.value = [...val]
			context.emit('design-users-modal-update', usersList.value)
		}
		// 部门tab
		// 复选的组织树 数据
		const onDeptUsersSelect = (val: UsersModel[]) => {
			deptsList.value = [...val]
			context.emit('design-dept-users-modal-update', deptsList.value)
		}
		// 通过组织树获取的 职务数据
		const onDeptUsersJobSelect = (val: UsersModel[]) => {
			deptsJobList.value = [...val]
			context.emit(
				'design-dept-users-job-modal-update',
				deptsJobList.value
			)
		}

		// 关系tab
		const onRelationsSelect = (val: UsersModel[]) => {
			relationsList.value = [...val]
			context.emit('design-relations-modal-update', relationsList.value)
		}

		// 角色tab
		// const onRoleUsersSelect = (val: UsersModel[]) => {
		// 	rolesList.value = [...val]
		// 	context.emit('design-role-users-modal-update', rolesList.value)
		// }

		// 岗位tab
		const onPostsUsersSelect = (val: UsersModel[]) => {
			postsList.value = [...val]
			context.emit('design-posts-modal-update', postsList.value)
		}

		// 获取部门列表
		const deptsListsLoading = ref<boolean>(false)
		let deptsListsOption = ref()
		const getDeptLists = async () => {
			let params: GetDepartmentsListParamsModel = {
				per_page: -1,
			}
			deptsListsLoading.value = true
			const res: RequestResult = await getDepartmentsListApi(
				params
			).finally(() => {
				deptsListsLoading.value = false
			})
			let _data = arrayToTree(res.data.data, '', 'parentId')
			deptsListsOption.value = JSON.parse(
				JSON.stringify(_data)
					.replace(/name/g, 'title')
					.replace(/id/g, 'key')
			)
		}

		watch(
			() => props.confirmUsersModalVisible,
			newValue => {
				confirmModalVisibleValue.value = newValue
				getDeptLists()
			},
			{ deep: true, immediate: true }
		)

		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 = []
				}
			}
		)

		return {
			style,
			confirmModalVisibleValue,
			submitButtonLoading,
			router,
			UsersConstant,
			currentSelectTab,
			getI18n,
			onTabsChange,
			onUsersSelect,
			onDeptUsersSelect,
			onDeptUsersJobSelect,
			// onRoleUsersSelect,
			onRelationsSelect,
			onPostsUsersSelect,
			deptsListsOption,
		}
	},
})
</script>
