<template>
	<!--人才培养规划 -->
	<a-card :bordered="false">
		<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 v-model:value="formState.username" />
					</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 v-model:value="formState.username" />
					</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 v-model:value="formState.username" />
					</a-form-item>

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

					<a-form-item
						class="form-item"
						label="交付使用日期"
						:rules="[{ required: true, message: 'Please input your username!' }]"
						name="username"
						:label-col="{ span: 10 }"
					>
						<a-input v-model:value="formState.username" />
					</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-input v-model:value="formState.username" />
					</a-form-item>
					<a-form-item class="form-item" label="仓房类型明细" name="username" :label-col="{ span: 10 }">
						<a-input v-model:value="formState.username" />
					</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 class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">长(m)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">长(m)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">库门数量<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">房顶<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">宽(m)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">宽(m)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">库门位置<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">房架<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">檐高(m)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">檐高(m)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">库门高度(m)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">地面<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">顶高(m)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">装粮线高(m)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">库门宽度(m)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">设计仓容(吨)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">筒仓外径(m)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">筒仓内径(m)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">通风方式(m)<span></span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">保管方式<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">核定仓容(吨)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">外墙面积(m2)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">仓内体积(m3)<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td rowspan="2">隔热措施</td>
				<td colspan="1">舱顶</td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">装粮食高度(M)</td>
				<td colspan="1">
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">扣除体积(m3)</td>
				<td colspan="1">
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">粮堆体积(m3)</td>
				<td colspan="1">
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
			</tr>
			<tr>
				<td colspan="1">舱窗</td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">有无防火防爆防盗措施<span>*</span></td>
				<td colspan="1">
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">能否散装储存<span>*</span></td>
				<td colspan="1">
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">有无防鼠防雀防虫装置及设施<span>*</span></td>
				<td colspan="1">
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></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.username" placeholder="备注" :rows="3" />
				</td>
			</tr>
			<!--  -->

			<tr>
				<td colspan="2">有无粮情检测设施<span></span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">有无机械通风设施<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">能否环流熏杀虫<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">能否富痰低氧气调储粮<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">能否仓外测虫<span></span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">储粮功效<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">能否隔热保温<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">隔热性能<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">结构材料<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">气密性<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">粮情技术<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">通风系统型式<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
			</tr>
			<!--  -->
			<tr>
				<td colspan="2">通风技术<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">杀虫技术<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">控温技术<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">是否已进行信息化改造<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
			</tr>

			<tr>
				<td colspan="2">挡粮门型式<span></span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">建设单位<span></span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">设计使用年限<span></span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">设计单位<span></span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
			</tr>

			<tr>
				<td colspan="2">监理单位<span></span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
				<td colspan="2">害虫检测方式<span>*</span></td>
				<td>
					<div class="td-td"><a-input class="input-box" type="number" v-model:value="xm[0]" /></div>
				</td>
			</tr>
		</table>
	</a-card>
</template>
<script lang="js">
	import { onMounted } from 'vue'
	// import Form from './form.vue'
	import { reactive, ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { defineComponent } from 'vue'
	export default {
		name: 'ApplicationExtension',
		components: {},
		setup(props, { emit }) {
			const formRef = ref(null)
			onMounted(() => {
				onSearch()
			})
			const dataSource = ref([]) // 响应式表格数据
			const total = ref(0) // 总记录数
			const currentPage = ref(1) // 当前页码
			const pageSize = ref(10) // 每页显示的记录数
			const pageSizeOptions = ['1', '2', '30', '40'] // 每页显示记录数选项

			const handlePageChange = (current, size) => {
				// 更新当前页码和每页显示的记录数
				pagination.current = current
				pagination.pageSize = size
				// 根据新的页码和每页显示的记录数获取数据
			}
			const router = useRouter()
			const tableColumns = [
				{ title: '序号', key: 'INDEX' },
				{ title: '品种', dataIndex: 'dataIndex1' },
				{ title: '性质', dataIndex: 'dataIndex2' },
				{ title: '生产年限', dataIndex: 'dataIndex3' },
				{ title: '计划数量', dataIndex: 'dataIndex4' }
				// { title: '操作', key: '操作' }
			]
			const tableData = ref([
				{
					INDEX: 1,
					dataIndex1: '企业名称1',
					dataIndex2: '企业代码1',
					dataIndex3: '法定代表人1',
					dataIndex4: '企业性质1'
				},
				{
					INDEX: 2,
					dataIndex1: '企业名称2',
					dataIndex2: '企业代码2',
					dataIndex3: '法定代表人2',
					dataIndex4: '企业性质2'
				}
			])
			const SiteOptions = []
			const username = ref('')
			const SearchForm = reactive({
				siteName: ''
			})
			function onSearch() {
				// let fd = JSON.parse(JSON.stringify(SearchForm))
				// fd.current = tablePage.current
				// fd.size = tablePage.size
				// priceMoitorRecordApi.priceMoitorRecordPage(fd).then((reg) => {
				// 	console.log(reg.records, 123)
				// 	tableData.value = reg.records
				// 	tablePage.total = reg.total
				// })
			}
			function onReset() {
				SearchForm.siteName = ''
				tablePage.current = 1
				onSearch()
			}
			const handleInput = () => {}

			function onViewRow() {
				// router.push('/basic.info/pricemoitorrecordDetail')
			}
			function onChangePage(ev) {
				// Object.assign(tablePage, ev)
				onSearch()
			}

			const pagination = reactive({
				current: currentPage.value,
				pageSize: pageSize.value,
				total: total.value,
				showSizeChanger: true,
				pageSizeOptions: pageSizeOptions,
				showTotal: (total, range) => `共 ${total} 条`,
				onChange: handlePageChange
			})

			const handleExpand = (expanded, record) => {
				// 处理展开分页的逻辑
				// 可以根据 record 的信息进行展开分页的操作
				// 例如根据 record 的 ID 获取分页数据等
				// 更新分页数据
				record.paginationData = [] // 假设 record.paginationData 是用于存储分页数据的属性
			}

			// 查看表单数据
			const onView = (record) => {
				// formRef.value.onOpen(record, true)
				router.push('/basic.info/applicationQualificationNew')
			}
			const formState = reactive({
				username: '',
				swls: ''
			})
			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)
			}
			const xm = ref([])
			const qk = ref([])
			const ycz = ref([])
			const hd = ref([])
			const ymm = ref([])
			const xiaom = ref([])
			const yjczy = ref([]) //三级分类
			const sjczy = ref([]) //三级分类
			const xzczy = ref([]) //三级分类
			const tyf = ref([]) //三级分类
			const nrmf = ref([]) //三级分类
			const yjclgm = ref([]) //三级分类
			const yjylgm = ref([]) //三级分类
			const sjcbxm = ref([]) //省级
			const sjcbqk = ref([])
			const sjcbczy = ref([])

			return {
				sjcbczy,
				sjcbqk,
				sjcbxm,
				yjylgm,
				yjclgm,
				nrmf,
				tyf,
				xzczy,
				sjczy,
				yjczy,
				xiaom,
				ymm,
				hd,
				ycz,
				qk,
				xm,
				handleChange,
				formState,
				onFinish,
				onFinishFailed,
				pageSizeOptions,
				pageSize,
				currentPage,
				total,
				dataSource,
				handlePageChange,
				tableColumns,
				tableData,
				SiteOptions,
				username,
				SearchForm,
				onSearch,
				onViewRow,
				handleInput,
				onReset,
				formRef,
				onView,
				handleExpand,
				pagination,
				onChangePage,
				options
			}
		}
	}
</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>
