// 流程管理 - 流程设计 - 用户任务节点 - 右侧表单 - 资源配置面板点击
<template>
	<a-modal
		v-model:visible="confirmModalVisibleValue"
		:confirm-loading="submitButtonLoading"
		:title="getI18n('system', 'SYSTEM_Process_FormFieldsSelect')"
		:closable="true"
		:maskClosable="false"
		@cancel="onResetButtonClick()"
		:width="'80%'"
	>
		<a-tabs
			v-if="
				selectFormData &&
				Array.isArray(selectFormData) &&
				selectFormData.length > 0
			"
			@change="onTabsChange"
			:activeKey="activeTabKey"
		>
			<a-tab-pane
				v-for="item in selectFormData"
				:key="`${item.type}:${item.id || ''}`"
				:tab="item.name"
			>
				<design-form-fields
					:current-select-tab-key="activeTabKey"
					:select-form-fields-id="`${item.type}:${item.id || ''}`"
					:is-form-engine="isFormEngine"
					:select-form-fields-data="formItemList"
					:form-fields-tab-modal-visible="confirmModalVisibleValue"
					@confirm-form-fields-refresh="onRefreshClick"
				/>
			</a-tab-pane>
		</a-tabs>

		<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 { defineComponent, ref, watch, PropType } from 'vue'
import { FormItemModel } from '@/types/formitem'
import { message } from 'ant-design-vue'
import {
	getRandomString,
	deepClone,
	validatenull,
} from '@/utils/tool/translateValue'
import { CloseOutlined, SaveOutlined } from '@ant-design/icons-vue'

import DesignFormFields from './components/DesignFormFields.vue'

export default defineComponent({
	components: {
		CloseOutlined,
		SaveOutlined,
		DesignFormFields,
	},
	props: {
		// 操作确认弹出层是否展示
		confirmModalVisible: {
			type: Boolean,
			required: false,
			default: false,
		},
		selectFormData: {
			type: Array as PropType<
				{
					id?: string
					name?: string
					type?: string
					tag?: string
				}[]
			>,
			required: false,
			default: () => [],
		},
		// 已选择的资源配置
		selectFormFieldsData: {
			type: Array as PropType<FormItemModel[]>,
			required: false,
			default: () => [],
		},
		// 用来判断使用表单引擎的详情查询接口还是 自己系统的详情查询接口
		isFormEngine: {
			type: Boolean,
			required: false,
			default: false,
		},
	},
	emits: ['confirm-add-modal-refresh', 'confirm-add-modal-cancel'],
	setup(props, context) {
		// 弹窗是否展示
		let confirmModalVisibleValue = ref(props.confirmModalVisible)
		// 按钮loading
		const submitButtonLoading = ref<boolean>(false)
		// 当前选择的tab
		const activeTabKey = ref<string>()
		// tab切换
		const onTabsChange = (val: string) => {
			activeTabKey.value = val
		}

		// 表单项列表数据
		const formItemList = ref<FormItemModel[]>([])

		// 资源配置确认
		const onRefreshClick = (data: FormItemModel[]) => {
			let _data: FormItemModel[] = []
			if (!validatenull(data)) {
				_data = data.filter(f => f.id && f.formName)
			}
			formItemList.value = [...formItemList.value, ..._data]
			// 去重
			var obj = {} // 利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数，第二个参数是acc的初始值   reduceRight
			formItemList.value = formItemList.value
				.reverse()
				.reduce((item: FormItemModel[], next: FormItemModel) => {
					obj[next.id!]
						? ''
						: (obj[next.id!] = true && item.push(next))
					return item
				}, [])
		}

		// 取消按钮
		const onResetButtonClick = () => {
			confirmModalVisibleValue.value = false
			context.emit('confirm-add-modal-cancel')
		}
		// 确定按钮被点击
		const onSubmitButtonClick = () => {
			context.emit('confirm-add-modal-refresh', formItemList.value)
			message.success(getI18n('common', 'Common_Success'))
		}

		watch(
			() => props.confirmModalVisible,
			newValue => {
				confirmModalVisibleValue.value = newValue
				props.selectFormData.length > 0
					? (activeTabKey.value = `${props.selectFormData[0].type}:${props.selectFormData[0].id}`)
					: ''
				formItemList.value = deepClone(props.selectFormFieldsData)
				!newValue && (activeTabKey.value = undefined)
			},
			{ deep: true, immediate: true }
		)

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

			getRandomString,

			activeTabKey,
			onTabsChange,
			onRefreshClick,
			formItemList,
		}
	},
})
</script>