<template>
	<div class="form">
		<el-form ref="form" :model="form" label-width="100px">
			<el-form-item label="出票人名称" style="width: 500px;" prop="name">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="账号" style="width: 500px;" prop="bankAccount">
				<el-input v-model="form.bankAccount"></el-input>
			</el-form-item>
			<el-form-item label="开户行名称" style="width: 500px;" prop="bankName">
				<el-input v-model="form.bankName"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">立即提交</el-button>
				<el-button type="primary" @click="resetForm('form')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					bankAccount: '',
					bankName: '',
				}
			}
		},
		mounted() {

		},
		methods: {
			onSubmit() {
				this.$request({
					url: '/api/Drawer',
					method: 'post',
					data: this.form
				}).then((res) => {
					this.$message("添加成功!")
					this.$router.push({
						path: 'index'
					})
				})
			},
			resetForm(form) {
				this.$refs[form].resetFields();
			}
		},
	}
</script>

<style lang="scss">
	.form {
		margin-top: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.el-form-item:last-child {
		display: flex;
		justify-content: space-between;
	}
</style>
