<template>
  <el-table
    class="ui-grid-table"
    ref="table"
    v-bind="$props"
    :height="innerHeight"
    :max-height="maxHeight"
    :empty-text="emptyText"
    :row-toolbar="rowToolbar"
    :row-toolbar-width="rowToolbarWidth"
    :fixed-row-toolbar="fixedRowToolbar"
    :show-pagination="showPagination"
    @page-change="handlePageChange"
    @select="handleSelectChange"
    @select-all="handleSelectAllChange"
    @selection-change="handleSelectionChange"
    @current-change="handleCurrentChange"
  >
    <ui-grid-column
      type="selection"
      align="center"
      width="48"
      fixed="left"
      v-if="multiple"
    ></ui-grid-column>
    <ui-table-column
      width="80px"
      align="center"
      label="#"
      fixed="left"
      v-if="showIndex"
    >
      <template slot-scope="{$index}">
        {{renderIndex($index)}}
      </template>
    </ui-table-column>
    <slot></slot>
  </el-table>
</template>
<script>
import ElTable from 'element-ui/lib/table'
import 'element-ui/lib/theme-chalk/table.css'
import UiGridColumn from './grid-column'

export default {
  name: 'UiGridTable',
  inject: ['UiGrid'],
  components: {
    ElTable,
    UiGridColumn
  },
  props: {
    data: Array,
    total: Number,
    multiple: Boolean,
    loading: Boolean,
    pageSize: Number,
    pageIndex: Number,
    showIndex: Boolean,
    emptyText: String,
    maxHeight: String,
    height: String,
    border: Boolean,
    fixedRowToolbar: {
      type: Boolean
    },
    showPagination: {
      type: Boolean,
      default: true
    },
    rowToolbar: Array,
    rowToolbarWidth: [String, Number]
  },
  computed: {
    innerHeight() {
      if (this.height === 'auto') {
        return
      }
      return this.height
    }
  },
  created() {
    this.UiGrid.$on('@grid-toggle-selection', this.handleGridToggleSelection)
  },
  methods: {
    renderIndex(index) {
      return this.showPagination ? (this.pageIndex - 1) * this.pageSize + index + 1 : index + 1
    },
    doLayout() {
      this.$refs.table && this.$refs.table.doLayout()
    },
    handlePageChange(evt) {
      this.$emit('page-change', evt)
    },
    handleGridToggleSelection() {
      this.$refs.table.toggleAllSelection()
    },
    handleSelectChange(evt) {
      this.UiGrid.$emit('@table-select-change', evt)
    },
    handleSelectAllChange(evt) {
      this.UiGrid.$emit('@table-select-all-change', evt)
    },
    handleSelectionChange(evt) {
      this.UiGrid.$emit('@table-selection-change', evt)
    },
    handleCurrentChange(evt) {
      this.UiGrid.$emit('@table-current-change', evt)
    },
    setCurrentRow(row) {
      this.$refs.table.setCurrentRow(row)
    },
    toggleRowSelection(row, isSelected) {
      this.$refs.table.toggleRowSelection(row, isSelected)
    }
  }
}
</script>
<style>
.ui-grid-table.ui-table .el-table:before, .ui-grid-table.ui-table .el-table:after {
  display: none;
}
.ui-grid-table .el-table__fixed-right::before, .el-table__fixed::before{
  display: none;
}
</style>
