<template>
  <div>
    <div v-if="showTools" class="d-flex justify-end">
      <v-btn text color="primary" @click="common.minRows++">添加一行</v-btn>
      <v-btn text color="primary" @click="common.minCols++">添加一列</v-btn>
    </div>
    <hot-table ref="hotTable" :settings="hotSettings" :data="data"></hot-table>
  </div>
</template>

<script>
import { HotTable } from '@handsontable/vue'
import { registerAllModules } from 'handsontable/registry'
import 'handsontable/dist/handsontable.full.css'
export default {
  name: 'm-excel',
  components: { HotTable },
  props: {
    showTools: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      default: () => [[]]
    }
  },
  data () {
    return {
      handSonTable: null,
      common: {
        colHeaders: true,
        minCols: 10,
        minRows: 20,
        rowHeaders: true,
        height: '500',
        // autoWrapRow: false, // 自动换行
        // autoWrapCol: false, // 自动换行
        wordWrap: false, // 单元格文字是否换行展示
        // manualColumnFreeze: true, // 手动固定列
        manualColumnMove: false, // 手动移动列
        manualRowMove: false, // 手动移动行
        manualColumnResize: true, // 手工更改列距
        manualRowResize: true, // 手动更改行距
        contextMenu: true,
        AutoColumnSize: true,
        AutoRowSize: true,
        // stretchH: 'all',
        // autoColumnSize: {
        //   allowSampleDuplicates: true
        // },
        licenseKey: 'non-commercial-and-evaluation'
      }
    }
  },
  watch: {
    data: {
      handler (newVal) {
        this.$refs.hotTable.hotInstance.loadData(newVal)
      },
      deep: true
    }
  },
  computed: {
    hotSettings () {
      const obj = { ...this.common }
      Object.assign(obj, this.$attrs)
      return {
        ...obj,
        afterChange: this.handleAfterChange
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      registerAllModules()
    },
    handleAfterChange (change, source) {
      this.$emit('change', this.data)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
