<template>
  <el-dialog
    title="请扫码"
    :visible.sync="visible"
    :close-on-click-modal="false"
    append-to-body
    width="30%"
    @close="visible=false">
    <div class="wrap">
      <el-input
        v-model="qrcode"
        @input="handleInput"
        @blur="$refs.qrcodeInput.focus()"
        ref="qrcodeInput"></el-input>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      qrcode: '',
      visible: false
    }
  },
  methods: {
    show () {
      // 扫码时，不再重复触发弹窗初始化。
      if (this.visible) return

      this.visible = true
      this.qrcode = ''

      this.$nextTick(() => {
        this.$refs.qrcodeInput.focus()
      })
    },
    handleInput (e) {
      this.timer && clearTimeout(this.timer)

      this.timer = setTimeout(() => {
        this.$emit('getQrcode', this.qrcode)
        this.visible = false
      }, 200)
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
    padding: 20px;
}
</style>
