<template>
  <div class="hotTable">
    <hot-table :root="hotRoot" :ref="ref" :data="formData" :settings="hotSettings"></hot-table>
  </div>
</template>
<script>
import { HotTable } from "@handsontable/vue";
import "handsontable/dist/handsontable.full.css";
// import Handsontable from 'handsontable-pro'
// import 'handsontable/languages/zh-CN' //引入中文语言包

// import generateKey from '@/utils/generateKeyForHotTable.js'
// import { IsIE } from '@/utils/index'
export default {
  name: "NewHotTable",
  components: {
    HotTable
  },
  props: {
    formData: {
      type: Array,
      default: function() {
        return [];
      }
    },
    nestedHeaders: {
      type: Array,
      default: function() {
        return undefined;//如果不想设置嵌套表头 就将此设置为undefined
      }
    },
    headers: {
      type: Array,
      default: function() {
        return [];
      }
    },
    rowHeaders: {
      // 表 序号
      type: Boolean,
      default: function() {
        return true;
      }
    },
    columns: {
      type: Array,
      default: function() {
        return [];
      }
    },
    colWidths: {
      type: Array,
      default: function() {
        return [];
      }
    },
    focusCol: {
      type: Number,
      default: 0
    },
    mergeCells: {
      type: Array,
      default: function() {
        return [];
      }
    },
    minSpareRows: {
      type: Number,
      default: 1
    },
    hiddenColumns: {
      type: Object,
      default: function() {
        return {};
      }
    },
    height: {
      type: Number,
      default: 360
    }
  },
  data() {
    var _that = this;
    var td_keyDown_idx = 0;
    //这里对输入键过了过滤，如方向键，上页，下页的键盘不激活表格编辑器，具体可以结合业务需求进行过滤
    const editKeyCode = [33, 34, 35, 36, 37, 38, 39, 40, 46, 16, 17, 18];
    return {
      hotRoot: "basic-hot" + Math.random(1),
      data: this.formData,
      ref: "basicHot" + Math.random(1),
      hotSettings: {
        width: "100%", // 宽
        height: this.height,
        colWidths: this.colWidths, // 每列宽
        manualColumnResize: true, // 滚动条在列标题的右侧
        manualRowResize: true, // 滚动条在行标题的底部。
        startCols: 2, // 开始列数
        minRows: 1, // 最小行列
        nestedHeaders: this.nestedHeaders, //嵌套表头，实例 可参考编制评分标准 探测度评分
        rowHeaders: this.rowHeaders, // 行表头，可以使布尔值（行序号），可以使字符串（左侧行表头相同显示内容，可以解析html），也可以是数组（左侧行表头单独显示内容）
        colHeaders: this.headers, //自定义列表头or 布尔值
        // minSpareCols: 1, // 列留白
        minSpareRows: this.minSpareRows, // 行留白 0=不会添加新行
        autoWrapRow: true, // 自动换行
        rowHeights: 24,
        wordWrap: true,
        manualColumnFreeze: true, // 手动固定列
        manualColumnMove: true, // 手动移动列
        manualRowMove: true, // 手动移动行
        stretchH: "all", // 根据宽度横向扩展，last:只扩展最后一列，none：默认不扩展
        // language: 'zh-CN',
        // 添加每一列的数据类型和一些配置
        contextMenu: {
          // 自定义右键菜单，可汉化，默认布尔值
          items: {
            row_above: {
              name: this.$t('global-constant.contextmenu.add-previous-line')
            },
            row_below: {
              name: this.$t('global-constant.contextmenu.add-next-line')
            },
            remove_row: {
              name: this.$t('global-constant.contextmenu.delete-row')
            }
          }
        },
        columns: this.columns,
        hiddenColumns: this.hiddenColumns,
        mergeCells: this.mergeCells,
        licenseKey: "07275-1c8f0-f7d08-9865d-f4eaa",
        afterChange(changes, source) {
          if (source == "edit") {
            _that.$emit("rowChange", changes);
            _that.data = this.getSourceData();
          }
        },
        afterPaste(data, coords) {
          _that.data = this.getSourceData();
        },
        afterDocumentKeyDown(event) {
          // var instance = this;
          //console.log(event, event.ctrlKey, event.keyCode)
          // (event.ctrlKey && event.keyCode === 86 V
          // (event.ctrlKey && event.keyCode === 67 C
          if (
            (event.ctrlKey && event.keyCode === 86) ||
            (event.ctrlKey && event.keyCode === 67) ||
            event.keyCode === 17
          ) {
            // log('粘贴', event.ctrlKey, event.keyCode, td_keyDown_idx)
            // this.getActiveEditor().beginEditing()
            td_keyDown_idx = -1;
            //console.log(1)
          } else {
            //handsontable中afterDocumentKeyDown原先触发条件为keyup，现在改为keydown之后会有Ctrl先松后松问题
            //同时按下ctrl和C/V，且先松开ctrl时，插件自带的getValue获取不到值
            let td = this.getActiveEditor(),
              v = td ? td.getValue() : "";
            // td_keyDown_idx === 0 表示刚刚选中这个TD,第一次键盘按键
            // editKeyCode.indexOf(event.keyCode) === -1 表示特殊键不执行

            if (td_keyDown_idx === 0) {
              //console.log(3)
              if (editKeyCode.indexOf(event.keyCode) === -1 && td) {
                v = v && v != "undefined" && v.length > 0 ? v : "";
                // 注释掉了153~160行，为了解决bug5388
                // if (event.keyCode === 229 && IsIE()) {
                //   // TD进入编辑状态
                //   td.beginEditing();
                //   // 解决切换TD时,丢失第一个字节的问题
                //   td.setValue(v);
                //   // 键盘点击次数++,用来判断在鼠标点击TD后,是否是第一次键盘点击
                //   td_keyDown_idx++;
                // } else {
                // TD进入编辑状态
                td.beginEditing();
                // 解决切换TD时,丢失第一个字节的问题
                td.setValue(v);
                // 键盘点击次数++,用来判断在鼠标点击TD后,是否是第一次键盘点击
                td_keyDown_idx++;
                // }
              } else if (td_keyDown_idx === 0 && event.keyCode === 17) {
                // 如果鼠标点击TD后，第一个按键是Ctrl键，那么不进行计数。特地给鹏飞修复的，这个鸟人ctrl和v中间有间隔
                td_keyDown_idx = -1;
              }
            } else if (
              td_keyDown_idx === -1 &&
              (event.keyCode === 67 || event.keyCode === 86)
            ) {
              td_keyDown_idx = 0;
              //console.log(2)
            }
          }
        },
        beforeOnCellMouseDown(event, coords, TD, controller) {
          // 鼠标点击TD后,键盘点击次数归0
          td_keyDown_idx = 0;
        },
        afterSelectionEnd(row, column, row2, column2, selectionLayerLevel) {
          // 选中TD后直接进入编辑状态
          // this.getActiveEditor().beginEditing()
        },
        beforePaste(data, coords) {},
        afterOnCellCornerDblClick(event) {
          // log('afterOnCellCornerDblClick',event)
        }
      },
      defaultFocusCol: this.focusCol
    };
  },
  watch: {
    // 下面三个初始化的时候，会触发
    formData(v) {
      this.data = v;
    },
    data(data) {
      this.$emit("formDataChange", data);
    }
    // 下面这些，初始化的时候不会触发
    // columns(v) {
    //   this.hotSettings.columns = v;
    // }
    // headers(v) {
    //   this.hotSettings.colHeaders = v;
    // },
    // colWidths(v) {
    //   this.hotSettings.colWidths = v;
    // },
    // mergeCells(v) {
    //   this.hotSettings.mergeCells = v;
    // },
    // height(height) {
    //   this.hotSettings.height = height;
    // }
  },
  created() {},
  mounted() {
    var ht = this.$refs[this.ref]
        ? this.$refs[this.ref].hotInstance
        : undefined,
      _that = this;
    console.log("mounted", ht);
    this.$nextTick(function() {
      if (ht) {
        ht.updateSettings(_that.hotSettings);
        ht.selectCell(0, _that.focusCol);
      }
    });
  },
  destroyed() {
    this.$refs[this.ref] && this.$refs[this.ref].hotInstance.destroy();
  },
  methods: {
    // setSelectCell(defaultFocusCol) {
    //   this.$refs[this.ref] &&
    //     this.$refs[this.ref].hotInstance.selectCell(0, defaultFocusCol);
    // }
  }
};
</script>
<style lang="less">
.htContextMenu:not(.htGhostTable) {
  z-index: 330000;
}
.handsontable.ht_clone_top tr {
  line-height: 0;
}
.handsontable.ht_clone_top th {
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
}
.handsontable.ht_clone_top th .relative {
  vertical-align: middle;
  line-height: 0.9;
  font-size: 14px;
}
#hot-display-license-info,
#HandsontableCopyPaste {
  display: none !important;
}
</style>
