<template>
  <div class="qrcode-dialog-comp">
    <el-dialog :visible.sync="showDialog" @close="closeQrcodeDialog">
      <div class="qrcode-dialog">
        <h3 style="margin-bottom: 30px;">邀请入驻</h3>
        <div id="qrcodedialog" style="margin-bottom: 30px;" ref="qrcodedialog"></div>
        <div class="qrcode-tip">
          <span>邀请注册链接：</span>
          <a class="link" :href="inviteUrl" target="_blank">{{ inviteUrl }}</a>
        </div> 
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';

export default {
  props: ['showQrcodeDialog'],

  watch: {
    showQrcodeDialog(newVal) {
      this.employeeId = localStorage.getItem('employeeId');
      this.organizationsId = localStorage.getItem('domainId');
      console.info('href', window.location.href);
      let domainUrl = window.location.href.split('/')[2];
      console.info('domain url', domainUrl);
      // this.inviteUrl = `https://v5qy.te.baibaodun.com.cn/static/signon/fronts/#/register?shareEmployeeId=${this.employeeId}&shareOrganizationId=${this.organizationsId}`;
      this.inviteUrl = `https://${domainUrl}/static/signon/fronts/#/register?shareEmployeeId=${this.employeeId}&shareOrganizationId=${this.organizationsId}`;
      this.showDialog = newVal;
      newVal ? setTimeout(() => {
        this.generateInviteCodeInDialog();
      }, 500) : null;
    }
  },

  data() {
    return {
      showDialog: false,
      employeeId: '',
      organizationsId: '',
      inviteUrl: ''
    };
  },

  methods: {
    generateInviteCodeInDialog() {
      document.getElementById('qrcodedialog').innerHTML = ''; // 避免重复生成二维码      
      let qrcode = new QRCode(document.getElementById('qrcodedialog'), {
        text: this.inviteUrl,
        width: 360,
        height: 360,
        colorDark: '#333333',
        colorLight: '#FFFFFF',
        correctLevel: QRCode.CorrectLevel.H
      });
    },

    closeQrcodeDialog() {
      this.$emit('closeQrcodeDialog')
    }
  }
}
</script>

<style lang="scss" scoped>
.qrcode-dialog-comp {
  .qrcode-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .qrcode-tip {
    width: 80%;
    color: #409EFF;
    cursor: pointer;
    line-height: 22px;
    caret-color: rgba(0,0,0,0);

    .link {
      color: #409EFF;
    }
  }
}
</style>