<template>
	<a-drawer
		width="100%"
		:closable="false"
		:style="drawerStyle"
		placement="right"
		:get-container="false"
		:title="props.drawerInfo.title"
		v-model:visible="props.drawerInfo.showDrawer"
	>
		<template #extra>
			<a-button shape="circle" @click="fullScreen">
				<fullscreen-outlined v-if="drawerStyle" />
				<fullscreen-exit-outlined v-else />
			</a-button>
			<a-button class="btn" shape="circle" danger @click="onClose">
				<template #icon><close-outlined /></template>
			</a-button>
		</template>
		<!-- :scroll="{ x: 'calc(700px + 50%)', y: true }" -->
		<div class="statisticsTableAll">
			<a-table size="small" bordered :dataSource="tableData" :columns="tableColumns" :pagination="false">
				<template #bodyCell="{ column, record, index }">
					<template v-if="column.key === 'INDEX'">{{ index + 1 }}</template>
					<template v-else>{{ record[column.key] }}</template>
				</template>
			</a-table>
		</div>
	</a-drawer>
</template>
<script setup>
	import { ref } from 'vue'
	import api from '@/api/RLGI/system.js'

	const tableData = ref([])
	const emit = defineEmits(['closeDrawer'])
	const drawerStyle = ref({ position: 'absolute' })

	const props = defineProps({
		drawerInfo: {
			type: Object,
			required: true
		}
	})
	const tableColumns = [
		{ title: '序号', width: 60, key: 'INDEX', align: 'center' },
		{ title: '承储企业', ellipsis: true, width: 250, key: 'orgName' },
		{ title: '地方储备', align: 'center', children: getTableChildren('_地方储备', 'df') },
		{ title: '省级储备', align: 'center', children: getTableChildren('_省级储备', 'sj') },
		{ title: '市(州)级储备', align: 'center', children: getTableChildren('_市级储备', 'cj') },
		{ title: '县(区)级储备', align: 'center', children: getTableChildren('_县级储备', 'xj') }
	]

	function getTableChildren(key, prefix, width = 70) {
		return [
			{ title: '粮油合计', width, key: `${prefix}cbLyhj`, align: 'center', dataIndex: `${key}.a` },
			{ title: '原粮合计', width, key: `${prefix}cbYyhj`, align: 'center', dataIndex: `${key}.a` },
			{
				title: '粮食分品种',
				align: 'center',
				children: [
					{ title: '小麦', key: `${prefix}cbXmhj`, width, align: 'center', dataIndex: `${key}.a` },
					{
						title: '面折粮',
						align: 'center',
						children: [
							{ title: '', width, key: `${prefix}cbXmMzl`, align: 'center', dataIndex: `${key}.a` },
							{ title: '面粉', width, key: `${prefix}cbXmToMf`, align: 'center', dataIndex: `${key}.a` }
						]
					},
					{ title: '青稞', width, key: `${prefix}cbQkhj`, align: 'center', dataIndex: `${key}.a` },
					{ title: '稻谷', width, key: `${prefix}cbDghj`, align: 'center', dataIndex: `${key}.a` },
					{
						title: '米折粮',
						align: 'center',
						children: [
							{ title: '', width, key: `${prefix}cbDgMzl`, align: 'center', dataIndex: `${key}.a` },
							{ title: '大米', width, key: `${prefix}cbDgToDm`, align: 'center', dataIndex: `${key}.a` }
						]
					}
				]
			}
			// {title:'菜籽油合计',width,align:'center',dataIndex:`${key}.a`},
		]
	}
	onMounted(() => {
		getTableData()
	})
	function getTableData() {
		api.getCrkKcswDatas().then((res) => {
			tableData.value = res
		})
	}
	// 全屏显示
	function fullScreen() {
		if (drawerStyle.value) {
			drawerStyle.value = ''
		} else {
			drawerStyle.value = { position: 'absolute' }
		}
	}
	function onClose() {
		emit('closeDrawer')
	}
</script>
