<template>
    <div class="sys_table">
        <div v-if="$scopedSlots.tableTitle" class="sys_table_title">
            <slot name="tableTitle" />
        </div>
        <el-table
            ref="table"
            :border="border"
            :max-height="curHeight"
            :show-summary="showSummary"
            class="common_table pa_scrollbar_primary base-table"
            header-cell-class-name="tableHeaderCell"
            header-row-class-name="tableHeaderRow"
            row-class-name="tableRow"
            tooltip-effect="light"
            v-bind="$attrs"
            v-on="$listeners"
        >
            <template #append>
                <slot name="append" />
            </template>
            <template #empty>
                <div style="height: 65px">
                    <!-- <el-empty description="暂无数据" /> -->
                    <span>暂无数据</span>
                </div>
            </template>
            <el-table-column
                v-for="(column, index) in columns"
                :key="index"
                :align="column.align"
                :class-name="`${column.className || ''} columnCell`"
                :fixed="column.fixed"
                :formatter="handleFormatter(column)"
                :header-align="column.headerAlign"
                :label="column.label"
                :label-class-name="column.labelClassName"
                :min-width="column.minWidth"
                :prop="column.prop"
                :show-overflow-tooltip="column.showOverflowTooltip"
                :type="column.type"
                :width="column.width"
            >
                <template v-if="$scopedSlots[`${column.prop}_header`]" #header="scope">
                    <slot :name="`${column.prop}_header`" :scope="scope" />
                </template>
                <template v-if="$scopedSlots[column.prop]" #default="scope">
                    <slot :name="column.prop" :scope="scope" />
                </template>
            </el-table-column>
        </el-table>
        <div v-if="totalPage > 0 && showPagination" class="page_wrapper">
            <el-pagination
                :current-page="currPage"
                :page-size="pageSize"
                :page-sizes="pageSizes"
                :total="totalPage"
                layout="prev, pager, next,sizes, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
export default {
    props: {
        columns: {
            type: Array,
            default: () => [],
        },
        pageSize: {
            type: Number,
            default: 10,
        },
        border: {
            type: Boolean,
            default: true,
        },
        curHeight: {
            type: Number,
            default: 563,
        },
        currPage: {
            type: Number,
            default: 1,
        },
        totalPage: {
            type: Number,
            default: 0,
        },
        pageSizes: {
            type: Array,
            default: () => [10, 20, 30],
        },
        showPagination: {
            type: Boolean,
            default: true,
        },
        showSummary: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {};
    },
    methods: {
        handleSizeChange(val) {
            this.$emit('sizeChange', val);
        },
        handleCurrentChange(val) {
            this.$emit('currentChange', val);
        },
        handleFormatter(column) {
            const { formatter, formatNumber } = column;
            if (formatter) {
                return formatter;
            } else {
                return (r, c, v, i) => {
                    return [undefined, null, ''].includes(v) ? '-' : v;
                };
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.sys_table {
    width: 100%;

    &_title {
        font-size: 16px;
        margin-bottom: 20px;
    }
}

.common_table {
    margin-bottom: 20px;
}

::v-deep .el-table {
    .el-table__cell {
        line-height: 44px;
        padding: 0px 0px;
    }

    .tableHeaderRow {
        line-height: 44px;

        th {
            background: #f8f8f9;
        }
    }

    .cell {
        line-height: 40px;
    }

    thead {
        color: #333;

        tr {
            th {
                font-weight: normal !important;
            }
        }
    }

    .tableRow {
        th {
            background: #fafafa;
        }
    }

    ::before {
        height: 0px;
    }

    .el-table__fixed {
        bottom: 7px !important;
    }

    .el-table__fixed-right {
        bottom: 7px !important;
    }
}

::v-deep .el-empty {
    padding: 0px;

    .el-empty__image {
        height: 40px;
        width: 40px;
    }

    .el-empty__description {
        margin-top: 0px;
        line-height: 25px;
    }
}

::v-deep .el-table__body-wrapper {
    overflow-x: auto;

    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 7px;
    }

    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 7px;
        //   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #eaeaea;
    }

    &::-webkit-scrollbar-thumb:hover {
        /*滚动条里面小方块*/
        border-radius: 7px;
        //   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
        background: #eaeaea;
    }

    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        border-radius: 0;
        background: #fff;
    }
}
</style>
