<script setup name="emergencySupplyPointAnalysis">
	import { count, getAllChildrenData } from '@/api/emergencySupport'
	import { approveState2Name2 } from '@/views/emergencySupport/emergencySupportCommon'
	import { dictItem } from '@/utils/systemUtils'
	const columns = [
		{
			title: '序号',
			customRender: ({ text, record, index }) => `${index + 1}`
		},
		{
			title: '地区',
			dataIndex: 'area'
		},
		{
			title: '网点个数',
			dataIndex: 'enterpriseCount'
		},
		{
			title: '小麦粉成品粮',
			dataIndex: 'wheatQuantity'
		},
		{
			title: '大米成品粮',
			dataIndex: 'riceQuantity'
		},
		{
			title: '食用油成品粮',
			dataIndex: 'oilQuantity'
		},
		{
			title: '其他成品粮',
			dataIndex: 'otherGrainQuantity'
		}
	]

	const columns2 = [
		{
			title: '序号',
			customRender: ({ text, record, index }) => `${index + 1}`
		},
		{
			title: '地区',
			dataIndex: 'area'
		},
		{
			title: '小麦粉成品粮',
			dataIndex: 'wheatQuantity'
		},
		{
			title: '大米成品粮',
			dataIndex: 'riceQuantity'
		},
		{
			title: '食用油成品粮',
			dataIndex: 'oilQuantity'
		},
		{
			title: '其他成品粮',
			dataIndex: 'otherGrainQuantity'
		}
	]
	// const loadData = (parameter) => {
	// 	return count({ ...searchForm.value }).then(list => {
	//
	// 	})
	// 	// return Promise.resolve([])
	// }
	const addShow = ref(false)
	const areaTableShow = ref(true)
	const siteTableShow = ref(false)

	const openForm = () => {
		addShow.value = true
	}
	const editData = ref(null)
	const action = ref(null)
	const view = (data) => {
		action.value = 'view'
		editData.value = data
		addShow.value = true
	}

	const edit = (data) => {
		action.value = 'edit'
		editData.value = data
		addShow.value = true
	}
	const onDel = (data) => {
		del([{ id: data.id }]).then((resp) => {
			console.log(resp)
			refresh()
		})
	}
	const load = (areaCode) => {
		if (level == 0) {
			return count({}).then((list) => {
				dataSource.value = list
			})
		} else if (level === 1) {
			const q = {
				managementAreaCity: areaCode
			}
			return count(q).then((list) => {
				dataSource.value = list
			})
		} else if (level === 2) {
			const q = {
				managementAreaCounty: areaCode
			}
			return count(q).then((list) => {
				areaTableShow.value = false
				siteTableShow.value = true
				dataSource.value = list
			})
		}
	}
	const tableRef = ref()
	const refresh = () => {
		level = 0
		lastArea.value = null
		areaTableShow.value = true
		siteTableShow.value = false
		load()
	}
	const searchForm = ref({
		enterpriseName: null
	})
	const formRef = ref()
	const search = () => {
		refresh()
	}
	const reset = () => {
		formRef.value.resetFields()
	}
	const add = () => {
		action.value = 'add'
		addShow.value = true
	}
	const chooseShow = ref(false)
	const type = ref(null)
	const handleOk = () => {}

	const dataSource = ref([])

	onMounted(() => {
		refresh()
	})
	let level = 0
	const lastArea = ref(null)
	const queryNext = (data) => {
		level++
		lastArea.value = data.area
		load(data.area)
	}
</script>

<template>
	<a-card :bordered="false">
		<a-table v-show="areaTableShow" :columns="columns" :data-source="dataSource" bordered :pagination="false">
			<template #bodyCell="{ column, text, record }">
				<a
					v-if="column.dataIndex === 'area' && record.area !== lastArea"
					href="javascript:;"
					@click="queryNext(record)"
					>{{ dictItem(record.area)?.name || record.area }}</a
				>
				<span v-else-if="column.dataIndex === 'area'">{{ dictItem(record.area).name }}</span>
			</template>
		</a-table>
		<a-table v-show="siteTableShow" :columns="columns2" :data-source="dataSource" bordered :pagination="false">
			<!--			<template #bodyCell="{ column, text, record }">-->
			<!--				<a-->
			<!--					v-if="column.dataIndex === 'area' && record.area !== lastArea"-->
			<!--					href="javascript:;"-->
			<!--					@click="queryNext(record)"-->
			<!--					>{{ dictItem(record.area).name }}</a-->
			<!--				>-->
			<!--				<span v-else-if="column.dataIndex === 'area'">{{ dictItem(record.area).name }}</span>-->
			<!--			</template>-->
		</a-table>
	</a-card>
	<!--	<Details v-model:visible="addShow" :edit-data="editData" :action="action" @on-save="refresh" />-->
	<!--	<a-modal v-model:visible="chooseShow" title="选择类型" @ok="handleOk">-->
	<!--		<div style="display: flex; justify-content: center; align-items: center">-->
	<!--			<a-select ref="select" style="width: 80%" v-model:value="type">-->
	<!--				<a-select-option value="jack">应急加工企业</a-select-option>-->
	<!--				<a-select-option value="disabled">应急配送企业</a-select-option>-->
	<!--				<a-select-option value="s">应急仓储企业</a-select-option>-->
	<!--			</a-select>-->
	<!--		</div>-->
	<!--	</a-modal>-->
</template>

<style scoped></style>
