<template>
  <div class="onestop-table">
    <el-table
      class="onestop-table-wrapper"
      :class="elTableProps && elTableProps.stripe ? 'onestop-table__stripe' : ''"
      :data="data"
      row-key="id"
      :height="height"
      :max-height="maxHeight"
      :row-class-name="rowClassName"
      :header-row-class-name="headerRowClassName"
      :cell-class-name="cellClassName"
      :header-cell-style="headerCellStyle"
      v-bind="elTableProps || {}"
      v-on="elTableEvents || {}"
    >
      <el-table-column
        v-for="(col, idx) in config"
        :key="idx"
        :prop="col.prop"
        :label="col.label"
        :filters="filters"
        :filter-method="filterMethod"
        v-bind="col.elTableColumnProps || {}"
        v-on="col.elTableColumnEvents || {}"
      >
        <template slot-scope="scope">
          <slot v-if="col.slotName" :name="col.slotName" :row="scope.row"></slot>
          <onestop-table-column
            v-else
            :data="scope.row"
            :config="col"
          />
        </template>
      </el-table-column>
      <template slot="empty">
        <div class="empty">
          <onestop-icon class="onestop-table-icon__empty" iconName="AN"></onestop-icon>
          <div class="text">{{emptyText}}</div>
        </div>
      </template>
    </el-table>
    <el-pagination
      :disabled="disabled"
      v-if="data.length > 0 && showPagination"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :pager-count="pagerCount"
      :total="total"
      @size-change="siseChangeHandler"
      @current-change="pageChangeHandler"
      @prev-click="prevClickHandler"
      @next-click="nextClickHandler"
    ></el-pagination>
  </div>
</template>

<script>
import Vue from 'vue';
import { Table, TableColumn, Pagination } from 'element-ui'
import OnestopTableColumn from './table-column'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

import 'element-ui/lib/theme-chalk/table.css'
import 'element-ui/lib/theme-chalk/table-column.css'
import 'element-ui/lib/theme-chalk/pagination.css'
import 'element-ui/lib/theme-chalk/icon.css'

locale.use(lang)

Vue.component(Table.name, Table)
Vue.component(TableColumn.name, TableColumn)
Vue.component(Pagination.name, Pagination)

export default {
  name: 'OnestopTable',
  components: {
    OnestopTableColumn
  },
  data () {
    return {
    }
  },
  props: {
    elTableProps: {
      type: Object,
      default: () => {}
    },
    elTableEvents: {
      type: Object,
      default: () => {}
    },
    data: {
      type: Array,
      required: true,
      default: () => []
    },
    config: {
      type: Array,
      require: true
    },
    // 是否展示分页
    showPagination: {
      type: Boolean,
      default: false
    },
    // 分页配置
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pagerCount: {
      type: Number,
      default: 7
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否带有纵向边框
    height: [Number, String],
    maxHeight: [Number, String],
    rowClassName: [String, Function],
    headerRowClassName: [String, Function],
    cellClassName: [String, Function],
    headerCellStyle: [Object, Function],
    filters: Array,
    filterMethod: Function
  },
  created () {
  },
  computed: {
    emptyText () {
      return  this.elTableProps && this.elTableProps.emptyText || 'Sorry, no data matched.'
    }
  },
  methods: {
    pageChangeHandler (val) {
      this.$emit('current-change', val)
    },
    siseChangeHandler (val) {
      this.$emit('size-change', val)
    },
    prevClickHandler (val) {
      this.$emit('prev-click', val)
    },
    nextClickHandler (val) {
      this.$emit('next-click', val)
    }
  }
}
</script>
