<template>
	<div>
		<vxe-toolbar ref="toolbarRef" print></vxe-toolbar>

		<vxe-table
			border
			show-footer
			ref="tableRef"
			height="800"
			align="center"
			:loading="loading"
			:print-config="{}"
			:column-config="{ resizable: true, width: 90 }"
			:merge-cells="mergeCells"
			:merge-footer-items="mergeFooterItems"
			:footer-method="footerMethod"
			:data="tableData"
		>
			<vxe-column field="a" title="名称"></vxe-column>
			<vxe-column field="c" title="总计"></vxe-column>
			<vxe-colgroup field="b" title="教育经费投入">
				<vxe-colgroup title="基本投入">
					<vxe-colgroup title="合计">
						<vxe-column field="d" title="合计"></vxe-column>
						<vxe-column field="e" title="比上年增长"></vxe-column>
					</vxe-colgroup>
					<vxe-column field="f" title="人员经费"></vxe-column>
					<vxe-column field="g" title="公用经费"></vxe-column>
					<vxe-colgroup title="其他经费">
						<vxe-column field="w" title="合计"></vxe-column>
						<vxe-colgroup title="其中">
							<vxe-column field="h" title="标准化建设"></vxe-column>
							<vxe-column field="i" title="信息化建设"></vxe-column>
						</vxe-colgroup>
					</vxe-colgroup>
				</vxe-colgroup>
			</vxe-colgroup>
		</vxe-table>
	</div>
</template>

<script setup>
	import { ref, nextTick } from 'vue'
	const loading = ref(false)
	const tableData = ref([])
	const mergeCells = ref([])
	const mergeFooterItems = ref([])
	const tableRef = ref()
	const toolbarRef = ref()
	const handleMerge = () => {
		// 根据行数据计算合并规则
		mergeCells.value = [{ row: 0, col: 0, rowspan: 4, colspan: 2 }]
		// 根据行数据计算表尾合并规则
		mergeFooterItems.value = [{ row: 0, col: 1, rowspan: 1, colspan: 5 }]
	}
	const footerMethod = ({ columns }) => {
		return [columns.map((column, index) => index), columns.map((column, index) => 1000 + index)]
	}
	loading.value = true
	setTimeout(() => {
		const list = []
		for (let index = 0; index < 15; index++) {
			list.push({
				a: 'a' + index,
				b: 'b' + index,
				c: 'c' + index,
				d: 'd' + index,
				e: 'e' + index,
				f: 'f' + index,
				g: 'g' + index,
				h: 'h' + index,
				i: 'i' + index,
				j: 'j' + index,
				k: 'k' + index,
				l: 'l' + index,
				m: 'm' + index,
				n: 'n' + index,
				o: 'o' + index,
				p: 'p' + index,
				q: 'q' + index,
				r: 'r' + index,
				s: 's' + index,
				t: 't' + index,
				u: 'u' + index,
				v: 'v' + index,
				w: 'w' + index
			})
		}
		loading.value = false
		tableData.value = list
		handleMerge()
	}, 100)
	nextTick(() => {
		// 将表格和工具栏进行关联
		const $table = tableRef.value
		const $toolbar = toolbarRef.value
		if ($table && $toolbar) {
			$table.connect($toolbar)
		}
	})
</script>
