<template>
 <div class="share-invitation-con">
    <!-- <m-nav-bar title="分享邀请" /> -->
    <div class="goback" @click="goBack">
      <m-icon icon="icon-back-light" :size="20" />
    </div>
    <div class="share-invitation-content flex-default">
      <div class="content-con">
        <div class="content-top">
          <div class="title">你的邀请码</div>
          <div class="code">{{ accountInfo.inviteCode }}</div>
          <div class="btn">
            <van-button
              type="warn"
              class="copy"
              round
              @click="handleCopy(accountInfo.inviteCode)"
            >
              复制
            </van-button>
          </div>
        </div>
        <div class="content-footer">
          <div class="qrcode">
            <div class="img_box">
              <div ref="qrcode" class="codeImg" id="qrCode" v-show="false"></div>
              <img :src="qrcodeImg" alt="" class="codeImg">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import { mapState } from "vuex";
export default {
  data() {
    return {
      shareList: ["发送给好友", "分享到朋友圈", "发送到QQ"],
      downloadUrl: "",
      qrcodeImg:"",
      that:this
    };
  },
  computed: {
    ...mapState(["accountInfo"]),
  },
  methods: {
     creatQrcode(urlValue) {
      new QRCode(this.$refs.qrcode, {
        width: 150,
        height: 150, // 高度
        text: urlValue,
        correctLevel : QRCode.CorrectLevel.H 
      });
      let myCanvas=document.getElementsByTagName('canvas')[0]
      let imgSrc=myCanvas.toDataURL('image/png')
      this.qrcodeImg=imgSrc
    },
  },
  created() {
    let {origin, pathname} = window.location
    this.downloadUrl = `${origin}${pathname}#/download?invite_code=${this.accountInfo.inviteCode}`
    this.$nextTick(()=> {
      this.creatQrcode(this.downloadUrl)
    })
   
  }
};
</script>

<style lang="less">
.share-invitation-con {
   width: 375px;
  height: 100vh;
  background-image: url(~@/assets/img/share-bg.png);
  background-size: 100% 100%;
  .goback{
    position: absolute;
    top: 15px;
    left: 13px;
    z-index: 10;
  }
  .share-invitation-content{
    height: 100vh;
    .content-con{
      width: 100%;
      position: relative;
      height: 100%;
      .content-top{
        display: flex;
        flex-direction: column;
        justify-items: center;
        position: absolute;
        bottom: 25.63718140929535vh;
        left: 0;
        width: 100%;
        margin-bottom: 3.373313343328336vh;
        .title{
          height: 24px;
          font-size: 17px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          text-align: center;
          height: 24px;
        }
        .code{
          color: #DCCDA5;
          text-align: center;
          font-size: 30px;
          line-height: 42px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          height: 42px;
          margin-top: 0.8995502248875562vh;
        }
        .btn{
          text-align: center;
          height: 35px;
          margin-top:2.098950524737631vw;
          .copy{
            width: 90px;
            height: 35px;
            background: #B39568;
            color: #FFFFFF;
            font-size: 17px;
          }
        }
      }
      .content-footer{
        height: 25.63718140929535vh;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        .qrcode{
          padding-top: 3.973013493253373vh;
          .img_box{
            width: 120px;
            height: 120px;
            padding:4px 6px;
            background: #FFFFFF;
            margin: 0 auto;
          }
          .codeImg{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
