<script>
export default {
    name: "enoCustomTable",
    props: {
        //表格id - 配合自动化测试
        tableId: {
            type: String,
            require: true
        },
        //表格配置项
        tableProp: {
            type: Object,
            require: true
        },
        //表格加载状态
        tableContentLoading: Boolean,
        //表格绑定事件
        tableListener: Object,
        //表格内容列表
        columnList: {
            type: Array,
            require: true
        },
        //分页配置项
        pagerProp: Object,
        //分页绑定事件
        pagerListener: Object
    },
    computed: {
        // hasTagsView() {
        //     return this.$store.getters['settings/tagsView'];
        // }
    },
    mounted() {
        this.tableProp.maxHeight ||
            this.$nextTick(() => {
                /*
                 * 固定表头
                 * */

                //console.log(this.$refs.pagination.$refs.elPagination);

                let tableRefs = this.$refs.tableContent.$refs;
                let tableHeaderStyle = tableRefs.headerWrapper.getBoundingClientRect();

                let pageHeight = 0;
                let pageMarginTop = "68px";
                if (this.pagerProp) {
                    //分页信息
                    let pageRefsStyle = this.$refs.pagination.$el.getBoundingClientRect();
                    pageHeight = pageRefsStyle.height;
                    let pageClassStyle = document.getElementsByClassName(
                        "el-pagination"
                    );
                    // pageMarginTop = window.getComputedStyle(pageClassStyle[0]).marginTop;
                }
                //母版页信息
                let mainStyle = document.getElementsByClassName("main");
                if(mainStyle && mainStyle.length){
                  let mainPaddingBottom = window.getComputedStyle(mainStyle[0])
                      .paddingBottom;
                  //tbody最大高度
                  let bodyMaxHeight = `calc(100vh - 50px - 34px- 64px - ${tableHeaderStyle.height}px - ${pageHeight}px - ${pageMarginTop} - ${mainPaddingBottom} - 5px)`;
                  /*
                   * el-table中，极限场景下使用了三个table来分别模拟正常表格列、左侧固定表格列、右侧固定表格列
                   * 所以此处需要循环判断三个表格的wrapper是否存在并赋值
                   * */
                  let bodyWrapper = tableRefs.bodyWrapper;
                  let fixedBodyWrapper = tableRefs.fixedBodyWrapper;
                  let rightFixedBodyWrapper = tableRefs.rightFixedBodyWrapper;
                  [bodyWrapper, fixedBodyWrapper, rightFixedBodyWrapper].forEach(
                      item => {
                          item && (item.style.maxHeight = bodyMaxHeight);
                      }
                  );
                }
                else{
                  //tbody最大高度
                  let bodyMaxHeight = `calc(100vh - 50px - 34px- 64px - ${tableHeaderStyle.height}px - ${pageHeight}px - ${pageMarginTop}  - 5px)`

                  /*
                   * el-table中，极限场景下使用了三个table来分别模拟正常表格列、左侧固定表格列、右侧固定表格列
                   * 所以此处需要循环判断三个表格的wrapper是否存在并赋值
                   * */
                  let bodyWrapper = tableRefs.bodyWrapper
                  let fixedBodyWrapper = tableRefs.fixedBodyWrapper
                  let rightFixedBodyWrapper = tableRefs.rightFixedBodyWrapper
                  ;[bodyWrapper, fixedBodyWrapper, rightFixedBodyWrapper].forEach(
                      (item) => {
                          item && (item.style.maxHeight = bodyMaxHeight)
                      }
                  )
                }


            });
    },
    render(h) {
        let _this = this;

        //key转化
        let format = obj => {
            let temp = {};
            if (obj) {
                Object.keys(obj).forEach(key => {
                    let newKey = key.replace(/([A-Z])/g, str => {
                        return `-${str.toLowerCase()}`;
                    });
                    temp[newKey] = obj[key];
                });
            }
            return temp;
        };

        //表格配置项
        let tableProp = Object.assign(
            {
                size: "mini",
                border: true,
                stripe: false,
                // 'height': 'calc(100vh)',
                // 'max-height': 'calc(100vh - 300px)',
                // 'min-height': '160px',
                "tooltip-effect": "dark",
                "highlight-current-row": true,
            },
            format(this.tableProp)
        );

        //表格绑定事件
        let tableListener = format(this.tableListener);

        //分页配置项
        let pagerProp = format(this.pagerProp);

        //分页绑定事件
        let pagerListener = format(this.pagerListener);

        //节点列表
        let vmNodes = [
            _this.$slots.default,
            h(
                "el-table",
                {
                    ref: "tableContent",
                    attrs: { id: this.tableId ,'element-loading-spinner':"el-icon-loading"},
                    props: tableProp,
                    directives: [
                        {
                            //v-loading
                            name: "loading",
                            value: this.tableContentLoading,
                            expression: "tableContentLoading"
                        }
                    ],
                    on: tableListener
                },
                //el-table子节点
                this.columnList.map((column, index) => {
                    let scopedSlots = {};
                    if (column.slotName) {
                        scopedSlots = {
                            default(slotData) {
                                //slotData对应slot[name=default]的作用域
                                return [
                                    h("div", [
                                        _this.$scopedSlots[column.slotName]
                                            ? //数据向上传递
                                              _this.$scopedSlots[
                                                  column.slotName
                                              ](slotData)
                                            : _this.$slots[column.slotName]
                                    ])
                                ];
                            }
                        };
                    }
                    return h("el-table-column", {
                        key: index,
                        props: column.prop,
                        scopedSlots: scopedSlots
                    });
                })
            )
        ];

        if (this.pagerProp) {
            vmNodes.push(
                h("el-pagination", {
                    ref: "pagination",
                    attrs: { id: pagerProp.id },
                    props: pagerProp,
                    on: {
                        //render方法不支持.sync
                        "update:currentPage"(val) {
                            _this.pagerProp.currentPage = val;
                        },
                        "update:pageSize"(val) {
                            _this.pagerProp.pageSize = val;
                        },
                        ...pagerListener
                    }
                })
            );
        }

        return h("div", { class: "customTable" }, vmNodes);
    }
};
</script>

<style lang="less" scoped>
.el-table__row{
	td{
		.cell{
			word-break: break-all;
			text-overflow: ellipsis;
			white-space: nowrap !important;
		}
	}
}
.customTable .el-table {
    position: relative;
    tr {
        th,
        td {
			.cell{
				word-break: break-all;
				text-overflow: ellipsis;
				white-space: nowrap !important;
			}
            height: 40px;
            // padding: 10px 0;
            &:first-child {
                padding-left: 0;
                .cell {
                    padding-left: 24px;
                }
            }
            &:last-child {
                padding-right: 0;
                .cell {
                    padding-right: 24px!important;
                }
            }
        }
        th{
            &:nth-last-child(2){
                padding-right: 0;
                .cell {
                    padding-right: 24px!important;
                }
            }
        }
    }
    /deep/.el-table__body-wrapper {
        tbody {
            .el-table__row {
                height: 40px !important;
                td {
                    height: 40px !important;
                    font-size: 14px;
                    // padding: 0;
                    color: #575757;
                }
            }
        }
    }
}
.customTable .el-table thead tr th {
    background: #f5f8ff;
    height: 40px!important;
    font-size: 14px;
    color: #333333;
    border-radius: 4px 0 0 0;
}
.customTable .el-table__header .has-gutter {
    border-left: 1px solid #f5f8ff;
    border-right: 1px solid #f5f8ff;
    border-radius: 4px 4px 0 0;
}
.customTable .el-table thead .gutter {
    border-radius: 0 4px 0 0;
}
.customTable .el-table__header-wrapper {
    border-left: 1px solid #f5f8ff;
    border-right: 2px solid #f5f8ff;
    border-radius: 4px 4px 0 0;
    box-sizing: border-box;
    // vertical-align: top;
    position: sticky;
    top: 0;
    z-index: 10;
}
.customTable .el-table__header {
    background: #f5f8ff;
    position: sticky;
    top: 0;
    z-index: 11;
}
.customTable .el-pagination {
    padding: 20px 0;
    text-align: center;
}
.customTable .el-table__body-wrapper {
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    box-sizing: border-box;
}
.el-table__empty-text {
    height: 160px;
    line-height: 160px;
}
</style>
