<!--
    id: 选填，没有得话给随机id
    settting: handsontable得配置，其中必填data选项
-->

<template>
  <div style="height: 100%;">
    <div :id="id"></div>
  </div>
</template>
<script>

import Handsontable from "handsontable-pro"
import './../../../node_modules/handsontable-pro/dist/handsontable.full.css'
import zhCN from 'handsontable-pro/languages/zh-CN';

export default {
  props: {
    id: {
      type: String,
      default: function createRandomId() {
        return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
      }
    },
    // settings: {//必填
    //   type: Object
    // }
  },
  data() { return {} },
  created() { },
  mounted() {
    // console.log(handsontable)
    // this.init()
  },
  methods: {

    getElement() {
      return {
        width: document.getElementById(this.id).clientWidth,
        height: document.getElementById(this.id).parentNode.clientHeight
      }
    },
    init(settings) {
      console.log("init")
      var hotElement = document.getElementById(this.id)
      var hotSettings = Object.assign({
        width: this.getElement().width,
        rowHeaders: true,
        colHeaders: true,
        filters: true,
        height: this.getElement().height,
        columnSorting: true, //添加排序
        sortIndicator: true, //添加排序
        renderAllRows: true,
        autoColumnSize: true,
        language: "zh-CN",
        manualColumnResize: true,
        manualColumnMove: true,
        dropdownMenu: [
          "filter_by_condition",
          "filter_action_bar"
        ]
      }, settings);
      console.log(hotSettings, settings)
      var hot = new Handsontable(hotElement, hotSettings);
      let pro = document.getElementById("hot-display-license-info");
      if (!!pro) {
        pro.parentNode.removeChild(pro);
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
