// 定时器时间设置弹框
<template>
	<a-modal
		v-model:visible="confirmModalVisibleValue"
		:confirm-loading="submitButtonLoading"
		:title="modelText"
		:closable="false"
		:maskClosable="false"
		@cancel="$emit('confirm-add-modal-cancel')"
		:width="1200"
	>
		<a-tabs @change="onTabsChange" class="custom-timer-modal">
			<!-- 相对时间 -->
			<a-tab-pane key="1" tab="相对时间">
				<a-row>
					<a-col :span="21">
						<a-row>
							<a-col :span="6">
								<a-input-number
									style="
										width: 65%;
										margin-right: 0.5em;
										padding-right: 1em;
									"
									:precision="0"
									:min="0"
									v-model:value="timerData.days"
								/>天
							</a-col>
							<a-col :span="6">
								<a-input-number
									style="
										width: 65%;
										margin-right: 0.5em;
										padding-right: 1em;
									"
									:precision="0"
									:min="0"
									:max="23"
									v-model:value="timerData.hours"
								/>小时
							</a-col>
							<a-col :span="6">
								<a-input-number
									style="
										width: 65%;
										margin-right: 0.5em;
										padding-right: 1em;
									"
									:precision="0"
									:min="0"
									:max="59"
									v-model:value="timerData.minutes"
								/>分
							</a-col>
							<a-col :span="6">
								<a-input-number
									style="
										width: 65%;
										margin-right: 0.5em;
										padding-right: 1em;
									"
									:precision="0"
									:min="0"
									:max="59"
									v-model:value="timerData.seconds"
								/>秒
							</a-col>
						</a-row>
					</a-col>
					<!-- <a-col :span="4">
						<a-input-number
							style="width: 85%"
							:maxLength="100"
							:precision="0"
							:min="0"
							:max="9999"
							v-model:value="timerData.years"
						/>年
					</a-col> -->
					<!-- <a-col :span="4">
						<a-input-number
							style="width: 85%;"
							:maxLength="100"
							:precision="0"
							:min="0"
							:max="9999"
							v-model:value="timerData.months"
						/>月
					</a-col> -->
				</a-row>
			</a-tab-pane>
			<!-- 流程变量 -->
			<!-- <a-tab-pane
				:key="UsersConstant.userCategory.dept.value"
				:tab="UsersConstant.userCategory.dept.label"
			>
			</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 router from '@/router'
import { getI18n } from '@/utils/i18n'
import { message } from 'ant-design-vue'
import { defineComponent, ref, watch, computed, reactive } from 'vue' // PropType, reactive
import { UsersConstant } from '@/utils/constant'
import { getViewText } from '@/utils/tool/translateValue'
import { CloseOutlined, SaveOutlined } from '@ant-design/icons-vue'

export default defineComponent({
	name: 'DesignUserTimerDefinitionModal',
	components: {
		CloseOutlined,
		SaveOutlined,
	},
	props: {
		// 操作确认弹出层是否展示
		confirmModalVisible: {
			type: Boolean,
			required: false,
			default: false,
		},
		// 定时器时间
		timerDefinitionData: {
			type: String,
			required: false,
			default: '',
		},
		// 弹窗标题
		modelText: {
			type: String,
			required: false,
			default: getI18n('system', 'SYSTEM_Process_TimeoutSetting'),
		},
	},
	emits: ['confirm-add-modal-refresh', 'confirm-add-modal-cancel'],
	setup(props, context) {
		// 超市时间
		const timerData = reactive<{
			years?: string
			// months?: string
			days?: string
			hours?: string
			minutes?: string
			seconds?: string
		}>({})

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

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

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

		// 取消按钮
		const onResetButtonClick = () => {
			timerData.years = undefined
			// timerData.months = undefined
			timerData.days = undefined
			timerData.hours = undefined
			timerData.minutes = undefined
			timerData.seconds = undefined

			currentSelectTab.value = ''
			context.emit('confirm-add-modal-cancel')
			confirmModalVisibleValue.value = false
		}

		const timerDataStr = computed(() => {
			// ${timerData.months?timerData.months+'M':''}
			// ${timerData.years ? timerData.years + 'Y' : ''}
			return `P${timerData.days ? timerData.days + 'D' : ''}T${
				timerData.hours ? timerData.hours + 'H' : ''
			}${timerData.minutes ? timerData.minutes + 'M' : ''}${
				timerData.seconds ? timerData.seconds + 'S' : ''
			}`
		})

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

		const strToValue = (str: string[]) => {
			let tempStr = ref<string>('')
			str.map(v => {
				let _keys = getViewText(UsersConstant.timerKeys, v)
				if (_keys) {
					timerData[_keys] = tempStr.value
					tempStr.value = ''
					// str.splice(i)
				} else {
					tempStr.value += v
				}
			})
		}

		watch(
			() => props.confirmModalVisible,
			newValue => {
				confirmModalVisibleValue.value = newValue
				if (newValue) {
					let _str = props.timerDefinitionData
						.split('')
						.filter(f => f != 'P' && f != 'T')
					strToValue(_str)
				}
			},
			{ deep: true, immediate: true }
		)

		watch(
			() => props.timerDefinitionData,
			newValue => {
				let _str = newValue.split('').filter(f => f != 'P' && f != 'T')
				strToValue(_str)
			},
			{ deep: true, immediate: true }
		)

		return {
			// style,
			confirmModalVisibleValue,
			submitButtonLoading,
			router,
			UsersConstant,
			currentSelectTab,
			getI18n,
			onSubmitButtonClick,
			onResetButtonClick,
			onTabsChange,

			timerData,
		}
	},
})
</script>