<!--
 * @Author: zwq
 * @Date: 2024-05-15 16:18:19
 * @LastEditors: zwq
 * @LastEditTime: 2024-05-16 09:57:13
 * @Description:
-->
<template>
	<div class="app-container">
		<el-table
			:data="tableData"
			:header-cell-style="{
				background: '#F2F4F9',
				color: '#606266',
			}"
			border
			:cell-style="cellStyle"
			:span-method="objectSpanMethod"
			empty-text="暂无数据"
			style="width: 100%"
			ref="dataList">
			<el-table-column type="index" fixed="left" label="#" align="center" />
			<el-table-column prop="name" label="仓库名"></el-table-column>
			<el-table-column prop="code" label="仓库编码"></el-table-column>
			<el-table-column
				v-for="item in columns"
				:key="item.label"
				align="center"
				:label="item.label">
				<el-table-column
					v-for="it in item.children"
					:key="it.prop"
					:prop="it.prop"
					align="center"
					header-align="left"
					:label="it.label">
					<template slot-scope="scope">
						{{ scope.row[it.prop] }}
					</template>
				</el-table-column>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
export default {
	data() {
		return {
			tableData: [
				{
					name: 1,
					code: '1',
					prop1: '1',
					prop2: '2',
					prop3: '3',
					prop4: '4',
					prop5: '5',
					prop6: '6',
					span: [2, 4],
				},
				{
					name: 2,
					code: '2',
					prop1: '7',
					prop2: '8',
					prop3: '9',
					prop4: '10',
					prop5: '11',
					prop6: '12',
					span: [1, 5],
				},
			],
			columns: [
				{
					label: '2023/1',
					children: [
						{
							label: '1',
							prop: 'prop1',
						},
						{
							label: '15',
							prop: 'prop2',
						},
						{
							label: '30',
							prop: 'prop3',
						},
					],
				},
				{
					label: '2023/2',
					children: [
						{
							label: '1',
							prop: 'prop4',
						},
						{
							label: '15',
							prop: 'prop5',
						},
						{
							label: '30',
							prop: 'prop6',
						},
					],
				},
			],
			color: [
				'#5470c6',
				'#91cc75',
				'#fac858',
				'#ee6666',
				'#73c0de',
				'#3ba272',
				'#fc8452',
				'#9a60b4',
				'#ea7ccc',
			],
		};
	},
	components: {},
	created() {},
	methods: {
		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
			let i = 0;
			if (columnIndex === 3) {
				return [1, row.span[0]];
			} else if (columnIndex === 3 + row.span[i]) {
				i += 1;
				return [1, row.span[i]];
			} else if (columnIndex > 3) {
				return [0, 0];
			}
		},
		cellStyle({ row, column, rowIndex, columnIndex }) {
			let i = 0;
			if (columnIndex === 3) {
				return {
					color: 'white',
					borderRadius: '15px',
					background: this.color[0],
				};
			} else if (columnIndex === 3 + row.span[i]) {
				i += 1;
				return {
					color: 'white',
					borderRadius: '15px',
					background: i < 9 ? this.color[i] : 'none',
				};
			}
		},
	},
};
</script>
<style>
.app-container .el-table .el-table__cell {
	padding: 0;
	height: 35px;
}
.el-table .warning-row {
	background: oldlace;
}

.el-table .success-row {
	background: #f0f9eb;
}
</style>
