// 编辑Bpmn源文件
<template>
	<a-modal
		v-model:visible="confirmModalVisibleValue"
		:confirm-loading="submitButtonLoading"
		:title="getI18n('system', 'SYSTEM_Process_EditSourceFile')"
		:closable="true"
		:maskClosable="false"
		@cancel="$emit('confirm-edit-modal-cancel')"
		:width="'90%'"
	>
		<a-textarea
			v-model:value="sourceCode"
			placeholder="Autosize height with minimum and maximum number of lines"
			:auto-size="{ minRows: 10, maxRows: 28 }"
		/>
		<!-- <div>
			{{ sourceCode }}
		</div> -->
		<template #footer>
			<!-- 确定 -->
			<a-button
				type="primary"
				:loading="submitButtonLoading"
				@click="onSubmitButtonClick"
			>
				{{ getI18n('common', 'Common_Certain') }}
			</a-button>
			<!-- 取消 -->
			<a-button
				@click="onResetButtonClick"
				:loading="submitButtonLoading"
			>
				{{ getI18n('common', 'Common_Remove') }}
			</a-button>
		</template>
	</a-modal>
</template>
<script lang="ts">
import router from '@/router'
import { getI18n } from '@/utils/i18n'
import { defineComponent, ref, watch } from 'vue' // PropType, reactive

export default defineComponent({
	name: 'DesignUserTimerDefinitionModal',
	components: {},
	props: {
		// 操作确认弹出层是否展示
		confirmModalVisible: {
			type: Boolean,
			required: false,
			default: false,
		},
		// bpmn代码
		sourceBpmnCode: {
			type: String,
			required: false,
			default: '',
		},
	},
	emits: ['confirm-edit-modal-refresh', 'confirm-edit-modal-cancel'],
	setup(props, context) {
		//
		const sourceCode = ref<string>()
		// 弹窗是否展示
		let confirmModalVisibleValue = ref(props.confirmModalVisible)

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

		// 取消按钮
		const onResetButtonClick = () => {
			context.emit('confirm-edit-modal-cancel')
			sourceCode.value = undefined
			confirmModalVisibleValue.value = false
		}

		// 确定按钮被点击
		const onSubmitButtonClick = () => {
			context.emit('confirm-edit-modal-refresh', sourceCode.value)
			sourceCode.value = undefined
			confirmModalVisibleValue.value = false
		}

		watch(
			() => props.confirmModalVisible,
			newValue => {
				confirmModalVisibleValue.value = newValue
				newValue && (sourceCode.value = props.sourceBpmnCode)
			},
			{ deep: true, immediate: true }
		)

		watch(
			() => props.sourceBpmnCode,
			newValue => {
				sourceCode.value = newValue
			},
			{ deep: true, immediate: true }
		)

		return {
			// style,
			sourceCode,
			confirmModalVisibleValue,
			submitButtonLoading,
			router,
			getI18n,
			onSubmitButtonClick,
			onResetButtonClick,
		}
	},
})
</script>