<template>
	<!--人才培养规划 -->
	<a-card :bordered="false">
		<div
			style="cursor: pointer"
			@click="
				() => {
					router.back()
				}
			"
		>
			<left-outlined />返回
		</div>
		<br />
		<div class="pricemoitorrecord">
			<a-form :model="formState" name="basic" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
				<div class="form">
					<a-form-item class="form-item" label="粮库名称" name="swls" :label-col="{ span: 10 }">
						<a-input :disabled="code" v-model:value="formState.depotName" />
					</a-form-item>
					<!--  -->
					<!-- ???廒间名称 -->
					<a-form-item class="form-item" label="廒间名称" name="cfmc" :label-col="{ span: 10 }">
						<a-input :disabled="code" v-model:value="formState.cfmc" />
					</a-form-item>

					<a-form-item class="form-item" label="货位名称" name="swls" :label-col="{ span: 10 }">
						<a-input :disabled="code" v-model:value="formState.warehouseName" />
					</a-form-item>

					<!--  -->
					<a-form-item class="form-item" label="货位编码" name="username" :label-col="{ span: 10 }">
						<a-input :disabled="code" v-model:value="formState.warehouseCode" />
					</a-form-item>
					<a-form-item class="form-item" label=" 启用日期" name="username" :label-col="{ span: 10 }">
						<a-input :disabled="code" v-model:value="formState.warehouseUseTime" />
					</a-form-item>

					<a-form-item class="form-item" label="储粮方式" name="username" :label-col="{ span: 10 }">
						<a-input :disabled="code" :value="cocName(formState.storeWay)" />
					</a-form-item>
					<a-form-item class="form-item" label="货位容量" name="username" :label-col="{ span: 10 }">
						<a-input :disabled="code" v-model:value="formState.warehouseCapacity" />
					</a-form-item>
					<!-- 	:rules="[{ required: true, message: 'Please input your username!' }]" -->
					<a-form-item class="form-item" label=" 备注" name="username" :label-col="{ span: 10 }">
						<a-input :disabled="code" v-model:value="formState.remark" />
					</a-form-item>
					<!-- <a-form-item class="form-item" label="" name="username" :label-col="{ span: 10 }"> </a-form-item> -->

					<!--  -->
				</div>

				<!-- <a-form-item>
					<div class="item-submit">
						<a-button class="btn1" html-type="submit">取消</a-button>
						<a-button class="btn1" type="primary" html-type="submit">保存</a-button>
					</div>
				</a-form-item> -->
			</a-form>
		</div>
	</a-card>
</template>
<script lang="js">
	import business from '@/api/business/tank.js'
	import { onMounted } from 'vue'
	import { reactive, ref, watch } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { defineComponent } from 'vue'
	import { enumMap } from '@/hook/enumMap.js'
	export default {
		name: 'ApplicationExtension',
		components: {},
		setup(props, { emit }) {
			const { cocName, getEnumByEnumCode, cocDEl, cocDElⅣ, cocDElⅣV, cocTFXTXS, cocDLMXS, cocBUG_INSPECTION_TYPE } =
				enumMap()
			onMounted(() => {
				onSearch(route.query.id)
			})
			const code = ref(false)
			const router = useRouter()
			const route = useRoute()
			watch(
				() => route.query.codeCCB,
				(newVal) => {
					const codeDel = route.query.codeCCB
					if (codeDel == 2) {
						setTimeout(() => {
							onSearch(route.query.id)
							code.value = true
						}, 0)
					}
				},
				{ immediate: true, deep: true }
			)

			const onSearch = async (id) => {
				const res = await business.listPageWarehouseDetail({ warehouseId: id })
				Object.assign(formState, res)
				formState.cfmc = route.query.cfmc
			}
			const handleInput = () => {}
			const formState = reactive({
				cfmc: '',
				depotId: 0,
				depotName: '',
				storehouseId: 0,
				warehouseCode: '',
				warehouseName: '',
				warehouseUseTime: '',
				warehouseStatus: 0,
				storeWay: 0,
				length: 0,
				width: 0,
				heigth: 0,
				contactNumber: '',
				warehouseCapacity: 0,
				dutystoreman: '',
				remark: '',
				wareImg: '',
				createname: '',
				updatename: '',
				createdate: '',
				updatedate: '',
				delFlag: 0,
				orgId: 0,
				libraryType: '',
				updatetime: '',
				hwbm: '',
				crkStatus: '',
				hwdm: '',
				lylx: '',
				sptDataid: '',
				unitAisleId: 0
			})
			const onFinish = (values) => {
				console.log('Success:', values)
			}
			const onFinishFailed = (errorInfo) => {
				console.log('Failed:', errorInfo)
			}
			const options = ref([
				{
					value: 1
				}
			])
			const handleChange = (val) => {
				console.log(val)
			}

			return {
				cocName,
				code,
				router,
				options,
				handleChange,
				onFinishFailed,
				onFinish,
				formState,
				handleInput
			}
		}
	}
</script>

<style lang="less" scoped>
	.search {
		padding-top: 20px;
		padding-left: 50px;
		margin-bottom: 32px;
		.btnBox {
			display: inline-block;
			width: 200px;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
	.silt-title {
		display: flex;
	}
	.form {
		display: flex;
		flex-wrap: wrap;
		// justify-content: center;
		align-items: center;
		.form-item {
			width: 350px;
			margin-right: 20px;
		}
	}
	.item-submit {
		display: flex;
		justify-content: center;
		margin-top: 100px;
		.btn1 {
			width: 100px;
			margin-right: 20px;
		}
	}
	.ant-select {
		width: 250px;
	}
	.ant-input {
		width: 250px;
	}
	.ant-form-item-label {
		width: 150px;
	}
	.input {
		margin-right: 10px;
		margin-left: 40px;
		margin-top: 20px;
		.ant-input-affix-wrapper {
			height: 100px;
			// width: 500px;
		}
	}
</style>
