<template>
	<a-form
		:label-col="useUpdateMethod.formLabelCol"
		:model="formState"
		:wrapper-col="useUpdateMethod.formWrapperCol"
		autocomplete="off"
		name="basic"
		@finish="onFinish"
		@finishFailed="useUpdateMethod.formFail"
	>
		<base-form-item v-for="item of fields" :key="item.name" v-model:value="formState[item.name]" v-bind="item" />
		<a-form-item :wrapper-col="useUpdateMethod.formActionCol">
			<a-button html-type="submit" type="primary">确定</a-button>
			<a-button class="formButton" @click="useUpdateMethod.handleCancel()">取消</a-button>
		</a-form-item>
	</a-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import requestMethod from '../../../api/system-log/backup-file'
import { updateMethod } from '../../../components/form/method'
import { QueryObjectType } from '../../../http/request-model'
import { LogBackupFile, LogBackupFileDTO } from '../../../entity/system-log/log-backup-file'
import { ResultModel } from '../../../http/result-model'
import { messageMethod } from '../../../utils/message-util'
import BaseFormItem from '../../../components/form-item/BaseFormItem.vue'
import fields from '../../../views/system-log/backup-file/fields'
// 操作页面的公用方法
const useUpdateMethod = updateMethod()

// 实例化表单
const formState = reactive<LogBackupFileDTO>({})

// 提交成功表单
const onFinish = async (value: LogBackupFileDTO) => {
	// 提交新增表单
	const { message }: ResultModel<LogBackupFile> = await requestMethod.add({ ...(value as unknown as QueryObjectType) })
	// 消息提示
	messageMethod.success(message)
	// 关闭弹框，并刷新列表数据
	useUpdateMethod.handleSave()
}
</script>

<style scoped>
.formButton {
	margin-left: 0.625rem;
}
</style>
