<template>
  <div style='width: 800px;'>
    <div style="height:350px;overflow:scroll">
      <div class='authMethod'>授权方式一：<a :href="authUrl" target="_blank">使用电脑授权请点击此处</a></div>
      <div class='authMethod'>
        授权方式二：使用手机授权，请扫描下方二维码
        <p id='qrcode' style='margin-top:15px;margin-left:85px;'></p>
      </div>
    </div>
  </div>
</template>
<script>
  import QRCode from 'qrcodejs2';

  const R3 = window.R3;
  const { network } = R3;
  export default {
    props: {
      selectRowData: { // 获取选择行的数据
        type: Array,
        default: () => []
      },
      idArray: {// 获取ID用于多选
        type: [Array, Object],
        default: () => {
        }
      },
    },
    // eslint-disable-next-line vue/no-unused-components
    components: { QRCode },
    data() {
      return {
        authUrl: '', // 授权路径
      };
    },
    created() {
      this.getAuthRedirectUrl();
      this.getAuthStatus();
    },
    mounted() {
      document.getElementsByClassName('ark-modal-close')[0].addEventListener('click', () => {
        if (this.timer) {
          clearInterval(this.timer);
        }
      });
    },
    methods: {
      getAuthRedirectUrl() {
        let param = {
          userid: this.selectRowData[0].ACCOUNTNUMBER.val
        };
        network.post('/p/cs/alipayAppAuth/getAuthRedirectUrl', param).then(res => {
          if (res.data.code == 0) {
            this.authUrl = res.data.data.authorizationUrl;
            this.qrcodeScan(); // 注：需在mounted里触发qrcodeScan函数
          }
        });
      },
      qrcodeScan() { // 生成二维码
        let qrcode = new QRCode(document.getElementById('qrcode'), { width: 150, height: 150, text: this.authUrl });
        // console.log(qrcode);
      },
      // 获取回调结果
      getAuthStatus() {
        let params = {
          userid: this.selectRowData[0].ACCOUNTNUMBER.val
        };
        return new Promise((resolve, reject) => {
          network.post('/p/cs/alipayAppAuth/pollIsAuthorize', params).then(res => {
            if (res.data.code == 0) {
              if (res.data.data == null) {
                this.timer = setTimeout(() => {
                  resolve(this.getAuthStatus(params));
                }, 2000);
              } else if (res.data.data.ACCOUNTTYPE == 1) {
                this.status = 'true';
                // this.massage = '您已成功完成授权';
                this.$Modal.fcSuccess({
                    title: '提示',
                    mask: true,
                    content: '您已成功完成授权',
                    onOk: ()=>{
                        this.close();
                    }
                });
                resolve(res);
              }
            } else if (res.data.code == -1) {
              // this.status = 'false';
              // this.massage = res.data.message;
              // resolve(res);
            }
          });
        });
      },
      close() {
        // 成功关闭弹框
        this.$emit('cancel');
      }
    }
    
  };
</script>
<style scoped lang='less'>
    .authMethod {
        margin-top: 20px;
        margin-bottom: 50px;
        font-size: 14px;
        font-family: "微软雅黑";
        font-weight: bold;
        color: #3E3E3E;
    }
</style>
