<template>
  <vxe-modal v-model="showModal"
             title="完整功能的窗口"
             width="800"
             height="400"
             min-width="400"
             min-height="320"
             :show-footer="true"
             @confirm="handleOKClick"
             @close="handleCancelClick"
             resize>
    <template>
      <!--   <Modal v-model="showModal"
         :title="title"
         :width="width"
         @on-ok="handleOKClick"
         @on-cancel="handleCancelClick"> -->
      <slot></slot>
      <vuc-datatable ref="xTable"
                     :height="height"
                     show-toolbar
                     :toolbar="['search']"
                     @on-checked="handleChecked"
                     @on-select="handleSelect"
                     @on-dblclick="hadledblClick">
      </vuc-datatable>
    </template>
  </vxe-modal>

</template>
<script>
import clonedeep from 'clonedeep'
export default {
  name: 'DialogTable',
  props: {
    title: {
      type: String,
      default: '请选择'
    },
    height: {
      type: [Number, String],
      default: 400
    },
    width: {
      type: [Number, String],
      default: 800
    },
    showCheckbox: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      showModal: false,
      selectData: []
    }
  },
  methods: {
    show () {
      this.showModal = true
      let cols = clonedeep(this.columns)

      if (this.showCheckbox) {
        cols.unshift({ type: 'selection', title: ' ', width: '36', fixed: 'left' })
      }
      cols.unshift({ type: 'index', title: ' ', width: '40', fixed: 'left' })
      const timeId = setTimeout(() => {
        this.$refs.xTable.loadColumn(cols)
        this.$refs.xTable.loadData(this.data)
        clearTimeout(timeId)
      }, 30)
      this.$emit('on-show')
    },
    loadData (data) {
      this.$refs.xTable.loadData(data)
    },
    /// ///////
    handleSelect ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, cell }, event) {
      this.selectData = [row]
    },
    hadledblClick ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, cell }, event) {
      if (this.showCheckbox) return false
      this.selectData = [row]
      this.handleOKClick()
    },
    handleChecked (row) {
      this.selectData = this.$refs.xTable.getCheckedData()
    },
    /// ////////////
    handleOKClick () {
      if (this.showCheckbox) {
        this.selectData = this.$refs.xTable.getCheckedData()
      }
      this.$emit('on-ok', this.selectData)
      this.showModal = false
    },
    handleCancelClick () {
      this.$emit('on-close')
      // this.showModal = false
    }
  }
}
</script>
