<template>
	<div style="background: #fff; height: 100%">
		<a-form class="roots" :form="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 class="box-right">
					<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 class="common">
						<div class="title">承储资格延续年限</div>
						<a-input v-model:value="formData.name" :disabled="false" placeholder="" allow-clear />
					</div>
				</div>
				<!--  -->
				<div class="box-right">
					<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>仓房设施设备情况</div>
			<div class="input"><a-input v-model:value="formData.name" :disabled="false" placeholder="" allow-clear /></div>
			<div class="attachment">
				<div><span>*</span>附件</div>
				<div>
					<a-upload
						:action="uploadUrl"
						:before-upload="handleBeforeUpload"
						:on-success="handleUploadSuccess"
						:on-error="handleUploadError"
						:file-list="fileList"
						multiple
					>
						<a-button icon="upload">选择文件</a-button>
					</a-upload>
					<p>附件支持在线预览、下载、打印。</p>
				</div>
			</div>
			<div class="button">
				<a-button class="snowy-buttom-left button1" @click="onReset"> 取消 </a-button>
				<a-button type="primary" class="primarySele button1" @click="onSearch"> 保存 </a-button>
			</div>
		</a-form>
	</div>
</template>
<script lang="js">
	import { ref } from 'vue'
	import { cloneDeep } from 'lodash-es'
	import { Form, FormItem, Upload, Button } from 'ant-design-vue'
	export default {
		name: '',
		components: {},
		setup(props, { emit }) {
			const formRef = ref()
			const formData = ref({
				name: ''
			})
			// 抽屉状态
			const visible = ref(true)
			// 打开抽屉
			const onOpen = (record, flag) => {
				visible.value = flag
			}
			const onClose = () => {
				// formRef.value.resetFields()
				// formData.value = {}
				visible.value = false
			}
			const form = ref(null)
			const uploadUrl = 'https://your-upload-api-url' // 替换为实际的上传接口地址
			const fileList = ref([])

			// 处理文件上传前的操作 ,// 可以在此处对文件进行校验或处理
			// 返回 true 表示继续上传，返回 false 表示取消上传
			const handleBeforeUpload = (file) => {
				console.log('文件上传前的操作', file)
				return true
			}

			// 处理文件上传成功的操作
			const handleUploadSuccess = (response, file) => {
				const formData = new FormData()
				formData.append('file', file)
				console.log('文件上传成功', response, formData)
				// axios
				// 	.post('https://your-api-url', formData)
				// 	.then((response) => {
				// 		console.log('请求成功', response)
				// 		// 在此处处理请求成功后的逻辑
				// 	})
				// 	.catch((error) => {
				// 		console.log('请求失败', error)
				// 		// 在此处处理请求失败的逻辑
				// 	})
			}

			// 处理文件上传失败的操作
			const handleUploadError = (error, file) => {
				// 文件上传失败后的处理
				console.log('文件上传失败', error)
			}

			return {
				uploadUrl,
				handleBeforeUpload,
				handleUploadSuccess,
				handleUploadError,
				form,
				onOpen,
				visible,
				formRef,
				onClose,
				formData
			}
		}
	}
</script>
<style lang="less" scoped>
	.roots {
		padding: 24px;
		display: flex;
		flex-direction: column;

		.box1 {
			display: flex;
			justify-content: space-between;
			.box-left {
				width: 500px;
				align-items: center;
			}
			.box-right {
				width: 500px;
				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;
			}
		}
	}
	.attachment {
		display: flex;
		margin-top: 30px;
		div:first-child {
			width: 110px;
			text-align: right;
			padding-right: 20px;
		}
		span {
			color: red;
			margin-right: 3px;
		}
		p {
			font-size: 12px;
			color: #eb4897;
		}
	}
	.button {
		text-align: center;
		.button1 {
			width: 100px;
			height: 40px;
		}
		.snowy-buttom-left {
			margin-right: 100px;
		}
	}
</style>
