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

					<a-form-item
						class="form-item"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						label="行政区划地址"
						name="address"
						:label-col="{ span: 10 }"
					>
						<a-input :disabled="code" v-model:value="formState.address" />
					</a-form-item>

					<!--  -->
					<a-form-item
						:rules="[{ required: true, message: 'Please input your username!' }]"
						class="form-item"
						label="行政区划代码"
						name="areaCode"
						:label-col="{ span: 10 }"
					>
						<a-input :disabled="code" v-model:value="formState.areaCode" />
					</a-form-item>
					<a-form-item
						class="form-item"
						label="库区产权"
						name="depotProperty"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: 'Please input your username!' }]"
					>
						<a-select
							:disabled="code"
							:value="cocPROPERTY_RIGHTS(formState.depotProperty)"
							@change="handleChange"
							:options="options"
						></a-select>
					</a-form-item>

					<a-form-item
						class="form-item"
						label="有效仓容"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						name="effectiveCapacity"
						:label-col="{ span: 10 }"
					>
						<a-input :disabled="code" v-model:value="formState.effectiveCapacity" />
					</a-form-item>
					<a-form-item
						class="form-item"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						label="有效罐容"
						name="yxgr	"
						:label-col="{ span: 10 }"
					>
						<a-input :disabled="code" v-model:value="formState.yxgr" />
					</a-form-item>
					<a-form-item
						class="form-item"
						label="库点面积"
						name="depotArea"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: 'Please input your username!' }]"
					>
						<a-input :disabled="code" v-model:value="formState.depotArea" />
					</a-form-item>
					<a-form-item
						class="form-item"
						label="仓房数"
						name="houseNumber"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: 'Please input your username!' }]"
					>
						<a-input :disabled="code" v-model:value="formState.houseNumber" />
					</a-form-item>
					<a-form-item
						class="form-item"
						label="油罐数"
						name="tankNumber"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: 'Please input your username!' }]"
					>
						<a-input :disabled="code" v-model:value="formState.tankNumber" />
					</a-form-item>
					<a-form-item
						class="form-item"
						label="库区经度"
						name="longitude"
						:label-col="{ span: 10 }"
						:rules="[{ required: true, message: 'Please input your username!' }]"
					>
						<a-input :disabled="code" v-model:value="formState.longitude" />
					</a-form-item>
					<a-form-item
						class="form-item"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						label="库区纬度"
						name="latitude"
						:label-col="{ span: 10 }"
					>
						<a-input :disabled="code" v-model:value="formState.latitude" />
					</a-form-item>

					<a-form-item
						class="form-item"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						label="是否主库"
						name="username"
						:label-col="{ span: 10 }"
					>
						<a-select
							:disabled="code"
							:value="cocYES_NO(formState.sfzk)"
							@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, 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 {
				cocYES_NO,
				cocPROPERTY_RIGHTS,
				cocName,
				getEnumByEnumCode,
				cocDEl,
				cocDElⅣ,
				cocDElⅣV,
				cocTFXTXS,
				cocDLMXS,
				cocBUG_INSPECTION_TYPE
			} = enumMap()
			onMounted(() => {})
			const code = ref(false)
			const router = useRouter()
			const route = useRoute()
			watch(
				() => route.query.codeOOP,
				(newVal) => {
					const codeDel = route.query.codeOOP
					if (codeDel == '2') {
						setTimeout(() => {
							onSearch(route.query.id)
							code.value = true
						}, 0)
					}
				},
				{ immediate: true, deep: true }
			)

			const onSearch = async (id) => {
				const data = await business.pageListOrgInfoDetail({ orgId: id })
				Object.assign(formState, data)
				formState.qymc = route.query.qymc
			}
			const handleInput = () => {}
			const formState = reactive({
				qymc: '',
				orgName: '',
				shortName: '',
				orgCode: '',
				orgClassId: 0,
				companyNature: 0,
				busiType: 0,
				address: '',
				contact: '',
				fax: '',
				chargePerson: '',
				longitude: '',
				latitude: '',
				registCapital: 0,
				workNumber: 0,
				areaCode: 0,
				areaName: '',
				post: 0,
				depotClass: 0,
				designCapacity: 0,
				effectiveCapacity: 0,
				depotArea: 0,
				completeDate: '',
				useDate: '',
				companyOrgCode: '',
				creditCode: '',
				registType: 0,
				qualification: 0,
				independentCorporation: 0,
				legalPerson: '',
				whetherRent: 0,
				infoRegist: '',
				registDate: '',
				remark: '',
				parentId: 0,
				status: 0,
				delFlag: 0,
				birdsEye: '',
				birdsRemote: '',
				briefIntroduction: '',
				invoiceTitle: '',
				registNumber: '',
				bankName: '',
				accountName: '',
				accountNumber: '',
				totalAssets: 0,
				corporateCapacity: '',
				officePhone: '',
				registeredAddress: '',
				mailBox: '',
				officialWebsite: '',
				houseNumber: 0,
				tankNumber: 0,
				depotProperty: '',
				updatetime: '',
				levelCode: '',
				citycouncilCode: '',
				kqNumber: 0,
				zcProvince: 0,
				zcCity: 0,
				zcCounty: 0,
				frlxfs: '',
				yxgr: 0,
				kqbm: '',
				sfzk: '',
				unitInfoId: ''
			})
			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 {
				cocYES_NO,
				cocPROPERTY_RIGHTS,
				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: 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>
