<template>
  <model-loading v-bind="loading" @relaoding="getwximg" style="text-align:center">
    <div ref="container" class="layout-tr-center"></div>
    <model-note>请使用微信扫描二维码登录</model-note>
  </model-loading>
</template>
<script>
  export default {
    props:{
      visible:Boolean
    },
    data: function () {
      return {
        id:'',
        loading: {
          code: -1,
          message: ''
        }
      }
    },
    watch:{
      visible:function(value){
        if(value&&this.id) return this.time();
        clearTimeout(this.timerId);
      },
      id:function(value){
        if(value&&this.visible) return this.time();
        clearTimeout(this.timerId);
      }
    },
    mounted: function () {
      this.getwximg();
    },
    methods: {
      getwximg() {
        this.$api.get({
          url: 'baseinfo/v1/Manager/GetWxLoginQrc',
          success: (res) => {
            let data = res.Data;
            let qrcode = new QRCode(this.$refs.container, {
              text: data.image,
              width: 225,
              height: 225,
              correctLevel: QRCode.CorrectLevel.L
            });
            this.$refs.container.setAttribute('title','二维码');
            this.id=data.uuid;
          }
        }, this);
      },
      time(){
        var that = this;
        clearTimeout(this.timerId)
         this.$api.get({
          url: `baseinfo/v1/Manager/CheckScanLoginState`,
          params:{
            params:{
              uuid:this.id
            }
          },
          success: (res) => {
            let data = res.Data;
            if (data && data.State == 0) {
              this.$emit('success',data)
            } else {
              this.timerId=setTimeout(() => {
                this.time()
              }, 3000)
            }
          },
          fail: () => {
            this.timerId=setTimeout(() => {
              this.time()
            }, 3000)
          }
        })
      }
    },
    beforeDestroy:function(){
      clearTimeout(this.timerId)
    }
  }
</script>