<script setup name="emergencyProcessingCompanyAnalysis">
	import Details from './emergencyProcessingCompanyDetails.vue'
	import { count, prCacount } from '@/api/emergencySupport/processingCompany'
	import { dictItem } from '@/utils/systemUtils'
	const columns = [
		{
			title: '序号',
			customRender: ({ text, record, index }) => `${index + 1}`
		},
		{
			title: '地区',
			dataIndex: 'area'
		},
		{
			title: '加工企业数量',
			dataIndex: 'enterpriseCount'
		}
	]

	const columns2 = [
		{
			title: '序号',
			customRender: ({ text, record, index }) => `${index + 1}`
		},
		{
			title: '企业名称',
			dataIndex: 'enterpriseName'
		},
		{
			title: '小麦加工能力',
			dataIndex: 'wheatQuantity'
		},
		{
			title: '稻谷加工能力',
			dataIndex: 'riceQuantity'
		},
		{
			title: '油脂加工能力',
			dataIndex: 'oilQuantity'
		}
	]

	const addShow = ref(false)
	const areaTableShow = ref(true)
	const companyTableShow = 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 tableRef = ref()
	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 prCacount(q)
				.then((list) => {
					console.log('list', list)
					dataSource2.value = list
					dataSource2Raw = list
				})
				.then((_) => {
					areaTableShow.value = false
					companyTableShow.value = true
				})
		}
	}

	const refresh = () => {
		level = 0
		dataSource.value = []
		dataSource2.value = []
		dataSource2Raw = []
		lastArea.value = null
		areaTableShow.value = true
		companyTableShow.value = false
		load()
	}
	const searchForm = ref({
		enterpriseName: null
	})
	const formRef = ref()
	const search = () => {
		if (searchForm.value.enterpriseName) {
			dataSource2.value = dataSource2.value.filter((d) => d.enterpriseName.includes(searchForm.value.enterpriseName))
		} else {
			reset()
		}
	}
	const reset = () => {
		searchForm.value.enterpriseName = null
		dataSource2.value = dataSource2Raw
	}

	const dataSource = ref([])
	const dataSource2 = ref([])
	let dataSource2Raw = []

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

	onMounted(() => {
		refresh()
	})
</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 }}</a
				>
				<span v-else-if="column.dataIndex === 'area'">{{ dictItem(record.area).name }}</span>
			</template>
		</a-table>
		<div v-show="companyTableShow" class="control-bar">
			<a-form layout="inline">
				<a-form-item label="企业名称" name="enterpriseName">
					<a-input v-model:value.trim="searchForm.enterpriseName" />
				</a-form-item>
				<a-button type="primary" @click="search">
					<template #icon><plus-outlined /></template>
					查询
				</a-button>
				<a-button @click="reset">
					<template #icon><plus-outlined /></template>
					重置
				</a-button>
			</a-form>
		</div>
		<a-table v-show="companyTableShow" :columns="columns2" :data-source="dataSource2" 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" />
</template>

<style scoped>
	.control-bar {
		margin-bottom: 10px;
	}
</style>
