<template>
	<a-modal
		v-model:visible="confirmEditPwdVisible"
		:confirm-loading="submitButtonLoading"
		:closable="false"
		:title="
			getI18n(
				'system',
				dataSourceId
					? 'SYSTEM_Edit_Data_Source'
					: 'SYSTEM_Add_Data_Source'
			)
		"
		:maskClosable="false"
		:width="800"
	>
		<a-form
			:model="formState"
			:label-col="{ span: 6 }"
			:wrapper-col="{ span: 18 }"
			:rules="formRules"
			ref="formRef"
		>
			<!-- 密码 -->
			<a-form-item
				:label="getI18n('system', 'SYSTEM_Data_Source_Password')"
				name="password"
			>
				<a-input
					autoComplete="off"
					v-model:value="formState.password"
					:placeholder="
						getI18n('common', 'Common_Please_Enter', [
							getI18n('system', 'SYSTEM_Data_Source_Password'),
						])
					"
				/>
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button
				type="primary"
				:loading="submitButtonLoading"
				@click="onSubmitButtonClick"
			>
				<save-outlined />
				<!-- 确定 -->
				{{ getI18n('common', 'Common_Certain') }}
			</a-button>
			<a-button
				@click="
					() => {
						$emit('confirm-modal-cancel'), initFormStateData()
					}
				"
				:loading="submitButtonLoading"
			>
				<close-outlined />
				<!-- 取消 -->
				{{ getI18n('common', 'Common_Remove') }}
			</a-button>
		</template>
	</a-modal>
</template>
<script lang="ts">
import {
	getDataSourceByIdApi,
	saveDataSourceApi,
	updateDataSourceApi,
} from '@/api/data-source'
// import { getDataSourceListApi, getDataTableByIdApi } from '@/api/data-source'
import router from '@/router'
import { DataSourceModel } from '@/types/dataSource'
import { getI18n } from '@/utils/i18n'
import { RequestResult } from '@/utils/request/model'
import { message } from 'ant-design-vue'
import { defineComponent, reactive, ref, watch } from 'vue'
import { CommonConstant } from '@/utils/constant/index'
import { encode } from 'js-base64'
import {CloseOutlined,SaveOutlined} from '@ant-design/icons-vue'

export default defineComponent({
	components: {
		CloseOutlined,
		SaveOutlined,
	},
	props: {
		// 操作确认弹出层是否展示
		confirmModalVisible: {
			type: Boolean,
			required: false,
			default: false,
		},
		// 编辑所需要的id
		dataSourceId: {
			type: String,
			default: '',
		},
	},
	emits: ['confirm-modal-cancel', 'confirm-modal-refresh'],
	setup(props, context) {
		// 弹窗是否展示
		let confirmEditPwdVisible = ref(props.confirmModalVisible)
		const pageLoading = ref<boolean>(false)
		const submitButtonLoading = ref<boolean>(false)
		const formRef = ref()
		const formState = reactive<DataSourceModel>({})
		// 校验规则
		const formRules = {
			// 密码
			password: [
				{
					required: true,
					message: getI18n('common', 'Common_Please_Enter', [
						getI18n('system', 'SYSTEM_Data_Source_Password'),
					]),
					trigger: 'change',
				},
			],
			
		}
		// 类型改变
		const onTypeChange = (val: string) => {
			formState.type = val
			formRef.value.validate('type')
		}
		// 初始化表单
		const initFormStateData = () => {
			formState.name = undefined
			formState.type = undefined
			formState.url = undefined
			formState.username = undefined
			formState.password = undefined
			formState.remark = undefined
			formRef.value && formRef.value.resetFields()
		}
		
		// 提交按钮被点击
		const onSubmitButtonClick = () => {
			formRef.value.validate().then(async () => {
				// 参数
				const params: DataSourceModel = {
					name: formState.name,
					type: formState.type,
					url: formState.url,
					username: formState.username,
					password: encode(formState.password),
					remark: formState.remark,
				}
				if (props.dataSourceId) {
					params.id = props.dataSourceId
					submitButtonLoading.value = true
					params.password = params.password
					await updateDataSourceApi(params).finally(() => {
						submitButtonLoading.value = false
					})
				} else {
					submitButtonLoading.value = true
					await saveDataSourceApi(params).finally(() => {
						submitButtonLoading.value = false
					})
				}
				message.success(getI18n('common', 'Common_Success'))
				context.emit('confirm-modal-cancel')
				initFormStateData()
				confirmEditPwdVisible.value = false
				context.emit('confirm-modal-refresh')
			})
		}

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

		return {
			confirmEditPwdVisible,
			pageLoading,
			submitButtonLoading,
			formRef,
			formState,
			formRules,
			router,
			CommonConstant,
			getI18n,
			onSubmitButtonClick,
			initFormStateData,
			onTypeChange,
		}
	},
})
</script>
