// 流程管理 - 流程设计 - 用户任务节点 - 右侧表单 - 表单key面板点击 各应用
<template>
	<a-modal
		v-model:visible="confirmModalVisibleValue"
		:confirm-loading="submitButtonLoading"
		:title="getI18n('system', 'SYSTEM_Process_FormKeySelect')"
		:closable="true"
		:maskClosable="false"
		@cancel="onResetButtonClick()"
		:width="'80%'"
	>
		<a-row>
			<a-col :span="24">
				<div :class="style['current-formKey-select-show']">
					{{ currentSelformKeyText }}
				</div>
			</a-col>
		</a-row>

		<a-tabs @change="onTabsChange" :activeKey="activeTabKey">
			<!-- 当前应用 -->
			<a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title">
				<design-form-key-tab
					:form-key-tab-modal-visible="confirmModalVisible"
					:current-form-data-select="currentFormDataSelect"
					:is-clear-select="clearForm"
					@confirm-form-key-select="onDesignFormKeyTabSelect"
				/>
			</a-tab-pane>
			<!-- 表单引擎 -->
			<a-tab-pane
				:key="ProcessConstant.FormEngineKeyTab.value"
				:tab="ProcessConstant.FormEngineKeyTab.label"
			>
				<design-form-engine-key-tab
					:form-key-tab-modal-visible="confirmModalVisible"
					:current-form-data-select="currentFormDataSelect"
					:is-clear-select="clearEngineForm"
					@confirm-form-key-select="onDesignFormKeyTabSelect"
				/>
			</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' //  PropType, computed, reactive
import style from './index.module.less'
import {
	DesignFormKeyTab,
	DesignFormEngineKeyTab,
} from '@/views/design/components/DesignFormKey/components'
import { ProcessConstant } from '@/utils/constant'
import { CloseOutlined, SaveOutlined } from '@ant-design/icons-vue'

export default defineComponent({
	components: {
		DesignFormKeyTab,
		DesignFormEngineKeyTab,
		CloseOutlined,
		SaveOutlined,
	},
	props: {
		// 操作确认弹出层是否展示
		confirmModalVisible: {
			type: Boolean,
			required: false,
			default: false,
		},

		// 当前选中的表单
		currentFormDataSelect: {
			type: Array as PropType<
				{
					id?: string
					name?: string
					type?: string
					tag?: string
				}[]
			>,
			required: false,
			default: () => [],
		},
	},
	emits: ['confirm-add-modal-refresh', 'confirm-add-modal-cancel'],
	setup(props, context) {
		const panes = ref<
			{
				title?: string
				key?: string
			}[]
		>([
			{
				title: '当前应用',
				key: 'currentApplication',
			},
		])

		// 弹窗是否展示
		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 currentSelformKeyObj =
			ref<{ id: string; name: string; tag?: string }[]>()
		const currentSelformKeyText = ref<string>()

		// 清空表单选择， 不能混着选 当前应用和表单引擎
		const clearForm = ref<boolean>(false)
		const clearEngineForm = ref<boolean>(false)

		// 取消按钮
		const onResetButtonClick = () => {
			context.emit('confirm-add-modal-cancel')
			confirmModalVisibleValue.value = false
			activeTabKey.value = panes.value[0].key
			// currentSelformKeyObj.value = undefined
			// currentSelformKeyText.value = undefined
		}

		// 确定按钮被点击
		const onSubmitButtonClick = () => {
			context.emit(
				'confirm-add-modal-refresh',
				currentSelformKeyObj.value,
				activeTabKey.value
			)
			onResetButtonClick()
		}

		// 各应用下表单列表 单选的表单id
		const onDesignFormKeyTabSelect = (obj: any) => {
			currentSelformKeyObj.value = [...obj]
			currentSelformKeyText.value = obj
				.map(v => {
					return v.name
				})
				?.toString()

			if (activeTabKey.value === ProcessConstant.FormEngineKeyTab.value) {
				clearForm.value = true
				clearEngineForm.value = false
			} else {
				clearForm.value = false
				clearEngineForm.value = true
			}
		}

		watch(
			() => props.confirmModalVisible,
			newValue => {
				confirmModalVisibleValue.value = newValue
				if (newValue) {
					props.currentFormDataSelect &&
						(currentSelformKeyText.value =
							props.currentFormDataSelect
								?.map(v => {
									return v.name
								})
								?.toString())
				}
			},
			{ deep: true, immediate: true }
		)

		return {
			style,
			panes,
			activeTabKey,
			confirmModalVisibleValue,
			submitButtonLoading,
			currentSelformKeyText,
			ProcessConstant,
			getI18n,
			onSubmitButtonClick,
			onResetButtonClick,
			onTabsChange,
			onDesignFormKeyTabSelect,

			clearForm,
			clearEngineForm,
		}
	},
})
</script>