<template>
  <div class="table-box">
    <vxe-grid :columns="columns"
              :pager-config="hasPage?pagerConfig: null"
              @page-change="pageChange"
              :data="table"
              :loading="loading"
              row-class-name="table-row-css"
              cell-class-name="table-cell-css"
              header-row-class-name="table-header-row-css"
              header-cell-class-name="table-header-cell-css"
              :filter-config="filterConfig"
              :export-config="exportConfig"
              align="center"
              :height="height"
              show-overflow="tooltip"
              stripe
              auto-resize
              round>
    </vxe-grid>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator'

@Component({
  props: {
    id: {
      type: String,
      required: false
    },
    tableData: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    height: {
      type: String,
      required: false,
      default: '18.75rem'
    },
    filterConfig: {
      type: Object,
      required: false
    },
    hasPage: {
      type: Boolean,
      required: false,
      default: true
    },
    exportConfig: {
      type: Object,
      required: false
    },
    loading: {
      type: Boolean,
      required: false,
      default: false
    },
    checkboxChange: {
      type: Function,
      required: false
    },
    checkboxAll: {
      type: Function,
      required: false
    }
  }
})
export default class Table extends Vue {
  private pagerConfig = {
    layouts: ['PrevPage', 'Jump', 'PageCount', 'NextPage', 'Sizes', 'Total'],
    currentPage: 1,
    // autoHidden: true,
    pageSize: 10,
    total: this.$props.tableData.length,
    pagerCount: 7,
    pageSizes: [5, 10, 20, 50, 100],
    className: 'custom-table-page'
  }
  private table: any[] = []

  @Watch('tableData', {
    deep: true,
    immediate: true
  })
  tableDataChange(data: any) {
    this.table = data
  }

  private pageChange(data: any) {
    const tableData = this.$props.tableData
    this.pagerConfig.currentPage = data.currentPage
    this.pagerConfig.pageSize = data.pageSize
    this.table = tableData.slice((data.currentPage - 1) * data.pageSize, data.currentPage * data.pageSize)
  }
}
</script>
