<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"
                    :prop="item.value"
                    show-overflow-tooltip
                    v-bind="judgeTableColumnAttribute(item)">
                    <template slot-scope="scope">
                        <span v-if="item.dateType === 'DATETIME'">
                            {{ scope.row[item.value] === null || scope.row[item.value] === '' || scope.row[item.value] === undefined ? '暂无' : format(scope.row[item.value], 'yyyy-MM-dd hh:mm:ss') }}
                        </span>
                        <span v-else-if="item.dateType === 'NUMBER'">
                            {{ scope.row[item.value] === null || scope.row[item.value] === '' || scope.row[item.value] === undefined ? '暂无' : (scope.row[item.value]).toFix(2) }}
                        </span>
                        <span v-else>
                            {{ scope.row[item.value] === null || scope.row[item.value] === '' || scope.row[item.value] === undefined ? '暂无' : scope.row[item.value] }}
                        </span>
                    </template>
                </el-table-column>
            </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: {
        // 日期时间格式化
        format (date, fmt) {
            let nowDate = new Date(date);
            let o = {
                'M+': nowDate.getMonth() + 1, //月份
                'd+': nowDate.getDate(), //日
                'h+': nowDate.getHours(), //小时
                'm+': nowDate.getMinutes(), //分
                's+': nowDate.getSeconds(), //秒
                'q+': Math.floor((nowDate.getMonth() + 3) / 3), //季度
                'S': nowDate.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (nowDate.getFullYear() + '').substr(4 - RegExp.$1.length));
            for (let k in o) {
                if (new RegExp('(' + k + ')').test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
                }
            }
            return fmt;
        },
        // 触发分页数量改变事件
        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
            }
            // deep: true
        },
        'tableConfig.fieldList': {
            handler (newVal, oldVal) {
                // 当数据有所变动时，强制刷新表格组件
                this.tableForceUpdateToggle = false
                this.$nextTick(() => {
                    this.tableForceUpdateToggle = 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>
