<!-- 扫码登录 -->
<template>
  <div class="qr-warp">
    <div class="qr-code" v-loading="loading">
      <img :src="QRImgUrl" />
    </div>
    <div class="qr-text-warp">
      <span>请使用APP扫一扫登录</span>
      <el-link type="primary" class="text-left" @click="getQRcode">
        刷新
        <i :class="['el-icon-refresh i-left', { reg360: loading }]"></i>
      </el-link>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode';
export default {
  props: ['QRlink'],
  data() {
    return {
      loading: false,
      QRImgUrl: ''
    };
  },
  created() {
    if (this.QRlink) {
      this.getQRcode();
    }
  },
  methods: {
    getQRcode() {
      let _this = this;
      if (!_this.QRlink) return;
      _this.loading = true;
      console.log('重新生成二维码');
      const opts = {
        errorCorrectionLevel: 'L', //容错级别
        type: 'image/png', //生成的二维码类型
        quality: 0.3, //二维码质量
        margin: 0, //二维码留白边距
        width: 176, //宽
        height: 176, //高
        text: 'http://www.xxxxxxxxggg.com', //二维码内容
        color: {
          dark: '#000', //前景色
          light: '#FFF' //背景色
        }
      };
      QRCode.toDataURL(_this.QRlink, opts, (err, url) => {
        _this.loading = false;
        if (err) throw err;
        _this.QRImgUrl = url;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.qr-warp {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  .qr-code {
    height: 200px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .text-left {
    margin-left: 18px;
  }
  .qr-text-warp {
    display: flex;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    color: #62606e;
    .i-left {
      margin-left: 8px;
      transform: rotate(0deg);
      transition: transform 10s linear;
      animation-iteration-count: infinite;
    }
    .reg360 {
      animation: rotating 2s linear infinite;
    }
    @keyframes rotating {
      0% {
        transform: rotateZ(0deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }
  }
}
</style>
