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

					<a-form-item
						class="form-item"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						label="统一廒间编码"
						name="tyajbm"
						:label-col="{ span: 10 }"
					>
						<a-input :disabled="code" v-model:value="formState.tyajbm" />
					</a-form-item>

					<!--  -->
					<a-form-item class="form-item" label="廒间长度" name="ajcd" :label-col="{ span: 10 }">
						<a-input :disabled="code" v-model:value="formState.ajcd" />
					</a-form-item>
					<a-form-item class="form-item" label=" 廒间高度" name="ajgd" :label-col="{ span: 10 }">
						<a-input :disabled="code" v-model:value="formState.ajkd" />
					</a-form-item>

					<a-form-item
						class="form-item"
						label="廒间宽度"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						name="ajkd"
						:label-col="{ span: 10 }"
					>
						<a-input :disabled="code" v-model:value="formState.ajkd" />
					</a-form-item>
					<a-form-item class="form-item" label="启用日期" name="ajqyrq" :label-col="{ span: 10 }">
						<a-input :disabled="code" v-model:value="formState.ajqyrq" />
					</a-form-item>
					<a-form-item
						class="form-item"
						label=" 设计仓容"
						name="ajsjcr"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: 'Please input your username!' }]"
					>
						<a-input :disabled="code" :value="formState.ajsjcr" />
					</a-form-item>
					<a-form-item
						class="form-item"
						label="廒间状态"
						name="ajzt"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: 'Please input your username!' }]"
					>
						<a-select
							:disabled="code"
							:value="cocGRANARY_STATUS(formState.ajzt)"
							@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>
		<!-- <Form ref="formRef" @successful="tableRef.refresh()" /> -->
	</a-card>
</template>
<script lang="js">
	import business from '@/api/business/tank.js'

	import { onMounted } from 'vue'
	import { reactive, ref } 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 }) {
			onMounted(() => {})
			const {
				cocGRANARY_STATUS,
				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.codeTTG,
				(newVal) => {
					const codeDel = route.query.codeTTG
					if (codeDel == 2) {
						setTimeout(() => {
							onSearch(route.query.id)
							code.value = true
						}, 0)
					}
				},
				{ immediate: true, deep: true }
			)

			const onSearch = async (id) => {
				const res = await business.pageListDetail({ id: id })
				Object.assign(formState, res)
				formState.storehouse_name = route.query.storehouse_name
			}
			const handleInput = () => {}
			const formState = reactive({
				id: 0,
				basicStorehouseId: 0,
				ajdh: '',
				tyajbm: '',
				ajmc: '',
				cfbh: '',
				ajcd: 0,
				ajkd: 0,
				ajgd: 0,
				ajsjcr: 0,
				ajqyrq: '',
				ajzt: 0,
				czbz: '',
				zhgxsj: '',
				createname: '',
				createdate: '',
				updatename: '',
				updatedate: ''
			})
			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 {
				cocGRANARY_STATUS,
				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>
