<!-- @desc:导出excel  @auth:周兴  @time:2022/11/30 13:17 -->
<template>
  <DkModal ref="modal_export" v-model="visible"
           width="450" :title="title" @modalOk="ok">
    <DkTable :id="'table-'+$options.name" ref="table-select" :data="tableData"
             :pageFlag="false"
             :multiple="true"
             primary-key="id"
             :show-setting-flag="false"
             :height="tableHeight">
      <DkTableColumn field="label" width="auto" :filter="false" :freeze="false" :sortable="false"
                     title="列名"></DkTableColumn>
    </DkTable>
  </DkModal>
</template>

<script>
import {button as buttonList} from "@/locale/lang/zh-CN";

export default {
  name: "MyPosition",
  data() {
    const vm = window.vm;
    return {
      documentKeyDownContent: Object,
      vm: vm,
      title: '导出',//标题
      tableHeight: 200,
      visible: false,//显示控制
      tableData: [],
      okFunc: () => {
      },//确定回调
      okText: vm.$t('confirm'),
    }
  },
  methods: {
    /**
     * @desc   : 列定位数据
     * @author : 周兴
     * @date   : 2023/2/15 14:12
     */
    ok() {
      let batchRows = this.$refs['table-select'].batchRows;
      if (!batchRows || batchRows.length === 0) {
        this.$Message.warning(this.$t('W_013'))
        return;
      }
      let item = {}
      batchRows.forEach(it => {
        item[it.field] = it.label
      })
      this.okFunc(item)
      this.visible = false;
    },
    /**
     * @desc   : 关闭查询页面
     * @author : 周兴
     * @date   : 2023/2/14 17:29
     */
    close() {
      this.visible = false;
    },
    /**
     * @desc   : 设置序号的数据源
     * @author : 周兴
     * @date   : 2022/12/5 11:38
     */
    setDisplayTable() {
      if (this.tableData && this.tableData.length > 0) {
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].type == 'checkbox' || this.tableData[i].type == 'radio') {
            this.tableData[i].label = '选择'
          } else {
            this.tableData[i].label = this.tableData[i].title
          }
        }
        this.$nextTick(() => {
          this.$refs['table-select'].checkAll();
        })
      }
    },
    /**
     * @desc   : 监听全局键盘按钮按下的事件
     * @author : 周兴
     * @date   : 2022/3/4 16:57
     */
    addKeyBoardEvent() {
      let code = 0
      let self = this
      this.documentKeyDownContent = document.onkeydown;
      document.onkeydown = function (e) {
        const evn = e || event
        const key = evn.keyCode || evn.which || evn.charCode
        // alt：code = 18
        if (key === 18) {
          code = 18
        }
        // Q：code = 81 查询
        let btList = Object.values(self.$config.button);
        btList.forEach(forIt => {
          if (code === 18 && forIt.hotKey?.toLowerCase() === e.key.toLowerCase()) {
            e.returnValue = false
            if (self.$refs[forIt.name]) {
              self.$refs[forIt.name].$el.click()
            }
          }
        })
      }
      // 监听全局键盘按钮松开的事件
      document.onkeyup = function (e) {
        const evn = e || event
        const key = evn.keyCode || evn.which || evn.charCode
        if (key === 18) {
          code = 0
        }
        // 一秒钟失效，避免因为按了alt+tab之后再回来，按其他什么英文字母都不好使了的问题
        setTimeout(() => {
          code = 0
        }, 1000)
      }
    },
  },
  watch: {
    visible(n, o) {
      if (!n) {
        //回复快捷键
        document.onkeydown = this.documentKeyDownContent;
      } else {
        this.setDisplayTable();  // 设置显示的列表
      }
    },
  },
  mounted() {
  },
  created() {
    this.$nextTick(() => {
      this.addKeyBoardEvent()   // 增加快捷键
    })
  }
}
</script>
<style scoped>

/deep/ .ivu-modal-body {
  padding: 0;
}

.close-div {
  color: #fff;
}

.close-icon {
  font-size: 20px;
  margin-top: -1px;
}

.content-div {
  padding: 10px 20px 5px 20px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.exchange-div {
  padding-left: 20px;
  padding-right: 20px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.tool-div {
  padding-top: 10px;
  padding-left: 20px;
  align-items: center;
  display: flex;
}

.content-icon {
  font-size: 28px;
  margin-right: 10px;
}

.btn-class {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}

/deep/ .ivu-card-body {
  padding: 5px !important;
  margin: 2px !important;
}
</style>
