<style lang="scss">
@import '@/styles/index.scss'; //导入样式

.app-table {
    margin-bottom: $basicMargin;
    text-align: left;
}
</style>

<template>
    <div class="app-table">
        <div class="app-table" v-if="paginationVerticalAlign == 'top'">
            <template v-if="pagination">
                <el-pagination :layout="paginationLayout" :total="paginationTotalCount"
                    :page-size.sync="paginationPageSize" :page-sizes="paginationPageSizes"
                    :current-page="paginationPageNum" :small="paginationSmall" :background="paginationBackground"
                    @size-change="handlePageSizeChange" @current-change="handlePageNumChange" :class="align">
                </el-pagination>
            </template>
            <template v-else>
                <slot name="pagination"></slot>
            </template>
        </div>

        <div class="app-table">
            <template v-if="table">
                <el-table v-loading="tableData.loading" :data="tableData.items" border :default-sort="tableDefaultSort"
                    size="small" @expand-change="tableExpandChange">
                    <el-table-column type="index" label="序号" width="64" align="center"></el-table-column>
                    <el-table-column v-for="column in tableData.columns" :prop="column.key" :label="column.name"
                        sortable :key="column.key" :formatter="tableData.formatter[column.key]" :width="column.width"
                        header-align="center"></el-table-column>
                    <slot name="table-column"></slot>
                </el-table>
            </template>
            <template v-else>
                <slot name="table"></slot>
            </template>
        </div>

        <div class="app-table" v-if="paginationVerticalAlign != 'top'">
            <template v-if="pagination">
                <el-pagination :layout="paginationLayout" :total="paginationTotalCount"
                    :page-size.sync="paginationPageSize" :page-sizes="paginationPageSizes"
                    :current-page="paginationPageNum" :small="paginationSmall" :background="paginationBackground"
                    @size-change="handlePageSizeChange" @current-change="handlePageNumChange" :class="align">
                </el-pagination>
            </template>
            <template v-else>
                <slot name="pagination"></slot>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AppTable',
    props: {
        pagination: Boolean,
        paginationVerticalAlign: {
            type: String,
            default: function () {
                return 'top'
            }
        },
        paginationAlign: {
            type: String,
            default: function () {
                return 'right'
            }
        },
        paginationSmall: {
            type: Boolean,
            default: function () {
                return false
            }
        },
        paginationBackground: {
            type: Boolean,
            default: function () {
                return false
            }
        },
        paginationLayout: {
            type: String,
            default: function () {
                return 'total, sizes, prev, pager, next, jumper'
            }
        },
        paginationPageSizes: {
            type: Array,
            default: function () {
                return [10, 20, 30, 40, 50, 100]
            }
        },
        totalCount: {
            type: Number,
            default: function () {
                return 0
            }
        },
        pageSize: {
            type: Number,
            default: function () {
                return 10
            }
        },
        pageNum: {
            type: Number,
            default: function () {
                return 1
            }
        },
        handlePageSizeChange: {
            type: Function,
            default: null
        },
        handlePageNumChange: {
            type: Function,
            default: null
        },

        table: Boolean,
        tableData: {
            type: Object,
            default: function () {
                return null
            }
        },
        tableDefaultSort: {
            type: Object,
            default: function () {
                return { prop: 'id', order: 'descending' }
            }
        },
    },
    computed: {
        align() {
            let res;
            switch (this.paginationAlign) {
                case 'right':
                    res = 'textRight'
                    break
                case 'center':
                    res = 'textCenter'
                    break
                default:
                    res = ''
            }
            return res
        },
        paginationTotalCount() {
            if (this.tableData && this.tableData.totalCount) {
                return this.tableData.totalCount
            } else {
                return this.totalCount
            }
        },
        paginationPageNum: {
            get() {
                if (this.tableData && this.tableData.pageNum) {
                    return this.tableData.pageNum
                } else {
                    return this.pageNum
                }
            },
            set(val) {
                if (this.tableData && this.tableData.pageNum) {
                    this.tableData.pageNum = val
                } else {
                    this.pageNum = val
                }
            }
        },
        paginationPageSize: {
            get() {
                if (this.tableData && this.tableData.pageSize) {
                    return this.tableData.pageSize
                } else {
                    return this.pageSize
                }
            },
            set(val) {
                if (this.tableData && this.tableData.pageSize) {
                    this.tableData.pageSize = val
                } else {
                    this.pageSize = val
                }
            }
        }
    },
    methods: {
        tableExpandChange(row, expandedRows) {
            this.$emit("expand-change", row, expandedRows);
        }
    }
}

</script>
