<template>
    <div v-if="tableForceUpdateToggle"
        class="table-pack">
        <el-table
            ref="table"
            :data="tableConfig.data"
            style="width: 100%"
            tooltip-effect="dark"
            stripe
            border
            :height="tableConfig.height"
            :highlight-current-row="tableConfig.highLightCurrentToggle"
            @row-click="doTableRowClick"
            @sort-change="onSortChange"
            @selection-change="onSelectChange">
            <el-table-column
                v-if="tableConfig.checkedToggle"
                type="selection"
                width="55"
                align="center">
            </el-table-column>
            <template
                v-for="(item, index) in tableConfig.fieldList">
                <!-- 正常表格 -->
                <el-table-column
                    :key="index"
                    v-if="!item.hasOwnProperty('slot')"
                    :prop="item.value"
                    show-overflow-tooltip
                    v-bind="judgeTableColumnAttribute(item)">
                    <template slot-scope="scope">
                        <span>
                            {{ scope.row[item.value] === null || scope.row[item.value] === '' || scope.row[item.value] === undefined ? '暂无' : scope.row[item.value] }}
                        </span>
                    </template>
                </el-table-column>
                <!-- 插槽表格 -->
                <template v-else>
                    <slot :name="item.slot"></slot>
                </template>
            </template>
            <!-- 预留字段及其他功能插槽 -->
            <slot name="operationColumn"></slot>
        </el-table>
        <!-- 分页 -->
         <div class="pagination-pack" v-if="tableConfig.paginationToggle">
            <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>
import { setTimeout } from 'timers';
export default {
    props: {
        tableConfig: {
            type: Object,
            required: true
        }
    },
    data () {
        return {
            // 表格强制刷新开关
            tableForceUpdateToggle: true
        }
    },
    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)
        },
        // 触发表格排序功能
        onSortChange (sortValue) {
            this.$emit('onSortChange', sortValue)
        },
        // 触发表格多选功能
        onSelectChange (selectValue) {
            this.$emit('onSelectChange', selectValue)
        },
        // 解析属性
        judgeTableColumnAttribute (attributeArray) {
            let judgeObject = _.cloneDeep(attributeArray)
            // 默认加入排序功能
            // 中通项目暂不加默认排序功能
            // if (judgeObject.hasOwnProperty('sortable')) {
            //     judgeObject.sortable = attributeArray.sort
            // } else {
            //     judgeObject.sortable = 'custom'
            // }
            return judgeObject
        }
    },
    watch: {
        tableConfig: {
            handler (newVal, oldVal) {
                this.tableConfig = newVal;
                // 当数据有所变动时，强制刷新表格组件
                this.tableForceUpdateToggle = false;
                this.$nextTick(() => {
                    this.tableForceUpdateToggle = true;
                });
            },
            deep: true
        },
        $route (to, from) {
            // 如果路由发生变化时，强制刷新表格组件
            this.tableForceUpdateToggle = false
            this.$nextTick(() => {
                this.tableForceUpdateToggle = true
            })
        }
    }
}
</script>

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

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