<template>
	<xn-form-container :title="'新增储备规模'" :width="700" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-form ref="formRef" :model="formData" layout="vertical">
			<div class="box1">
				<div class="box-left">
					<div class="common">
						<div class="title">企业单位</div>
						<a-input class="inputs" v-model:value="formData.name" :disabled="false" placeholder="" allow-clear />
					</div>
					<div class="common">
						<div class="title">库区名称</div>
						<a-input v-model:value="formData.name" :disabled="false" placeholder="" allow-clear />
					</div>
					<div class="common">
						<div class="title">粮食品种</div>
						<a-input v-model:value="formData.name" :disabled="false" placeholder="" allow-clear />
					</div>
					<div class="common">
						<div class="title">粮食性质</div>
						<a-input v-model:value="formData.name" :disabled="false" placeholder="" allow-clear />
					</div>
					<div class="common">
						<div class="title">储备规模计划量</div>
						<a-input v-model:value="formData.name" :disabled="false" placeholder="" allow-clear />
					</div>
				</div>
			</div>

			<div class="btnBox">
				<a-button type="primary" class="primarySele" @click="onSearch"> 保存 </a-button>
			</div>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
		</template>
	</xn-form-container>
</template>
<script lang="js">
	import { ref } from 'vue'
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	export default {
		name: 'FromName',
		components: {},
		setup(props, { emit }) {
			const formRef = ref()
			const formData = ref({
				name: ''
			})
			// 抽屉状态
			const visible = ref(false)
			// 打开抽屉
			const onOpen = (record, flag) => {
				visible.value = flag
			}
			const onClose = () => {
				// formRef.value.resetFields()
				// formData.value = {}
				visible.value = false
			}
			return { onOpen, visible, formRef, onClose, formData }
		}
	}
</script>
<style lang="less" scoped>
	.box1 {
		display: flex;
		align-items: center;
		justify-content: center;

		.box-left {
			width: 500px;
			justify-content: center;
		}
		.box-right {
			margin-right: 10px;
			align-items: center;
		}
	}
	.common {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30px;
		.title {
			width: 130px;
			text-align: right;
			margin-right: 5px;
		}
	}
	.input {
		margin-right: 10px;
		margin-left: 40px;
		margin-top: 20px;
		.ant-input-affix-wrapper {
			height: 100px;
		}
	}
	.btnBox {
		text-align: center;
		margin-top: 40px;
		.primarySele {
			width: 100px;
		}
	}
</style>
