<template>
  <div>
    <Table
      ref="tablesMain"
      :data="insideTableData"
      :columns="insideColumns"
      :width="width"
      :height="height"
      :border="border"
      :loading="loading"
      :size="size"
      @on-selection-change="onSelectionChange"
      @on-sort-change="onSortChange"
    >
      <!-- <slot name="header" slot="header"></slot>
      <slot name="footer" slot="footer"></slot>
      <slot name="loading" slot="loading"></slot> -->
    </Table>
    <div class="page-con" v-if="pagable">
      <Page :total="insideTotalSize" :current.sync="insideCurrentPage" :page-size="insidePageSize" @on-change="handleCurrentChange"></Page>
    </div>
  </div>
</template>

<script>
import TablesEdit from './edit.vue'
import handleBtns from './handle-btns'
import './index.less'
export default {
  name: 'Tables',
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    },
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    size: String,
    width: {
      type: [Number, String]
    },
    height: {
      type: [Number, String]
    },
    border: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },

    editable: {
      type: Boolean,
      default: false
    },

    pagable: {
      type: Boolean,
      default: false
    },
    totalSize: {
      type: Number,
      default () {
        return 0
      }
    },
    currentPage: {
      type: Number,
      default () {
        return 1
      }
    },
    pageSize: {
      type: Number,
      default () {
        return 10
      }
    }
  },
  /**
   * Events
   * @on-start-edit 返回值 {Object} ：同iview中render函数中的params对象 { row, index, column }
   * @on-cancel-edit 返回值 {Object} 同上
   * @on-save-edit 返回值 {Object} ：除上面三个参数外，还有一个value: 修改后的数据
   */
  data () {
    return {
      insideColumns: [],
      insideTableData: [],
      edittingCellId: '',
      edittingText: '',

      insideTotalSize: 0,
      insideCurrentPage: 1,
      insidePageSize: 10
    }
  },
  methods: {
    suportEdit (item, index) {
      item.render = (h, params) => {
        return h(TablesEdit, {
          props: {
            params: params,
            value: this.insideTableData[params.index][params.column.key],
            edittingCellId: this.edittingCellId,
            editable: this.editable
          },
          on: {
            'input': val => {
              this.edittingText = val
            },
            'on-start-edit': (params) => {
              this.edittingCellId = `editting-${params.index}-${params.column.key}`
              this.$emit('on-start-edit', params)
            },
            'on-cancel-edit': (params) => {
              this.edittingCellId = ''
              this.$emit('on-cancel-edit', params)
            },
            'on-save-edit': (params) => {
              this.value[params.row.initRowIndex][params.column.key] = this.edittingText
              this.$emit('input', this.value)
              this.$emit('on-save-edit', Object.assign(params, { value: this.edittingText }))
              this.edittingCellId = ''
            }
          }
        })
      }
      return item
    },
    handleColumns (columns) {
      this.insideColumns = columns.map((item, index) => {
        let res = item
        if (res.editable) res = this.suportEdit(res, index)
        return res
      })
    },
    handleTableData () {
      if (!this.value) {
        this.insideTableData = []
      } else {
        this.insideTableData = this.value.map((item, index) => {
          let res = item
          res.initRowIndex = index
          return res
        })
      }
    },
    clearCurrentRow () {
      this.$refs.talbesMain.clearCurrentRow()
    },
    onSelectionChange (selection) {
      this.$emit('on-selection-change', selection)
    },
    onSortChange (column, key, order) {
      this.$emit('on-sort-change', column, key, order)
    },

    handleTotalSize (total) {
      this.insideTotalSize = total
    },
    handleCurrentPage (page) {
      this.insideCurrentPage = page
    },
    handlePageSize (size) {
      this.insidePageSize = size
    },
    handleCurrentChange (pageNum) {
      this.$emit('on-change', pageNum)
    }

  },
  watch: {
    columns (columns) {
      this.handleColumns(columns)
    },
    value (val) {
      this.handleTableData()
    },
    totalSize (size) {
      this.handleTotalSize(size)
    },
    currentPage (page) {
      this.handleCurrentPage(page)
    },
    pageSize (size) {
      this.handlePageSize(size)
    }
  },
  mounted () {
    this.handleColumns(this.columns)
    this.handleTableData()
    this.handleTotalSize(this.totalSize)
    this.handleCurrentPage(this.currentPage)
    this.handlePageSize(this.pageSize)
  }
}
</script>
