<template>
	<div class="page-table" :style="{ height: height, 'max-height': maxHeight }">
		<el-table
			ref="multipleTable"
			v-loading="config.loading"
			:data="config.data"
			tooltip-effect="dark"
			border
			highlight-current-row
			max-height="100%"
      height="100%"
			element-loading-text="正在加载"
			:row-class-name="tableRowClassName"
			:default-sort="defaultSort"
			:show-summary="config.showSummary"
			:summary-method="getSummaries"
			@select="select"
			@select-all="selectAll"
			@selection-change="handleSelectionChange"
			@current-change="currentChange"
			@row-click="rowClick"
			@cell-click="cellClick"
			@sort-change="sortClick"
		>
			<template slot="empty">
				<div class="no-data">
					<!-- <div class="img">
						<el-image :src="require('@/assets/img/noData.png')"></el-image>
					</div> -->
					<span class="text">未找到数据</span>
				</div>
			</template>
			<el-table-column
				v-if="config.selection"
				align="center"
				type="selection"
				:sortable="item.sortable"
				:fixed="config.fixed"
				width="60"
			></el-table-column>
			<el-table-column
				v-if="config.index"
				:fixed="config.fixed"
				align="center"
				label="序号"
				type="index"
				width="60"
			></el-table-column>
			<!-- 存在二级表头的情况 -->
			<el-table-column
				v-for="(item, index) in config.column"
				:key="index"
				:label="item.label"
				:fixed="item.fixed"
				:align="item.align || 'center'"
				:width="item.width"
				:sortable="item.sortable"
				:prop="watchProps(item.prop)"
			>
				<table-column-item
					v-if="!item.parent"
					slot-scope="scope"
					:scope="scope"
					:item="item"
					@rowBtnClick="btnClick"
				></table-column-item>
				<template v-if="item.parent">
					<el-table-column
						v-for="(child, childIndex) in item.column"
						:key="childIndex"
						:label="child.label"
						:fixed="child.fixed"
						:align="child.align || 'center'"
						:width="child.width"
						:sortable="child.sortable"
						:prop="watchProps(item.prop)"
					>
						<table-column-item
							slot-scope="scope"
							:item="child"
							:scope="scope"
							@rowBtnClick="btnClick"
						></table-column-item>
					</el-table-column>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import tableColumnItem from './table-column-item.vue';
import { tableDataInit } from './tableDataType';
export default {
	components: { tableColumnItem },
	props: {
		config: {
			type: Object,
			default: () => tableDataInit,
		},

		select: {
			type: Function,
			default: () => {},
		},
		selectAll: {
			type: Function,
			default: () => {},
		},
		height: {
			type: String,
			default: '100%',
		},
		maxHeight: {
			type: String,
			default: '100%',
		},
		defaultSort: {},
	},
	data() {
		return {
			multipleSelection: [],
		};
	},
	created() {
		this.getData();
	},
	updated() {
		// 刷新表格底部汇总
		this.$nextTick(() => {
			this.$refs['multipleTable'].doLayout();
		});
	},
	methods: {
		getData() {
			this.config.query && this.config.query();
		},
		// 设置prop值，如果是拼接的prop则不会设置，影响底部求和
		watchProps(prop) {
			if (Array.isArray(prop)) {
				return '';
			} else {
				return prop;
			}
		},
		/**
		 * 每行按钮的点击事件
		 * @returns
		 * row - 每行的数据
		 * index - 按钮的下标
		 * btnItem - 按钮的item数据
		 */
		btnClick(item, index, btnItem) {
			this.$emit('rowBtnClick', item, index, btnItem);
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
			this.$emit('selection', val);
		},
		//  hover 进入时会触发该事件
		cellClick(row, column, cell, event) {
			this.$emit('cellClick', row, column, cell, event);
		},
		//  点击显示高亮
		currentChange(currentRow) {
			this.$emit('currentChange', currentRow);
		},
		// tableRowClassName(d) {
		// 补充1个索引字段，方便后期删除
		// Object.defineProperty(d.row, 'index', {
		// 	value: d.rowIndex,
		// 	writable: true,
		// });
		// },
		// 点击某一列
		rowClick(currentRow) {
			this.$emit('rowClick', currentRow);
		},
		sortClick(column) {
			this.$emit('sortClick', column);
		},
		// 表格底部汇总计算
		getSummaries(param) {
			const { columns, data } = param;
			const config = this.config;
			const configColumn = config.column;
			const sums = [];
			columns.forEach((column, index) => {
				const property = column.property; //渲染字段的key
				const columnSumConfig = configColumn.find(configSumItem => {
					if (configSumItem.prop === property && configSumItem.sum) {
						return true;
					}
				});
				let unit = ''; //单位
				let toFixed = 0; //保留小数，默认0
				let isNaNTitle = ' '; //NaN时展示的值，默认空
				//处理配置的信息
				if (columnSumConfig && columnSumConfig.sum) {
					const sum = columnSumConfig.sum;
					// 如果sum.hide存在，则不计算
					if (sum.notComputed) {
						sums[index] = sum.isNaNTitle || ' ';
						return;
					}
					// 如果存在title，则直接替换值
					if (sum.title) {
						sums[index] = sum.title;
						return;
					}
					unit = sum.unit ? ' ' + sum.unit : '';
					toFixed = sum.toFixed * 1 || 0;
					isNaNTitle = sum.isNaNTitle ? sum.isNaNTitle : ' ';
				}

				const values = data.map(item => Number(item[property]));
				// 判断是否全部为NaN
				if (!values.every(value => isNaN(value))) {
					sums[index] = values.reduce((prev, curr) => {
						const value = Number(curr);
						if (!isNaN(value)) {
							return prev + curr;
						} else {
							return prev;
						}
					}, 0);
					sums[index] = sums[index].toFixed(toFixed) + unit;
				} else {
					sums[index] = isNaNTitle;
				}
			});
			return sums;
		},
		// 行类名
		tableRowClassName({ rowIndex }) {
			if (!this.config.rowClassName) return;
			if (rowIndex % 4 === 1) {
				return 'warning-row';
			} else if (rowIndex % 4 === 3) {
				return 'success-row';
			}
			return '';
		},
	},
};
</script>
<style scoped lang="scss">
</style>
