<template>
  <div>
    <el-tooltip
      effect="dark"
      :disabled="!tempValue"
      :content="tempValue"
      placement="bottom">
      <el-input
        placeholder="输入票号"
        class="readerInput"
        clearable
        v-model="tempValue">
        <span
          class="readCard"
          slot="suffix"
          @click="$refs.qrcode.show()"
        >
          <div class="inner">
            <span class="wave"></span>

            <svg-icon icon-class="qrcode" /> 扫描
          </div>
        </span>
      </el-input>
    </el-tooltip>

    <QRCode
      ref="qrcode"
      v-model="tempValue"></QRCode>
  </div>
</template>

<script>
import QRCode from './QRReader/QRCode'

export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  components: {
    QRCode
  },
  data () {
    return {
      tempValue: ''
    }
  },
  watch: {
    value: {
      handler (val) {
        this.tempValue = val
      },
      immediate: true
    },
    tempValue (val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.readerInput {
  ::v-deep .el-input__clear {
    position: relative;  z-index: 10;
  }
  ::v-deep .el-input__inner{
    padding-right: 80px;
  }
}
.readCard {
  position: absolute;  display: flex; height: 100%; font-size: 12px; color: #fff; cursor: pointer;align-items: center; width: 72px; right: 0px; z-index: 0;
  .inner {
    display: flex; height: 80%; padding: 0 5px;  background: $blue; border-radius: 5px; align-items: center;padding-right: 22px;
  }

  .wave {
    position: absolute;top: 50%; left: 50%;display: none; width: 20px;height: 20px;box-sizing: border-box;margin-top: -10px;margin-left: -10px; background: rgba(255, 255, 255, .384); border: 1px solid red; border-radius: 50%; opacity: 0; animation: wave infinite linear 1s forwards;
  }
  .wave2 {
    opacity: 0;  animation: wave infinite 2s 1s forwards;
  }
  .svg-icon {
    position: relative;  width: 16px; height: 16px; margin-right: 5px;font-size: 16px;
  }
  &.active {
    .wave {
      display: block;
    }
    .svg-icon {
      color: #fff;
    }
  }
}

@keyframes wave {
  0% {
    opacity: 0; transform: scale(3);
  }
  50% {
    opacity: .5; transform: scale(1);
  }
  100% {
    opacity: 0; transform: scale(0);
  }
}
</style>
