<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="username"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: 'Please input your username!' }]"
					>
						<a-input :disabled="code" v-model:value="formState.storehouseCode" />
					</a-form-item>

					<a-form-item
						class="form-item"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						label="仓库名称"
						name="swls"
						:label-col="{ span: 10 }"
					>
						<a-input :disabled="code" v-model:value="formState.storehouseName" />
					</a-form-item>

					<!--  -->
					<a-form-item class="form-item" label="保管员" name="dutystoreman" :label-col="{ span: 10 }">
						<a-input :disabled="code" v-model:value="formState.dutystoreman" />
					</a-form-item>
					<a-form-item
						class="form-item"
						label=" 仓房状态"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						name="storehouseState"
						:label-col="{ span: 10 }"
					>
						<a-input :disabled="code" :value="cocName(formState.storehouseState)" />
					</a-form-item>

					<a-form-item
						class="form-item"
						label="交付使用日期"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						name="usedate"
						:label-col="{ span: 10 }"
					>
						<a-input :disabled="code" v-model:value="formState.usedate" />
					</a-form-item>
					<a-form-item
						class="form-item"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						label="仓房类型"
						name="storehouseType"
						:label-col="{ span: 10 }"
					>
						<a-input :disabled="code" :value="cocName(formState.storehouseType)" />
					</a-form-item>
					<a-form-item class="form-item" label="仓房类型明细" name="storehouseTypeMx" :label-col="{ span: 10 }">
						<a-input :disabled="code" :value="cocName(formState.storehouseTypeMx)" />
					</a-form-item>
					<!-- <a-form-item class="form-item" label="" name="username" :label-col="{ span: 10 }"> </a-form-item> -->
				</div>
			</a-form>
		</div>
		<br />
		<!-- <Form ref="formRef" @successful="tableRef.refresh()" /> -->
		<div class="title">仓房设计信息</div>

		<table style="margin-bottom: 24px">
			<tr class="title">
				<td colspan="3">结构</td>
				<td colspan="3">仓外</td>
				<td colspan="3">舱内</td>
				<td colspan="3">其他</td>
			</tr>
			<tr class="back">
				<td colspan="2">墙体<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocName(formState.wall)" />
					</div>
				</td>
				<td colspan="2">长(m)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.storeOutsideLength" />
					</div>
				</td>
				<td colspan="2">长(m)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.length" />
					</div>
				</td>
				<td colspan="2">库门数量<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.houseDoorNum" />
					</div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">房顶<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocName(formState.roof)" />
					</div>
				</td>
				<td colspan="2">宽(m)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.storeOutsideWidth" />
					</div>
				</td>
				<td colspan="2">宽(m)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.width" />
					</div>
				</td>
				<td colspan="2">库门位置<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.houseDootPosition" />
					</div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">房架<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocName(formState.house)" />
					</div>
				</td>
				<td colspan="2">檐高(m)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.storeOutsideHeigth" />
					</div>
				</td>
				<td colspan="2">檐高(m)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.heigth" />
					</div>
				</td>
				<td colspan="2">库门高度(m)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.houseDoorHeigth" />
					</div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">地面<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="getEnumByEnumCode(formState.ground)" />
					</div>
				</td>
				<td colspan="2">顶高(m)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.storeOutsideTopHeigth" />
					</div>
				</td>
				<td colspan="2">装粮线高(m)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.grainLineHeigth" />
					</div>
				</td>
				<td colspan="2">库门宽度(m)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.houseDoorWidth" />
					</div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">设计仓容(吨)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="formState.designCapacity" />
					</div>
				</td>
				<td colspan="2">筒仓外径(m)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.outsideSiloDiameter" />
					</div>
				</td>
				<td colspan="2">筒仓内径(m)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.siloDiameter" />
					</div>
				</td>
				<td colspan="2">通风方式(m)<span></span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocName(formState.drafttype)" />
					</div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">保管方式<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocName(formState.keepingWay)" />
					</div>
				</td>
				<td colspan="2">核定仓容(吨)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.actualCapacity" />
					</div>
				</td>
				<td colspan="2">外墙面积(m2)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.outerWallArea" />
					</div>
				</td>
				<td colspan="2">仓内体积(m3)<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.binVolume" />
					</div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td rowspan="2">隔热措施</td>
				<td colspan="1">舱顶</td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.heatinsulationstepRoof" />
					</div>
				</td>
				<td colspan="2">装粮食高度(M)</td>
				<td colspan="1">
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.grainHeigth" />
					</div>
				</td>
				<td colspan="2">扣除体积(m3)</td>
				<td colspan="1">
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.deductVolume" />
					</div>
				</td>
				<td colspan="2">粮堆体积(m3)</td>
				<td colspan="1">
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.grainPileVolume" />
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="1">舱窗</td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.heatinsulationstepWindow" />
					</div>
				</td>
				<td colspan="2">有无防火防爆防盗措施<span>*</span></td>
				<td colspan="1">
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDEl(formState.ywfhfbfdss)" />
					</div>
				</td>
				<td colspan="2">能否散装储存<span>*</span></td>
				<td colspan="1">
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDEl(formState.nfszcc)" />
					</div>
				</td>
				<td colspan="2">有无防鼠防雀防虫装置及设施<span>*</span></td>
				<td colspan="1">
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDEl(formState.ywfsfqfczz)" />
					</div>
				</td>
			</tr>
			<!--  -->
			<tr class="back">
				<td rowspan="1">隔热保温措施</td>
				<td colspan="30" class="remark">
					<a-textarea class="input-box remark-box" v-model:value="formState.grbwcs" placeholder="备注" :rows="3" />
				</td>
			</tr>
			<!--  -->

			<tr>
				<td colspan="2">有无粮情检测设施<span></span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDEl(formState.ywlqjcss)" />
					</div>
				</td>
				<td colspan="2">有无机械通风设施<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDEl(formState.ywjxtfss)" />
					</div>
				</td>
				<td colspan="2">能否环流熏杀虫<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDEl(formState.nfhlxzsc)" />
					</div>
				</td>
				<td colspan="2">能否富痰低氧气调储粮<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDEl(formState.nffddyqtcl)" />
					</div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">能否仓外测虫<span></span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDEl(formState.nfcwcc)" />
					</div>
				</td>
				<td colspan="2">储粮功效<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDEl(formState.clgx)" />
					</div>
				</td>
				<td colspan="2">能否隔热保温<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDEl(formState.nfgrbw)" />
					</div>
				</td>
				<td colspan="2">隔热性能<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDElⅣ(formState.grxn)" />
					</div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">结构材料<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDElⅣ(formState.jgcl)" />
					</div>
				</td>
				<td colspan="2">气密性<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDElⅣ(formState.qmx)" />
					</div>
				</td>
				<td colspan="2">粮情技术<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDElⅣV(formState.lqjs)" />
					</div>
				</td>
				<td colspan="2">通风系统型式<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocTFXTXS(formState.tfxtxs)" />
					</div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">通风技术<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDElⅣ(formState.tfjs)" />
					</div>
				</td>
				<td colspan="2">杀虫技术<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDElⅣ(formState.scjs)" />
					</div>
				</td>
				<td colspan="2">控温技术<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDElⅣ(formState.kwjs)" />
					</div>
				</td>
				<td colspan="2">是否已进行信息化改造<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="formState.sfyjxxxhgz == 0 ? '是' : '否'" />
					</div>
				</td>
			</tr>

			<tr>
				<td colspan="2">挡粮门型式<span></span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocDLMXS(formState.dlmxs)" />
					</div>
				</td>
				<td colspan="2">建设单位<span></span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.jsdw" />
					</div>
				</td>
				<td colspan="2">设计使用年限<span></span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.sjsynx" />
					</div>
				</td>
				<td colspan="2">设计单位<span></span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.sjdw" />
					</div>
				</td>
			</tr>

			<tr>
				<td colspan="2">监理单位<span></span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" v-model:value="formState.jldw" />
					</div>
				</td>
				<td colspan="2">害虫检测方式<span>*</span></td>
				<td>
					<div class="td-td">
						<a-input :disabled="code" class="input-box" :value="cocBUG_INSPECTION_TYPE(formState.hcjcfs)" />
					</div>
				</td>
			</tr>
		</table>
	</a-card>
</template>
<script lang="js">
	import { onMounted } from 'vue'
	import business from '@/api/business/tank.js'
	import { enumMap } from '@/hook/enumMap.js'
	import { reactive, ref } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { defineComponent } from 'vue'
	export default {
		name: 'ApplicationExtension',
		components: {},
		setup(props, { emit }) {
			const { cocName, getEnumByEnumCode, cocDEl, cocDElⅣ, cocDElⅣV, cocTFXTXS, cocDLMXS, cocBUG_INSPECTION_TYPE } =
				enumMap()
			const xm = ref({})

			onMounted(() => {})

			const code = ref(false)
			const router = useRouter()
			const route = useRoute()
			watch(
				() => route.query.codeHHJ,
				(newVal) => {
					const codeDel = route.query.codeHHJ
					if (codeDel == '2') {
						setTimeout(() => {
							onSearch(route.query.id)
							code.value = true
						}, 0)
					}
				},
				{ immediate: true, deep: true }
			)

			const onSearch = async (id) => {
				const data = await business.pageListStorehouseDetail({ storehouseId: id })
				Object.assign(formState.value, data)
			}

			const handleInput = () => {}
			const formState = ref({
				uuid: '',
				depotId: 0,
				depotName: '',
				orgId: 0,
				orgName: '',
				storehouseCode: '',
				storehouseName: '',
				storehouseType: 0,
				storehouseTypeMx: 0,
				architectureType: '',
				storeImg: '',
				ground: '',
				wall: 0,
				roof: '',
				house: '',
				designCapacity: 0,
				keepingWay: 0,
				grainHeigth: 0,
				storeOutsideLength: 0,
				storeOutsideWidth: 0,
				storeOutsideHeigth: 0,
				storeOutsideTopHeigth: 0,
				outsideSiloDiameter: 0,
				outerWallArea: 0,
				deductVolume: 0,
				length: 0,
				width: 0,
				heigth: 0,
				grainLineHeigth: 0,
				siloDiameter: 0,
				binVolume: 0,
				grainPileVolume: 0,
				houseDoorNum: 0,
				houseDootPosition: '',
				houseDoorWidth: 0,
				houseDoorHeigth: 0,
				drafttype: 0,
				heatinsulationstepRoof: '',
				heatinsulationstepWindow: '',
				grbwcs: '',
				nfszcc: 0,
				ywfsfqfczz: 0,
				ywfhfbfdss: 0,
				ywlqjcss: 0,
				ywjxtfss: 0,
				nfhlxzsc: 0,
				nffddyqtcl: 0,
				nfcwcc: 0,
				actualCapacity: 0,
				completionDate: '',
				usedate: '',
				storehouseState: 0,
				storeWay: 0,
				currenttype: 0,
				dutystoreman: '',
				remark: '',
				createname: '',
				createdate: '',
				updatename: '',
				updatedate: '',
				workingStatus: 0,
				delFlag: 0,
				libraryType: '',
				updatetime: '',
				datatype: '',
				cfbm: '',
				ajbm: '',
				clgx: 0,
				jgcl: 0,
				grxn: 0,
				qmx: 0,
				lqjs: 0,
				tfjs: 0,
				scjs: 0,
				kwjs: 0,
				sfyjxxxhgz: 0,
				dlmxs: '',
				jsdw: '',
				sjsynx: '',
				sjdw: '',
				jldw: '',
				nfgrbw: 0,
				tfxtxs: 0,
				hcjcfs: ''
			})
			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 {
				cocBUG_INSPECTION_TYPE,
				cocDLMXS,
				cocTFXTXS,
				cocDElⅣV,
				cocDElⅣ,
				cocDEl,
				getEnumByEnumCode,
				cocName,
				xm,
				router,
				code,
				options,
				handleChange,
				onFinishFailed,
				onFinish,
				formState,
				handleInput
			}
		}
	}
</script>
<style lang="less" scoped>
	table {
		/* overflow: hidden; */
		text-align: center;
		border: 1px solid #e0e0e0;
		background: #f9f9f9;
		span {
			color: red;
		}
		.title {
			td {
				background: #d1d1d1;
			}
		}
		.back {
			background: #dbe9f5;
		}
		tr {
			height: 30px;
		}
		td {
			height: 50px;
		}
		.ant-input {
			display: block;
		}
		.td-td {
			// width: 150px;
			margin-left: 10px;
			margin-right: 10px;
		}
	}
	td {
		border: 1px solid #e0e0e0;
	}
	.input-box {
		// border: none;
		// box-shadow: none;
		text-align: center;
	}
	//  .ant-input:focus {
	// 	outline: none;
	// 	box-shadow: none;
	// }
	.ant-form-item-control-input {
		width: 260px;
	}
	.form-box {
		margin-bottom: 24px;
	}
	.ant-space {
		width: 100%;
		text-align: center;
		padding-left: 30%;
	}
	.remark-box {
		text-align: left;
	}
	/* 取消[type='number']的input的上下箭头 */
	input::-webkit-inner-spin-button {
		-webkit-appearance: none !important;
	}

	input::-webkit-outer-spin-button {
		-webkit-appearance: none !important;
	}
	input[type='number'] {
		-moz-appearance: textfield;
	}
	.title {
		margin-bottom: 10px;
	}

	.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: 300px;
			margin-right: 20px;
		}
		.ant-input {
			width: 200px;
		}
	}
	.item-submit {
		display: flex;
		justify-content: center;
		margin-top: 100px;
		.btn1 {
			width: 100px;
			margin-right: 20px;
		}
	}
	.ant-select {
		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>
