<template>
    <div :class="[$style.dataTable, selective && $style.selective]">
        <div :class="$style.main">
            <div :class="(!title || title.length <= 0) && $style.hiddenTitle">
                <template>
                    <div
                        v-for="(table, m) in [$style.head, $style.body]"
                        :class="[$style.tableWrap, table]"
                        :key="m"
                        ref="tableWrap"
                    >
                        <table class="table" width="100%">
                            <thead v-if="title && title.length > 0">
                                <tr>
                                    <td width="40px" v-if="selective">
                                        <Checkbox
                                            v-if="value.length > 0"
                                            :centralProcess="value"
                                            @change="selectAll"
                                        />
                                    </td>
                                    <td
                                        v-for="(item, index) in title"
                                        :key="index"
                                    >
                                        <MediumFont>{{ item }}</MediumFont>
                                    </td>
                                    <td
                                        v-if="m == 0 && needScrollBar"
                                        style="padding:0 5PX 0 0"
                                    />
                                </tr>
                            </thead>
                            <tbody>
                                <tr
                                    v-if="status == 1"
                                    :style="{
                                        height: $px2rem(300),
                                        position: 'relative',
                                        transform: 'translate(0)',
                                        backgroundColor: '#FAFAFA'
                                    }"
                                >
                                    <td :colspan="getColspanNum">
                                        <RingRoller hiddenBg />
                                    </td>
                                </tr>
                                <tr v-else-if="status == -1">
                                    <td :colspan="getColspanNum">
                                        获取数据失败
                                    </td>
                                </tr>
                                <tr v-else-if="status == -2">
                                    <td :colspan="getColspanNum">暂无数据</td>
                                </tr>
                                <slot v-else :item="m" />
                            </tbody>
                        </table>
                    </div>
                </template>
            </div>
        </div>
        <div
            v-if="paging && (status == 2 || status == 1)"
            :class="$style.footer"
        >
            <div :class="$style.info">共有 {{ total }} 条数据</div>
            <Pagination
                :pageIndex="pageIndex"
                :pageSize="pageSize"
                :total="total"
                @changePage="changePage"
            />
        </div>
    </div>
</template>

<script>
import MediumFont from '../basic/MediumFont';
import Checkbox from '../form/Checkbox';
import Pagination from './Pagination';
import RingRoller from '../effect/RingRoller';
export default {
    name: 'DataTable',
    components: { RingRoller, Pagination, Checkbox, MediumFont },
    props: {
        title: {
            type: Array,
            default: function() {
                return [];
            }
        },
        pageSize: {
            type: Number,
            default: 15
        },
        getData: {
            type: Function,
            default: null
        },
        value: {
            type: Array,
            default: []
        },
        selective: {
            type: Boolean
        },
        async: {
            type: Boolean,
            default: true
        },
        paging: {
            type: Boolean,
            default: true
        },
        props: {
            type: Object,
            default: {
                data: ''
            }
        }
    },
    data() {
        return {
            total: 0,
            pageIndex: 1,
            status: 0,
            needScrollBar: false
        };
    },
    mounted() {
        this.$nextTick(() => {
            window.setTimeout(this.updateNeedScrollBar.bind(this), 0);
            window.addEventListener(
                'resize',
                this.updateNeedScrollBar.bind(this)
            );
        });
    },
    computed: {
        getColspanNum() {
            return this.selective ? this.title.length + 1 : this.title.length;
        }
    },
    watch: {
        pageIndex(newValue) {
            if (newValue <= 0) {
                return;
            }
        },
        status(newValue) {
            if (newValue == 2) {
                window.setTimeout(this.updateNeedScrollBar.bind(this), 0);
            }
        }
    },
    beforeDestroy() {
        window.removeEventListener(
            'resize',
            this.updateNeedScrollBar.bind(this)
        );
    },
    methods: {
        updateNeedScrollBar() {
            let tableWrap = this.$refs.tableWrap[1];
            this.needScrollBar =
                tableWrap.offsetHeight <
                tableWrap.firstChild.lastChild.offsetHeight;
        },
        refresh(pageIndex) {
            /*
             * @params
             *   pageIndex
             *       undefined 在当前页面进行刷新
             *
             */
            if (pageIndex) {
                if (pageIndex < 0 && this.pageIndex > -pageIndex) {
                    this.pageIndex += pageIndex;
                } else {
                    this.pageIndex = pageIndex;
                }
            }
            this.total = 0;
            this.getPageData();
        },
        getPageData() {
            if (this.async && this.getData) {
                this.status = 1;
                this.getData(this.pageIndex, this.pageSize)
                    .then(
                        function(data) {
                            var result = this.props.data
                                ? data.data[this.props.data]
                                : data.data;
                            this.total = data.total;
                            if (result.length <= 0) {
                                this.status = -2;
                                this.$emit('input', []);
                                return;
                            }
                            this.status = 2;
                            if (this.selective) {
                                result = result.map(function(v) {
                                    return {
                                        flag: v.flag || false,
                                        ...v
                                    };
                                });
                            }
                            this.$emit('input', result);
                        }.bind(this)
                    )
                    .catch(
                        function() {
                            this.$emit('input', []);
                            this.status = -1;
                        }.bind(this)
                    );
            } else {
                this.status = 2;
                let result = this.value;
                result = result.map((v, index) => {
                    return {
                        flag: this.selective ? v.flag || false : undefined,
                        visible: this.paging
                            ? index >= (this.pageIndex - 1) * this.pageSize &&
                              index < this.pageIndex * this.pageSize
                            : true,
                        ...v
                    };
                });
                this.$emit('input', result);
            }
        },
        changePage(newPage) {
            this.pageIndex = newPage;
            this.getPageData();
        },
        selectAll(status) {
            if (this.value.length <= 0) {
                return;
            }
            let result = JSON.parse(JSON.stringify(this.value));
            result = result.map(function({ disabled, flag, ...v }) {
                return {
                    ...v,
                    flag: disabled ? flag : status,
                    disabled: disabled
                };
            });
            this.$emit('input', result);
        }
    }
};
</script>

<style module lang="scss">
@import '../../cssInjection/cssFunction.scss';
@import '../../cssInjection/cssLayout.scss';
.dataTable {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    $tdHeight: 40px;
    &.selective {
        tr {
            > td {
                &:nth-child(1) {
                    padding: 0 4px;
                    width: 40px;
                    position: relative;
                    text-align: center;
                    overflow: visible;
                }
                &:nth-child(2) {
                    padding-left: 8px;
                }
            }
        }
    }
    > .main {
        width: 100%;
        height: 100%;
        overflow: hidden;
        > div {
            position: relative;
            width: 100%;
            height: 100%;
            padding-top: $tdHeight;
            overflow-x: auto;
            @include ScrollBarStyle();
            overflow-y: hidden;
            &.hiddenTitle {
                padding-top: 0;
                > .tableWrap {
                    &.head {
                        display: none;
                    }
                    &.body {
                        table {
                            margin-top: 0;
                        }
                    }
                }
            }
            > .tableWrap {
                min-width: 100%;
                max-height: 100%;
                overflow-y: auto;
                &.head {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: $tdHeight;
                    overflow-y: hidden;
                    tbody {
                        visibility: hidden;
                        opacity: 0;
                        pointer-events: none;
                    }
                }
                &.body {
                    display: inline-block;
                    @include ScrollBarStyle();
                    table {
                        margin-top: -$tdHeight;
                        thead {
                            visibility: hidden;
                            opacity: 0;
                            pointer-events: none;
                        }
                    }
                }
                > table {
                    td {
                        height: $tdHeight;
                    }
                }
            }
        }
    }
    > .footer {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        @extend %ClearFloat;
        font-size: 14px;
        > .info {
            float: left;
            margin-top: 5px;
        }
    }
}
</style>