<template>
  <div class="pop">
    <div id="target">
      <img class="img3" src="/img/share/img3.png" alt="">
      <div class="container">
        <div class="box1 flex">
          <div class="qr-box">
            <img class="qr" :src="img" alt="极度证券">
            <img class="logo" src="/logo.png" alt="极度证券">
          </div>
        </div>
        <div class="title">
          <!-- 注册即可领取 -->
          {{ $t('share.l29') }} <span class="span">1200 USD</span></div>
        <div class="box flex">
          <div class="code-box flex">
            <div>
              <!-- 邀请码 -->
              {{ $t('share.l30') }}:{{ userInfo.code }}
            </div>
            <img
              class="copy"
              @click="copyText(userInfo.code)"
              src="/img/icon/copy2.png"
              alt="极度证券"
            />
          </div>
        </div>
        <div class="box2">
          <img class="img2" src="/img/share/img2.png" alt="极度证券">
          <div class="ab">
            <div class="sub">
              <!-- 分享赢现金券 -->
              {{ $t('share.l31') }}
            </div>
            <div class="text">
              <!-- 邀请好友并交易 -->
              {{ $t('share.l32') }}
            </div>
            <!-- 每位好友您将获得 <span class="span">50USD</span> 的现金奖励 -->
            <div class="text" v-html="getHtml()">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="ul flex">
        <div class="li" @click="copyText(link)">
          <img class="icon" src="/img/share/icon10.png" alt="极度证券">
          <div>
            <!-- 复制链接 -->
            {{ $t('share.l34') }}
          </div>
        </div>
        <div class="li" @click="generateImage">
          <img class="icon" src="/img/share/icon9.png" alt="极度证券">
          <div>
            <!-- 保存图片 -->
            {{ $t('share.l35') }}
          </div>
        </div>
      </div>
      <div class="cancel" @click="cancel">
        <!-- 取消 -->
        {{ $t('common.l2') }}
      </div>
    </div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas';
// import NativeShare from 'nativeshare'
import { copyText } from "@/utils/index";
import QRCode from 'qrcode'
export default {
  data () {
    return {
      img: ''
    }
  },
  computed: {
    link() {
      return location.origin + '/rf/' + this.userInfo.code
    },
  },
  mounted () {
    // this.generateImage()
    this.creatImg()
  },
  methods: {
    shareLink(image) {
      try {
        this.nativeShare = new NativeShare()
        var shareData = {
          // title: '极度证券',
          // desc: '极度证券',
          img: image,
          // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
          // link: window.location.href,
          // icon: window.location.origin + '/logo.png',
        }
        this.nativeShare.setShareData(shareData)
        this.nativeShare.call()
      } catch (err) {
        const link = document.createElement('a');
        link.href = image;
        link.download = this.userInfo.code + '.png';
        link.click();
      }
    },
    generateImage() {
      const element = document.getElementById('target');
      html2canvas(element).then((canvas) => {
        const image = canvas.toDataURL('image/png');
        const link = document.createElement('a');
        link.href = image;
        link.download = this.userInfo.code + '.png';
        link.click();
      })
    },
    cancel() {
      this.$emit('cancel')
    },
    copyText(text) {
      copyText(text);
    },
    creatImg() {
      QRCode.toDataURL(this.link,{
        margin: 0,
        width: 200,
        height: 200
      }).then((url) => {
        this.img = url
      })
      .catch((err) => {
        console.error(err)
      })
    },
    getHtml() {
      return this.$t('share.l33').replace('{p}', `<span class="span">50USD</span>`)
    },
  }
}
</script>
<style lang="less" scoped>
.pop {
  line-height: 1;
  width: 100vw;
  padding-top: 20px;
}
#target {
  position: relative;
  width: 304px;
  margin: 0 auto 5vh;
}
.img3 {
  display: block;
  width: 100%;
}
.container {
  position: absolute;
  top: 48px;
  left: 0;
  width: 304px;
  .title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #FFFFFF;
    .span {
      color: #4670F6;
    }
  }
  .box {
    justify-content: center;
  }
  .code-box {
    background: #171717;
    border-radius: 4px;
    border: 1px solid #FFFFFF;
    padding: 12px 15px;
    column-gap: 10px;
    color: #fff;
    margin-bottom: 40px;
    .copy {
      cursor: pointer;
      width: 14px;
    }
  }
}
.box1 {
  justify-content: center;
  margin-bottom: 24px;
  .qr-box {
    border-radius: 8px;
    border: 5px solid #ffffff;
    position: relative;
  }
  .qr {
    display: block;
    width: 90px;
  }
  .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
  }
}
.box2 {
  position: relative;
  .img2 {
    display: block;
    width: 247px;
    margin: 0 auto;
  }
  .ab {
    position: absolute;
    top: 14px;
    left: 47px;
  }
  .sub {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
  }
  .text {
    font-size: 12px;
    &+.text {
      margin-top: 3px;
    }
  }
}
.bottom {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff;
  border-radius: 10px 10px 0px 0px;
  .ul {
    padding: 17px 38px 23px;
  }
  .li {
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    color: #3C3C3C;
    &+.li {
      margin-left: 36px;
    }
  }
  .icon {
    display: block;
    width: 40px;
    margin: 0 auto 13px;
  }
  .cancel {
    cursor: pointer;
    background: #F6F6F6;
    text-align: center;
    padding: 18px 0;
    font-size: 16px;
    line-height: 18px;
    color: #000000;
  }
}
::v-deep {
  .box2 {
    .span {
      font-weight: 600;
      color: #4670F6;
      font-size: 14px;
      vertical-align: middle;
    }
  }
}
</style>