<!-- 仓库数量 -->
<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="silt-box">
			<div class="silt-title">
				<span style="width: 62px; display: block; line-height: 32px; margin-right: 16px">{{ '库点名称' }}</span>
				<a-input style="width: 240px" v-model:value="informationData.orgName" placeholder="请输入库点名称" />
			</div>
			<div class="btnBox">
				<a-button style="margin-right: 16px" @click="searchData" type="primary">查询</a-button>
			</div>
		</div>
		<div class="statisticsTableAll">
			<a-table size="small" bordered :scroll="{ y: 500 }" :dataSource="tableData" :row-key="(record) => record.key"
				:pagination="false" @change="onChangePage" :columns="tableColumns">
				<template #bodyCell="{ column, record }"> </template>
			</a-table>
		</div>
	</a-drawer>
</template>
<script setup>
import { ref } from 'vue'
import reserveDataApi from '@/api/reserveData.info/reserveDataApi'

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

const props = defineProps({
	drawerInfo: {
		type: Object,
		required: true
	}
})
const tableColumns = [
	{
		title: '序号',
		dataIndex: 'Index',
		align: 'center',
		width: 100,
		customRender: ({ text, record, index }) => {
			return `${record.key === 'summary' ? '' : index + 0}`
		}
	},
	{ title: '企业名称', align: 'center', key: 'dwmc', dataIndex: 'dwmc' },
	{ title: '占地面积（平方米）', width: 200, align: 'center', key: 'depotArea', dataIndex: 'depotArea' },
	{ title: '货位数', align: 'center', width: 160, key: 'warehouseCount', dataIndex: 'warehouseCount' },
	{ title: '总罐容（吨）', width: 200, align: 'center', key: 'tankCapacitySum', dataIndex: 'tankCapacitySum' },
	{ title: '油罐数', width: 160, align: 'center', key: 'ygs', dataIndex: 'ygs' },
	{ title: '总仓容（吨）', width: 160, align: 'center', key: 'designCapacitySum', dataIndex: 'designCapacitySum' },
	{ title: '空仓容（吨）', width: 160, align: 'center', key: 'emptySum', dataIndex: 'emptySum' }
]
const tableDataList = ref([])
const informationData = ref({
	orgName: '',
	current: 1,
	size: 10000
})
// 计算合计数据
const summaryData = computed(() => {
	if (!tableDataList.value.length) return null
	const totalAmount = tableDataList.value.reduce((sum, item) => sum + item.depotArea, 0)
	const totalEmount = tableDataList.value.reduce((sum, item) => sum + item.warehouseCount, 0)
	const totalRmount = tableDataList.value.reduce((sum, item) => sum + item.tankCapacitySum, 0)
	const totalTmount = tableDataList.value.reduce((sum, item) => sum + item.ygs, 0)
	const totalYmount = tableDataList.value.reduce((sum, item) => sum + item.designCapacitySum, 0)
	const totalUmount = tableDataList.value.reduce((sum, item) => sum + item.emptySum, 0)
	return {
		key: 'summary',
		dwmc: '合计',
		depotArea: totalAmount.toFixed(3),
		warehouseCount: totalEmount.toFixed(3),
		tankCapacitySum: totalRmount.toFixed(3),
		ygs: totalTmount.toFixed(3),
		designCapacitySum: totalYmount.toFixed(3),
		emptySum: totalUmount.toFixed(3)
	}
})

// 添加合计行后的数据源
const tableData = computed(() => {
	const summary = summaryData.value
	return summary ? [summary, ...tableDataList.value] : tableDataList.value
})

function onClose(data) {
	emit('closeDrawer', data)
}
// 查询
const searchData = () => {
	getData()
}
// 列表数据
const getData = () => {
	const fd = { ...informationData.value }
	reserveDataApi.houseCountPage(fd).then((res) => {
		tableDataList.value = []
		tableDataList.value = res.records
	})
}
onMounted(() => {
	getData()
})
// 全屏显示
function fullScreen() {
	if (drawerStyle.value) {
		drawerStyle.value = ''
	} else {
		drawerStyle.value = { position: 'absolute' }
	}
}
</script>
<style scoped lang="less">
.statisticsTableAll {
	::v-deep(.ant-table) {
		height: calc(100vh - 260px);
	}
}

/deep/.ant-drawer-body {
	overflow: hidden;
}

.silt-box {
	display: flex;
	padding-left: 32px;
	margin-bottom: 32px;

	.silt-title {
		display: flex;
		margin-right: 32px;
	}
}

.location-box {
	cursor: pointer;
	color: #40a9ff;
	font-size: 20px;
}

/deep/.ant-table-pagination.ant-pagination {
	display: none !important;
}
</style>
