<template>
  <div class="sweep" v-if="show">
    <video ref="video" id="reader" style="width:100%;height:auto;"></video>
    <div class="ku-scanner">
      <div class="ku-scanner-content">
        <div class="ku-scanner-tooltip">
          将二维码/条码放入框内，即自动扫描
          {{ msg }}
        </div>
        <div class="ku-scanner-section">
          <div class="ku-scanner-section-animation-line"></div>
          <div class="ku-scanner-section-angle"></div>
        </div>
      </div>
    </div>
    <span class="closeBtn" @click="close">
      <svg
        t="1733477770331"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4265"
        width="64"
        height="64"
      >
        <path
          d="M623.807 528.693a113.756 113.756 0 0 0-0.139-33.126l252.787-252.692c26.245-26.236 26.245-68.772 0-95.006-26.248-26.236-68.798-26.236-95.043 0L528.281 400.902c-5.296-0.762-10.708-1.164-16.216-1.164s-10.92 0.402-16.216 1.164l-253.13-253.031c-26.245-26.236-68.796-26.236-95.043 0-26.245 26.234-26.245 68.77 0 95.006l252.789 252.692a113.726 113.726 0 0 0-0.14 33.124L147.676 781.247c-26.245 26.236-26.245 68.77 0 95.006 26.248 26.236 68.798 26.236 95.043 0L494.85 624.218c5.613 0.859 11.362 1.305 17.215 1.305s11.602-0.446 17.215-1.305l252.13 252.035c26.245 26.236 68.796 26.236 95.043 0 26.245-26.236 26.245-68.77 0-95.006L623.807 528.693z"
          fill="#000000"
          p-id="4266"
        ></path>
        <path
          d="M512.063 444.326c37.407 0 67.73 30.327 67.73 67.736 0 37.41-30.323 67.735-67.73 67.735-37.405 0-67.728-30.325-67.728-67.735 0.001-37.408 30.323-67.736 67.728-67.736z"
          fill="#000000"
          p-id="4267"
        ></path>
      </svg>
    </span>
  </div>
</template>

<script>
import QrScanner from 'qr-scanner'
export default {
  data() {
    return {
      show: false,
      scanner: null,
      msg: ''
      // constraints:{
      // 	width:300,
      // 	height:300
      // }
    }
  },
  methods: {
    open() {
      this.show = true
      this.$nextTick(() => {
        if (this.$refs.video) {
          this.$toast('测试测试')
          this.startScanner()
        }
      })
    },
    close() {
      if (this.scanner) {
        this.scanner.stop()
      }
      this.show = false
    },
    async startScanner() {
      this.scanner = new QrScanner(
        this.$refs.video,
        result => {
          if (result) {
            this.$toast(result)
            this.$emit('success', result)
          }

          // this.scanner.stop() // 扫描一次后停止
          // this.close()
        },
        { preferredCamera: 'environment' } // 优先使用后置摄像头
      )
      await this.scanner.start()
    }
  }
}
</script>

<style lang="scss" scoped>
.sweep {
  width: 100vw;
  height: 100vh;
  z-index: 9990;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
}

.closeBtn {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 20px;
  border-radius: 50%;
  background-color: #ffffff80;
  right: 20px;
  z-index: 9992;
  box-sizing: border-box;
  padding: 10px;
  svg {
    width: 100%;
    height: 100%;
  }
}

.ku-scanner {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9991;
  display: flex;
  justify-content: center;
  align-items: center;
  .ku-scanner-content {
    background-size: 3rem 3rem;
    background-position: -1rem -1rem;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: rgba(18, 18, 18, 0);
    margin: auto;
    // 提示信息
    .ku-scanner-tooltip {
      width: 100%;
      height: 35px;
      line-height: 35px;
      font-size: 14px;
      text-align: center; /* color: #f9f9f9; */
      margin: 0 auto;
      position: absolute;
      top: 0;
      left: 0;
      color: #ffffff;
    }
    .ku-scanner-section {
      width: 213px;
      height: 213px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      border: 0.1rem solid rgba(86, 247, 118, 0.301);
      // 扫描活动线
      .ku-scanner-section-animation-line {
        height: calc(100% - 2px);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #2ffc58 211%);
        border-bottom: 3px solid #2ffc58;
        transform: translateY(-100%);
        animation: radar-beam 2s infinite alternate;
        animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
        animation-delay: 1.4s;
      }
    }
  }
}
// 扫描活动线--上下 动画
@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

#reader {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover; /* 使视频自适应填充 */
}
</style>
