/**
* Created by Zhang Haijun on 2017/9/5.
*/
<template>
  <basic-table :data="list" ref="tables" @selection-change="handleSelectionChange">
    <slot></slot>
    <div slot="pagination" class="pagination-container">
      <el-pagination
        @current-change="handleData"
        :current-page.sync="page"
        small
        layout="total,prev, pager, next"
        :page-size="rows"
        :total="data.length">
      </el-pagination>
    </div>
  </basic-table>
</template>

<script>
export default {
    props: {
        data: {
            type: Array
        },
        rows: {
            type: Number,
            default: 5

        },
        selectedData: {
            type: Array,
            default: function () {
                return [];
            }
        }
    },
    data () {
        return {
            page: 1,
            list: []
        };
    },
    mounted () {
    },
    created () {
        this.handleData();
    },
    watch: {
        data: function () {
            this.handleData();
        }
    },
    methods: {
        toggleRowSelection (row, selected) {
            this.$refs.tables.toggleRowSelection(row, selected);
        },
        handleSelectionChange (selection) {
            this.$emit('selection-change', selection);
        },
        handleData () {
            const totalPage = Math.ceil(this.data.length / this.rows);
            this.list = [];
            if (this.page > totalPage) this.page = totalPage;
            this.data.forEach((item, key) => {
                if (Math.floor(key / this.rows) === (this.page - 1)) {
                    this.$set(item, 'indexKey', key);
                    this.list.push(item);
                }
            });
        }
    }
};
</script>
