<template>
    <div class="table-pack">
        <el-table
            ref="table"
            :data="tableConfig.data"
            style="width: 100%"
            tooltip-effect="dark"
            stripe
            border
            :height="tableConfig.height"
            :highlight-current-row="true"
            @row-click="doTableRowClick">
            <el-table-column
                v-if="tableConfig.checkedToggle"
                type="selection"
                width="55"
                align="center">
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                v-for="(item, index) in tableConfig.fieldList"
                :key="index"
                :label="item.label"
                :align="item.align"
                :width="item.width">
                <template slot-scope="scope">
                    {{ scope.row[item.value] !== null ? scope.row[item.value] : '暂无' }}
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
         <div class="pagination-pack">
            <el-pagination
                background
                :total="tableConfig.paginationConfig.total"
                style="text-align: center; margin-top: 12px;"
                :page-sizes="[20, 50, 100, 200]"
                layout="prev, pager, next, sizes, jumper"
                :current-page.sync="tableConfig.paginationConfig.currentPage"
                :page-size.sync="tableConfig.paginationConfig.pageSize"
                @size-change="onPageSizeChange"
                @current-change="onCurrentPageChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        tableConfig: {
            type: Object,
            required: true
        }
    },
    data () {
        return {}
    },
    methods: {
        // 触发分页数量改变事件
        onPageSizeChange (pageSize) {
            this.tableConfig.paginationConfig.currentPage = 1
            this.tableConfig.paginationConfig.pageSize = pageSize
            this.$emit('onPageSizeChange', pageSize)
        },
        // 触发分页页数改变事件
        onCurrentPageChange (currentPage) {
            this.tableConfig.paginationConfig.currentPage = currentPage
            this.$emit('onCurrentPageChange', currentPage)
        },
        // 表格数据点击事件
        doTableRowClick (tableNodeValue) {
            this.$emit('doTableRowClick', tableNodeValue)
        }
    },
    watch: {
        tableConfig (newVal, oldVal) {
            this.oldVal = newVal
        }
    }
}
</script>

<style lang="scss">
    .table-pack {

        .el-table__body tr.current-row>td {
            background: #b2d8ff !important;
        }
    }
</style>

