<!-- 校验查询 -->
<template>
	<div class="pageBox">
		<a-form>
			<a-form-item label="查询">
				<a-select
					allowClear
					placeholder="请选择省"
					v-model:value="pageData.searchData.province"
					@change="
						(val, option) => {
							getNextDic(val, option, 'city')
						}
					"
				>
					<a-select-option v-for="dic in dictList.province" :value="dic.id" :key="dic.name">{{
						dic.dictLabel
					}}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item>
				<a-select
					allowClear
					placeholder="请选择市/州"
					v-model:value="pageData.searchData.city"
					@change="
						(val, option) => {
							getNextDic(val, option, 'county')
						}
					"
				>
					<a-select-option v-for="dic in dictList.city" :value="dic.id" :key="dic.name">{{
						dic.dictLabel
					}}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item>
				<a-select allowClear placeholder="请选择区/县" v-model:value="pageData.searchData.county">
					<a-select-option v-for="dic in dictList.county" :value="dic.id" :key="dic.name">{{
						dic.dictLabel
					}}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item>
				<a-button type="primary" @click="getTableData">查询</a-button>
			</a-form-item>
		</a-form>
		<a-table :columns="columns" :pagination="false" :data-source="pageData.tableData" :scroll="{ x: 1500, y: 550 }">
			<template #bodyCell="{ column, record, index }">
				<template v-if="column.key === 'INDEX'">{{ index + 1 }}</template>
				<!-- <template v-if="column.key === 'dqmc'">
					<a-button :type="record.city ? 'link' : 'text'" @click="getTableData(record.city)">{{
						record.dqmc
					}}</a-button>
				</template> -->
			</template>
		</a-table>
	</div>
</template>
<script setup name="credit">
	import { reactive } from 'vue'
	import api from '@/api/emergencySupport/emergencySupportCenter.js'
	let pageData = reactive({
		searchData: {
			city: null,
			county: null,
			province: null
		},
		tableData: []
	})
	const dictList = reactive({
		city: [],
		county: [],
		province: []
	})
	const dictionary = JSON.parse(localStorage.getItem('DICT_TYPE_TREE_DATA'))
	const columns = [
		{ title: '序号', width: 60, key: 'INDEX', align: 'center' },
		{ title: '地区', dataIndex: 'dqmc', key: 'dqmc', align: 'center' },
		{ title: '网点个数', dataIndex: 'wdsl', key: 'wdsl', align: 'center' },
		{ title: '小麦原粮日库存', dataIndex: 'xmylrkc', key: 'xmylrkc', align: 'center' },
		{ title: '大米成品粮日库存', dataIndex: 'dmcplrkc', key: 'dmcplrkc', align: 'center' },
		{ title: '食用油成品粮日库存', dataIndex: 'syycplrkc', key: 'syycplrkc', align: 'center' },
		{ title: '其他原粮日库存', dataIndex: 'qtylrkc', key: 'qtylrkc', align: 'center' }
	]

	onMounted(() => {
		getTableData()
		getCityDicList()
	})

	// 获取表格数据
	function getTableData() {
		let data = pageData.searchData.province
			? pageData.searchData.city
				? pageData.searchData.county
					? pageData.searchData.county
					: pageData.searchData.city
				: pageData.searchData.province
			: ''
		console.log(pageData.searchData, 'data---' + data)
		api.getYjccqytj({ city: data }).then((res) => {
			pageData.tableData = res
		})
	}
	// 获取字典
	function getCityDicList() {
		dictionary.map((item) => {
			if (item.dictValue == 'xzqh') {
				item.children.map((el, index) => {
					if (el.dictLabel != '美国' && el.dictLabel != '加拿大') {
						dictList.province.push(el)
					}
				})
			}
		})
	}
	// 获取下一级的字典
	function getNextDic(val, option, type) {
		console.log(val, option, type, dictList)
		if (type == 'city') {
			if (option.key == '北京市' || option.key == '上海市' || option.key == '重庆市') {
				dictList.province.map((item) => {
					if (item.id == option.value) {
						dictList.city.push(item)
						pageData.searchData.city = ''
						pageData.searchData.county = ''
					}
				})
			} else {
				dictList.province.map((item) => {
					if (val == item.id) {
						dictList.city = item.children
						pageData.searchData.city = ''
						pageData.searchData.county = ''
					}
				})
			}
		} else {
			dictList.city.map((item) => {
				if (val == item.id) {
					dictList.county = item.children
					pageData.searchData.county = ''
				}
			})
		}
	}
</script>
<style lang="less" scoped>
	.pageBox {
		margin: 30px 0;
		.ant-form {
			padding: 15px 30px 0 30px;
			overflow: hidden;
			.ant-form-item {
				width: 20%;
				float: left;
				margin-right: 2%;
				.ant-btn {
					margin-right: 15px;
				}
			}
		}
	}
</style>
