<template>
	<xn-form-container
		:title="'位置信息管理新增'"
		:width="800"
		: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="disabled" placeholder="" allow-clear />
					</div>
					<div class="common">
						<div class="title">组织类型 :</div>
						<a-input v-model:value="formData.name" :disabled="disabled" placeholder="" allow-clear />
					</div>
					<div class="common">
						<div class="title">地址 :</div>
						<a-input v-model:value="formData.name" :disabled="disabled" placeholder="" allow-clear />
					</div>
					<div class="common">
						<div class="title">组织性质 :</div>
						<a-input v-model:value="formData.name" :disabled="disabled" placeholder="" allow-clear />
					</div>
					<div class="common">
						<div class="title">统一社会信用代码 :</div>
						<a-input v-model:value="formData.name" :disabled="disabled" placeholder="" allow-clear />
					</div>
					<div class="common">
						<div class="title">行政区划 :</div>
						<a-input v-model:value="formData.name" :disabled="disabled" placeholder="" allow-clear />
					</div>
				</div>
				<!--  -->
				<div class="box-right">
					<div class="common">
						<div class="title">联系人 :</div>
						<a-input v-model:value="formData.name" :disabled="disabled" placeholder="" allow-clear />
					</div>
					<div class="common">
						<div class="title">联系电话 :</div>
						<a-input v-model:value="formData.name" :disabled="disabled" placeholder="" allow-clear />
					</div>
					<div class="common">
						<div class="title">邮政编码 :</div>
						<a-input v-model:value="formData.name" :disabled="disabled" placeholder="" allow-clear />
					</div>
					<div class="common">
						<div class="title">经度 :</div>
						<a-input v-model:value="formData.name" :disabled="disabled" placeholder="" allow-clear />
					</div>
					<div class="common">
						<div class="title">纬度 :</div>
						<a-input v-model:value="formData.name" :disabled="disabled" placeholder="" allow-clear />
					</div>
				</div>
			</div>

			<div class="btnBox">
				<a-button class="acc"> 取消 </a-button>
				<a-button class="acc snowy-buttom-left" type="primary"> 保存 </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 disabled = ref(false)
			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 { disabled, onOpen, visible, formRef, onClose, formData }
		}
	}
</script>
<style lang="less" scoped>
	.box1 {
		display: flex;
		justify-content: space-between;
		.box-left {
			width: 350px;
			align-items: center;
		}
		.box-right {
			width: 350px;
			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: 100px;
		.snowy-buttom-left {
			margin-left: 100px;
		}
		.acc {
			width: 80px;
			height: 40px;
		}
	}
</style>
