/**
* author: Louie Butch
* date: 2020/11/2
* email: 844089357@qq.com
* desc:
*/
<template>
    <!--    有查询 表    -->
    <div ref="tableBox" class="hd-table" v-if="hasSearchRow && isShowTable"
         :style="heightFit || height === '100%' ? {height: '100%'} : null">
        <div class="hd-table-head">
            <el-table
                    ref="tableHead"
                    size="mini"
                    border
                    class="table-head"
                    key="tableHead"
                    :data="tableHeadData"
                    :header-row-style="setHeadStyle"
                    :empty-text="'-'"
                    :row-class-name="_setRowClassName"
                    :hasSearchRow="hasSearchRow"
                    @select-all="selectAll"
                    @sort-change="_sortChange"
                    @header-dragend="headerDragend"
            >
                <el-table-column v-if="hasExpandRow" type="expand"></el-table-column>
                <template v-for="(column, index) in tableColumns" :key="index">
                    <el-table-column v-if="column.label === '操作'"
                                     :label="column.label"
                                     :prop="column.prop"
                                     :width="column.width+''"
                                     :min-width="column.minWidth+''"
                                     :index="index"
                                     :resizable="column.resizable === false ? false : true"
                                     :align="column.align"
                                     :fixed="column.fixed">
                        <template>
                            <el-button type="text" size="mini" @click="clearRow">重置</el-button>
                        </template>
                    </el-table-column>
                    <hd-table-column v-else
                                     :readOnlyColumns="readOnlyColumns"
                                     :show="column.show"
                                     :label="column.label"
                                     :prop="column.prop"
                                     :width="column.width + ''"
                                     :min-width="column.minWidth+''"
                                     :index="index"
                                     :sortable="column.sortable"
                                     :multiple="column.multiple"
                                     :type="column.type"
                                     :align="column.align"
                                     :resizable="column.resizable === false ? false : true"
                                     :default-prop="column.defaultProp"
                                     :remote-method="column.remoteMethod"
                                     :options="column.options"
                                     :fixed="column.fixed"></hd-table-column>
                </template>
            </el-table>
            <div v-if="scrollY" class="head-scroll-bar"
                 style="height: 63px;box-sizing: border-box;border: 1px solid #EBEEF5;border-left: none"
                 :style="{width: 17 + 'px'}"></div>
        </div>

        <div ref="bodyBox" class="body-box" style="box-sizing:border-box;height: calc(100% - 63px);">
            <el-table size="mini"
                      :data="tableList"
                      border
                      ref="tableBody"
                      key="tableBody"
                      :lazy="lazy"
                      :row-key="rowKey"
                      :highlight-current-row="true"
                      @current-change="currentChange"
                      :expand-row-keys="expandRowKeys"
                      :tree-props="treeProps"
                      :default-expand-all="expandAll"
                      :header-row-style="setHeadStyle"
                      :current-row-key="currentRowKey"
                      :cell-class-name="setCellClass"
                      :header-cell-class-name="setHeaderCellClass"
                      :row-class-name="setRowClassName"
                      :row-style="setRowStyle"
                      @select="(selection, row) => {$emit('select', selection, row)}"
                      @select-all="(selection) => {$emit('selectAll', selection)}"
                      :load="lazyLoad"
                      :height="height"
                      :max-height="maxHeight"
                      @sort-change="sortChange"
                      @selection-change="selectionChange"
                      @row-dblclick="rowDblclick"
                      @expand-change="expandChange"
                      :show-summary="showSummary"
                      :sum-text="sumText"
                      :summary-method="summaryMethod"
                      :span-method="spanMethod"
                      :show-header="false"
                      :cell-style="cellStyle"
                      @row-click="rowClick"
                      @cell-click="cellClick">
                <span slot="empty">{{hasSearchRow ? '' : '暂无数据'}}</span>
                <slot></slot>
            </el-table>
        </div>
    </div>

    <!--    无查询 表    -->
    <div class="hd-table" ref="tableBox" v-else-if="!hasSearchRow && isShowTable"
         :style="heightFit || height === '100%' ? {height: '100%'} : null">
        <el-table :data="tableList"
                  ref="hdTable"
                  key="hdTable"
                  size="mini"
                  border
                  :lazy="lazy"
                  :row-key="rowKey"
                  :highlight-current-row="true"
                  @current-change="currentChange"
                  :expand-row-keys="expandRowKeys"
                  :tree-props="treeProps"
                  :default-expand-all="expandAll"
                  :header-row-style="setHeadStyle"
                  :current-row-key="currentRowKey"
                  :cell-class-name="setCellClass"
                  :header-cell-class-name="setHeaderCellClass"
                  :row-class-name="_setRowClassName"
                  :row-style="setRowStyle"
                  @select="(selection, row) => {$emit('select', selection, row)}"
                  @select-all="(selection) => {$emit('selectAll', selection)}"
                  :load="lazyLoad"
                  :height="height"
                  :max-height="maxHeight"
                  style="width: 100%"
                  @sort-change="sortChange"
                  @selection-change="selectionChange"
                  @row-dblclick="rowDblclick"
                  @expand-change="expandChange"
                  :show-summary="showSummary"
                  :sum-text="sumText"
                  :summary-method="summaryMethod"
                  :span-method="spanMethod"
                  :show-header="showHeader"
                  :cell-style="cellStyle"
                  @row-click="rowClick"
                  @cell-click="cellClick">
            <span slot="empty">{{emptyText === '-' ? '' : (emptyText ?  emptyText : '暂无数据')}}</span>
            <slot></slot>
        </el-table>
    </div>
</template>

<script>
	import Tool from '../../../assets/js/tool';
	import hdTableColumn from '../../hdTableColumn/src/hdTableColumn';
	export default {
		name: 'hd-table',
		components: {hdTableColumn},
		props: {
			tableList: {
				type: Array,
				default: () => []
			},
			rowKey: {
				type: String,
				default: ''
			},
			expandAll: {
				type: Boolean,
				default: true
			},
			currentRowKey: {
				type: [String, Number],
				default: ''
			},
			isTree: {
				type: Boolean,
				default: false
			},
			lazy: {
				type: Boolean,
				default: false
			},
			lazyLoad: {
				type: Function,
				default: () => {
				}
			},
			emptyText: {
				type: String,
				default: '暂无数据'
			},
			heightFit: {
				type: Boolean,
				default: false
			},
			height: {
				type: String,
				default: null
			},
			showSummary: {
				type: Boolean,
				default: false
			},
			sumText: {
				type: String,
				default: '合计'
			},
			summaryMethod: {
				type: Function,
				default: () => {
				}
			},
			spanMethod: {
				type: Function,
				default: () => {
				}
			},
			showHeader: {
				type: Boolean,
				default: true
			},
			cellStyle: {
				type: Function,
				default: () => {
					return {};
				}
			},
			setRowClassName: {
				type: Function,
				default: () => {
					return '';
				}
			},
			setRowStyle: {
				type: Function,
				default: () => {
					return {};
				}
			},
			setHeaderCellClass: {
				type: Function,
				default: () => {
					return '';
				}
			},
			hasSearchRow: {
				type: Boolean,
				default: false
			},
			tableColumns: {
				type: Array,
				default: () => []
			},
			hasSpecialScroll: {
				type: Boolean,
				default: false
			},
			hasExpandRow: {
				type: Boolean,
				default: false
			},
			resizable: {
				type: Boolean,
				default: true
			},
			treeProps: {
				type: Object,
				default: () => {
					return {children: 'children', hasChildren: 'hasChildren'};
				}
			},
			readOnlyColumns:{
				type: Array,
				default: () => []
			},
			expandRowKeys: {
				type: Array,
				default: () => null
			},
			searchList: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			expandAll() {
				this.reRenderTable();
			},
			tableList: {
				handler() {
					this.$nextTick(() => {
						this.$nextTick(() => {
							if (this.hasSearchRow) {
								let system = Tool.checkSys();

								if (!this.$refs.tableBody) {
									this.scrollY = false;
								} else {
									this.scrollY = system === 'mac' ? false : this.$refs.tableBody.layout.scrollY;
									if(this.showSummary){
										this.doLayout();
									}
								}
							}
						});
					});
				},
				deep: true
			},

			searchList: {
				handler(newVal) {
					if (newVal.length > 0) {
						let firstRow = {};

						newVal.forEach((item) => {

							if (item.fieldType === 'text') {
								item._value = '';
							} else {
								item._value = [];
							}

							if (item.remark) {
								if(item.remark!=='[]'){
									item._options = JSON.parse(item.remark);
								}else{
									let result=this.tableColumns.filter((column)=>{
										return column.prop===item.fieldName;
                                    });
									if(result && result.length>0){
										item._options=result[0].options;
                                    }else{
										item._options=[];
                                    }
                                }
							}

							firstRow[item.fieldName] = item;

							// 定义不可枚举属性 _isSearchRow
							Object.defineProperty(firstRow, '_isSearchRow', {
								value: true,
								enumerable: false
							});
						});

						// this.firstRow = firstRow;
						// this.tableHeadData.push(this.firstRow);
						// console.log(this.firstRow, 123);
						this.copyFirstRow = JSON.stringify(firstRow);
						this.tableHeadData = [JSON.parse(this.copyFirstRow)];
					}
				},
				deep: true,
				immediate: true
			},

			// firstRow: {
			//     deep: true,
			//     immediate: true,
			//     handler(val){
			//         if (val) {
			//             this.tableHeadData = [val];
			//         }
			//     }
			// }
			// initFilters: {
			//     handler(newVal, oldVal) {
			//         let firstRow = {};
			//
			//         let searchList = this.firstRow ? $.extend(true, {}, this.firstRow) : null;
			//
			//         if (this.initFilters && this.initFilters !== {} && searchList) {
			//             for (let key in searchList) {
			//                 let item = searchList[key];
			//
			//                 if (item.fieldType === 'text') {
			//                     item._value = '';
			//                 } else {
			//                     item._value = [];
			//                 }
			//
			//                 if (item.remark) {
			//                     item._options = JSON.parse(item.remark);
			//                 }
			//                 if (this.initFilters && this.initFilters[item.fieldName]) {
			//                     item._value = this.initFilters[item.fieldName];
			//                 }
			//
			//                 firstRow[item.fieldName] = item;
			//
			//                 // 定义不可枚举属性 _isSearchRow
			//                 Object.defineProperty(firstRow, '_isSearchRow', {
			//                     value: true,
			//                     enumerable: false
			//                 });
			//             }
			//
			//             this.firstRow = firstRow;
			//             this.copyFirstRow = JSON.stringify(firstRow);
			//         }
			//     },
			//     deep: true,
			//     immediate: true
			// }
		},
		// computed: {
		//     tableHeadData() {
		//         let data = this.firstRow ? [this.firstRow] : [];
		//
		//         console.log(data, 222);
		//
		//         return data;
		//     }
		// },
		data() {
			return {
				isShowTable: true,
				maxHeight: 'auto',
				firstRow: null,
				copyFirstRow: null,
				scrollYWidth: 0,
				scrollY: false,
				startLeft: 0,
				$rowOfTitles: [],
				tableHeadData: []
			};
		},
		updated() {
			if (this.heightFit) {
				this.maxHeight = this.$refs.tableBox.clientHeight + 'px';
			}
			this.$nextTick(() => {
				let tableBody = this.$refs.tableBody;

				if (this.hasSearchRow) {

					let system = Tool.checkSys();

					if (!this.$refs.tableBody) {
						this.scrollY = false;
					} else {
						this.scrollY = system === 'mac' ? false : this.$refs.tableBody.layout.scrollY;
					}

					if (this.hasSearchRow) {
						tableBody.bodyWrapper.addEventListener('scroll', this.syncPosition, {passive: true});
					}
					if (this.hasSpecialScroll) {
						this.bindScrollEventNew();
					}
				}
			});
		},
		mounted() {
			this.$nextTick(() => {

				let tableBody = this.$refs.tableBody;

				window.onresize = () => {
					return (() => {
						if (this.heightFit) {
							this.maxHeight = this.$refs.tableBox.clientHeight + 'px';
						}
						this.$nextTick(() => {
							if (this.hasSearchRow) {
								let system = Tool.checkSys();

								this.scrollY = system === 'mac' ? false : tableBody.layout.scrollY;
							}
						});
					})();
				};

				if (this.hasSearchRow) {
					tableBody.bodyWrapper.addEventListener('scroll', this.syncPosition, {passive: true});
				}
				if (this.hasSpecialScroll) {
					this.bindScrollEventNew();
				}
			});

		},
		beforeDestroy() {
			if (this.hasSearchRow) {
				let tableBody = this.$refs.tableBody.bodyWrapper;

				//tableBody.removeEventListener('scroll', this.syncPosition, { passive: true });
				tableBody.addEventListener('scroll', this.syncPosition, {passive: true});
			}
			if (this.hasSpecialScroll) {
				this.bindScrollEventNew();
			}
		},
		methods: {
			debounceFun: Tool.debounce(500, (newVal, oldValue, vm) => {
				vm.setFilters(newVal, oldValue);
			}),

			// 借鉴原生代码 element-ui table.vue
			// TODO 使用 CSS transform
			syncPosition: Tool.throttle(20, function () {
				const tbodyWrapper = this.$refs.tableBody.bodyWrapper;
				const {scrollLeft} = tbodyWrapper;

				if (this.hasSearchRow) {
					const {tableHead} = this.$refs;

					if (tableHead) {
						// 处理表体滚动
						tableHead.bodyWrapper.scrollLeft = scrollLeft;

						let {headerWrapper} = tableHead.$refs;

						// 处理表头滚动
						if (headerWrapper) {
							headerWrapper.scrollLeft = scrollLeft;
						}
					}
				}

			}),
			bindScrollEventNew() {
				let tbodyWrapper = this.$refs.tableBody.bodyWrapper;

				let startLeft = tbodyWrapper.scrollLeft;

				let $rowOfTitles = tbodyWrapper.getElementsByClassName('rowOfTitle');

				//let checkClass=function(dir){
				//	$rowOfTitles.forEach(($item)=>{
				//		$item.querySelector('.cell').style.paddingLeft=startLeft+10+'px';
				//	});
				//};
				tbodyWrapper.addEventListener('scroll', function () {
					//横向滚动,添加fixing
					if (Math.abs(tbodyWrapper.scrollLeft - startLeft) > 0) {
						startLeft = tbodyWrapper.scrollLeft;
						//checkClass();
						$rowOfTitles.forEach(($item) => {
							$item.querySelector('.cell').style.paddingLeft = startLeft + 10 + 'px';
						});
					}
				});
			},

			setFilters() {
				let filterList = this.setFilterList();

				this.$emit('searchChange', filterList);
			},

			setFilterList() {
				// console.log(this.firstRow);
				//
				// this.tableHeadData = [this.firstRow];

				let filters = [];

				let val = this.tableHeadData[0];

				Object.keys(val).forEach((key) => {

					let fieldType = val[key].fieldType;

					let _value = val[key]._value;

					let itemData = {
						key,
						cod: '',
						val: _value
					};

					if (_value && _value.length > 0) {
						if (fieldType === 'text') {
							itemData.cod = 'LIKE';
							filters.push(itemData);
						} else if (fieldType === 'number' || fieldType === 'dateRange') {
							itemData.cod = 'BT';
							if (_value[0] < _value[1]) {
								filters.push(itemData);
							}
						} else if (fieldType === 'simpleSelect' || fieldType === 'dictionary') {
							itemData.cod = 'IN';
							filters.push(itemData);
						}
					}
				});

				return filters;
			},

			selectAll(selection) {
				this.$refs.tableBody.toggleAllSelection();
			},

			clearRow(isRefresh = true) {
				// this.firstRow = JSON.parse(this.copyFirstRow);
				this.tableHeadData = [JSON.parse(this.copyFirstRow)];
				if (isRefresh) {
					this.setFilters();
				}
			},

			/**
			 * 设置表头样式
			 */
			setHeadStyle() {
				return {
					backgroundColor: '#D7DBE0',
					height: 35 + 'px'
				};
			},

			/**
			 * 设置第一列类名
			 * @param {columnIndex}
			 */
			setCellClass({columnIndex}) {
				if (columnIndex === 0 && this.isTree) {
					return 'first-column';
				} else {
					return '';
				}
			},

			/**
			 * 设置当前行
			 * @param row
			 */
			setCurrentRow(row) {
				if (this.hasSearchRow) {
					this.$refs.tableBody.setCurrentRow(row);
				} else {
					this.$refs.hdTable.setCurrentRow(row);
				}

			},

			toggleRowExpansion(row, expanded) {
				if (this.hasSearchRow) {
					this.$refs.tableBody.toggleRowExpansion(row, expanded);
				} else {
					this.$refs.hdTable.toggleRowExpansion(row, expanded);
				}
			},

			/**
			 * 行点击事件
			 * @param row
			 */
			rowClick(row, column, e) {
				if (row._isSearchRow) {
					return;
				}
				this.$emit('rowClick', row, column, e);
			},
			rowDblclick(row, column, e) {
				if (row._isSearchRow) {
					return;
				}

				this.$emit('rowDblClick', row, column, e);
			},

			cellClick(row, column, cell, event) {
				this.$emit('cellClick', row, column, cell, event);
			},

			expandChange(row, expandedRows) {
				this.$emit('expand-change', row, expandedRows);

				// 解决树形组件 展开收起滚动条的 位置偏差
				this.$nextTick(() => {
					this.$nextTick(() => {
						if (this.$refs.tableBody) {
							let system = Tool.checkSys();

							this.scrollY = system === 'mac' ? false : this.$refs.tableBody.layout.scrollY;
						}
					});
				});
			},
			/**
			 * 排序变化
			 * @param sortData
			 */
			sortChange(sortData) {
				this.$emit('sortChange', sortData);
			},

			_sortChange({prop, order}) {
				this.$refs.tableBody.sort(prop, order);
			},

			/**
			 * 选项发生改变
			 * @param selection
			 */
			selectionChange(selection) {
				this.$emit('selectionChange', selection);
			},

			setHeight(height) {
				if (typeof height === 'string') {
					this.height = height;
				} else if (typeof height === 'number') {
					this.height = height + 'px';
				}
			},
			currentChange(newRow, oldRow) {
				this.$emit('currentChange', newRow, oldRow);
			},
			doLayout() {
				if (this.hasSearchRow) {
					//this.$refs.tableBody.doLayout();
					this.$nextTick(()=>{
						if(this.tableList && this.tableList.length>0 && this.$refs.tableBody){
							this.$refs.tableBody.doLayout();
						}
					});
				} else {
					this.$refs.hdTable.doLayout();
				}

			},
			clearSelection() {
				this.$refs.hdTable.clearSelection();
			},

			/**
			 * 行选中
			 * @param rows
			 */
			rowSelection(rows = []) {
				rows.forEach((row) => {
					this.$refs.hdTable.toggleRowSelection(row);
				});
			},

			_setRowClassName({row, rowIndex}) {
				let className = this.setRowClassName({row, rowIndex});

				if (this.hasSearchRow && rowIndex === 0) {
					className += ' is-search-row';
				}

				return className;
			},

			headerDragend(newWidth, oldWidth, column) {
				this.tableColumns.forEach((col) => {
					if (col.label === column.label && col.prop === column.property) {
						col.width = newWidth;
					}
				});
			},

			reRenderTable() {
				this.isShowTable = false;
				this.$nextTick(() => {
					this.isShowTable = true;
				});
			}

		}
	};
</script>

<style scoped lang="scss">
    .hd-table /deep/ .el-icon-arrow-right {
        font-size: 16px;

        &::before {
            content: "\e791";
            color: #096db6;
        }
    }

    .hd-table {
        .hd-table-head {
            height: 63px;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start
        }
    }

    .hd-table /deep/ {
        width: 100%;
        /*height: 100%;*/
        /*overflow: hidden;*/

        .el-table td, .el-table th {
            padding: 0;
        }

        .el-table__header tr {
            height: 30px !important;
        }

        .el-table--mini td, .el-table--mini th {
            padding: 0;
        }

        .el-table .cell {
            line-height: 30px;
            /*height: 31px;*/
        }

        .el-table th {
            background: none;
        }

        .el-table__placeholder {
            min-width: 20px;
        }

        .el-table__header .cell {
            /*display: flex;*/
            /*justify-content: space-between;*/
            /*align-items: center;*/
            font-size: 12px;
            color: #45474d;
            font-weight: normal;
        }

        .first-column .cell {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .el-input__inner, .el-range-input {
            padding: 0;
            border: none;
            background: none;
            height: 30px;
            line-height: 30px;
        }

        .headTable .el-input__inner, .headTable .el-range-input {
            padding: 0;
            border: none;
            background: none;
            height: 30px;
            line-height: 30px;
        }

        .headTable .el-table td {
            border-bottom: 1px solid #fff;
        }

        .headTable .el-table__expand-column .el-table__expand-icon {
            display: none;
        }

        .el-range-editor--mini .el-range-separator {
            line-height: 30px;
        }

        .is-center .el-input__inner {
            text-align: center;
        }

        .el-input-number .el-input__inner {
            text-align: right;
        }

        .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
            border-color: #096db6;
            background-color: #096db6;
        }

        .forbidden-row .cell > span,
        .forbidden-row .cell,
        .forbidden-row .cell .el-input.is-disabled .el-input__inner {
            text-decoration: line-through;
            color: #C0C4CC;
        }

        .is-search-row td,
        .is-search-row td,
        .is-search-row .cell {
            padding: 0;
        }

        .is-search-row .el-input__inner {
            padding-left: 10px;
            text-align: left !important;
        }

        .is-search-row .el-date-editor .el-range__icon {
            display: none !important;
        }

        .is-search-row .el-table-column--selection .cell,
        .is-search-row .el-table-column--selection .cell,
        {
            display: none;
        }

        .table-head .el-table__body-wrapper {
            /*overflow: hidden;*/
            overflow-x: hidden;
        }

        .table-head .el-table__fixed-body-wrapper {
            height: 30px !important;
        }

        .table-head .el-table__fixed-right-patch {
            height: 63px !important;
        }

        .table-head .el-table__fixed-right {
            height: 63px !important;
        }

        .table-head:before {
            height: 0;
        }

        /*.el-table__empty-block {*/
        /*    width: 100% !important;*/
        /*}*/
    }
</style>