<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 }"
						:rules="[{ required: true, message: 'Please input your username!' }]"
					>
						<a-input :disabled="code" v-model:value="formState.orgName" />
					</a-form-item>
					<a-form-item
						class="form-item"
						label="统一油罐编码"
						name="storagetankCode"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: 'Please input your username!' }]"
					>
						<a-input :disabled="code" v-model:value="formState.storagetankCode" />
					</a-form-item>

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

					<!--  -->
					<a-form-item
						:rules="[{ required: true, message: 'Please input your username!' }]"
						class="form-item"
						label="罐容"
						name="tankCapacity"
						:label-col="{ span: 10 }"
					>
						<a-input :disabled="code" v-model:value="formState.tankCapacity" />
					</a-form-item>
					<a-form-item
						class="form-item"
						label="建造时间"
						name="builddate"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: 'Please input your username!' }]"
					>
						<a-input :disabled="code" v-model:value="formState.builddate" />
					</a-form-item>

					<a-form-item
						class="form-item"
						label="油罐及附属设施是否完好"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						name="facilitiesType"
						:label-col="{ span: 10 }"
					>
						<a-select
							:disabled="code"
							:value="cocName(formState.facilitiesType)"
							@change="handleChange"
							:options="options"
						></a-select>
					</a-form-item>
					<a-form-item
						class="form-item"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						label="有无加热装置"
						name="heatingType"
						:label-col="{ span: 10 }"
					>
						<a-select
							:disabled="code"
							:value="cocName(formState.heatingType)"
							@change="handleChange"
							:options="options"
						></a-select>
					</a-form-item>
					<a-form-item
						class="form-item"
						label="油罐类型"
						name="tankType"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: 'Please input your username!' }]"
					>
						<a-select
							:disabled="code"
							:value="cocName(formState.tankType)"
							@change="handleChange"
							:options="options"
						></a-select>
					</a-form-item>
					<a-form-item class="form-item" label="罐内直径" name="diameter" :label-col="{ span: 10 }">
						<a-input :disabled="code" v-model:value="formState.diameter" />
					</a-form-item>
					<a-form-item class="form-item" label="罐内高度" name="height" :label-col="{ span: 10 }">
						<a-input :disabled="code" v-model:value="formState.height" />
					</a-form-item>
					<a-form-item class="form-item" label="检定方式" name="checkWay" :label-col="{ span: 10 }">
						<a-select
							:disabled="code"
							:value="cocName(formState.checkWay)"
							@change="handleChange"
							:options="options"
						></a-select>
					</a-form-item>
					<a-form-item class="form-item" label="焊接方式" name="weldWay" :label-col="{ span: 10 }">
						<a-select
							:disabled="code"
							:value="cocName(formState.weldWay)"
							@change="handleChange"
							:options="options"
						></a-select>
					</a-form-item>

					<a-form-item
						class="form-item"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						label="油罐状态"
						name="tankStatus"
						:label-col="{ span: 10 }"
					>
						<a-select
							:disabled="code"
							:value="cocName(formState.tankStatus)"
							@change="handleChange"
							:options="options"
						></a-select>
					</a-form-item>
					<!--  -->
					<!-- <a-form-item class="form-item" label="设计单位" name="sjdw" :label-col="{ span: 10 }">
						<a-select
							:disabled="code"
							v-model:value="formState.sjdw"
							@change="handleChange"
							:options="options"
						></a-select>
					</a-form-item> -->
					<!-- <a-form-item class="form-item" label="建设单位" name="jsdw" :label-col="{ span: 10 }">
						<a-select
							:disabled="code"
							v-model:value="formState.jsdw"
							@change="handleChange"
							:options="options"
						></a-select>
					</a-form-item> -->
					<!-- <a-form-item class="form-item" label="监理单位" name="jldw" :label-col="{ span: 10 }">
						<a-select
							:disabled="code"
							v-model:value="formState.jldw"
							@change="handleChange"
							:options="options"
						></a-select>
					</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 { enumMap } from '@/hook/enumMap.js'
	import { onMounted } from 'vue'
	import { reactive, ref, watch } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { defineComponent } from 'vue'
	export default {
		name: 'ApplicationExtension',
		components: {},
		setup(props, { emit }) {
			onMounted(() => {})
			const { cocName, getEnumByEnumCode, cocDEl, cocDElⅣ, cocDElⅣV, cocTFXTXS, cocDLMXS, cocBUG_INSPECTION_TYPE } =
				enumMap()
			const code = ref(false)
			const router = useRouter()
			const route = useRoute()
			watch(
				() => route.query.codeLLV,
				(newVal) => {
					const codeDel = route.query.codeLLV
					if (codeDel == '2') {
						setTimeout(() => {
							onSearch(route.query.id)
							code.value = true
						}, 0)
					}
				},
				{ immediate: true, deep: true }
			)

			const onSearch = async (id) => {
				const data = await business.formGet({ id: id })
				Object.assign(formState, data)
				formState.orgName = route.query.org_name
			}
			const handleInput = () => {}
			const formState = reactive({
				orgName: '',
				id: '',
				storagetankCode: '',
				storagetankName: '',
				orgCode: '',
				tankCapacity: 0,
				createdate: '',
				facilitiesType: 0,
				heatingType: 0,
				tankType: 0,
				diameter: 0,
				height: 0,
				builddate: '',
				checkWay: 0,
				weldWay: 0,
				tankApply: 0,
				tankStatus: 0,
				orgId: 0,
				delFlag: 0,
				updatetime: '',
				bottomArea: 0,
				designHeight: 0,
				oilHeight: 0,
				insportHeight: 0,
				tankChart: '',
				tanklibChart: '',
				libraryType: '',
				basicTruckType: '',
				crkStatus: '',
				ygdm: '',
				ygajdm: '',
				lylx: '',
				jsdw: '',
				sjdw: '',
				jldw: '',
				sptDataid: ''
			})
			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,
				router,
				code,
				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: 400px;
			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>
