<template>
  <div>
    <div v-if="show" class="cancelTips" >
      <div class="cancelBox">
        <p class="tips">{{ caption }}</p>
        <p class="title">{{ msg }}</p>
        <div class="selectBtn">
          <el-button size="small" type="primary" @click="cancelClick">取消</el-button>
          <el-button ref="uRef"  size="small" type="primary" @click="confirmClick">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MsgBox",
  props: {
    caption: {},
    show: {},
    msg: {},
    callback: {}
  },
  data() {
    return {
      value: null,
      keyCode: '',
      lastTime: '',
      nextTime: '',// 上次时间、最新时间
      lastCode: '',
      nextCode: '',// 上次按键、最新按键
    }
  },
  destroyed() {
    // 销毁enter事件
    this.enterKeyupDestroyed();
  },
  methods: {
    enterKey(event) {
      this.nextCode = event.keyCode
      // 如果触发了回车事件(扫码结束时间)
      if (this.nextCode == 13) {
        if (this.keyCode == 'true') {
          this.confirmClick();
        } else if (this.keyCode == 'false') {
          this.cancelClick(0);
        }
        this.keyCode = ''
        this.lastCode = ''
        this.lastTime = ''
        return
      }
      this.nextTime = new Date().getTime() // 记录最新时间
      if (!this.lastTime && !this.lastCode) { // 如果上次时间和上次按键为空
        this.keyCode += event.key // 执行叠加操作
      }
      // 如果有上次时间及上次按键
      if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 30) { // 当扫码前有keypress事件时,防止首字缺失
        this.keyCode = event.key
      } else if (this.lastCode && this.lastTime) {
        this.keyCode += event.key
      }
      this.lastCode = this.nextCode
      this.lastTime = this.nextTime
    },
    enterKeyupDestroyed() {
      document.removeEventListener("keyup", this.enterKey);
    },
    enterKeyup() {
      document.addEventListener("keyup", this.enterKey);
    },
    init() {
      this.show = true;
      this.enterKeyup();
    },
    close() {
      this.show = false;
      this.callback("close")
    },
    confirmClick() {
      this.show = false;
      this.callback("yes")
      this.enterKeyupDestroyed();
    },
    cancelClick() {
      this.show = false;
      this.callback("no")
      this.enterKeyupDestroyed();
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.cancelTips {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999999;
  margin: auto;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);

  .cancelBox {
    position: absolute;
    top: 30%;
    left: 40%;
    width: 20%;
    margin: auto;
    background: #fff;
    border-radius: 12px;
    text-align: center;

    .tips {
      font-size: 16px;
      margin: 30px 0 15px;
      text-align: center;
      font-weight: bold;;

    }

    .title {
      font-size: 16px;
      text-align: center;
      color: #767676;
      margin-bottom: 30px;

    }

    .selectBtn {
      width: 100%;
      text-align: center;
      display: flex;
      height: 60px;
      line-height: 60px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      border-top: 1px solid #ebebeb;
    }
  }

}

</style>


