<template>
  <div class="pop">
    <div class="container">
      <img class="close" @click="cancel" src="/img/home/nav/close.png" alt="">
      <div id="target">
        <img class="img" src="/img/share/img1.png" alt="">
        <div class="title">
          <!-- 注册即可领取 -->
          {{ $t('share.l29') }} <span class="span">$ 1000</span></div>
        <div class="box">
          <div class="code-box">
            <!-- 邀请码 -->
            {{ $t('share.l30') }}:<span class="span">{{ userInfo.code }}</span>
            <img
              class="copy"
              @click="copyText(userInfo.code)"
              src="/img/icon/copy.png"
              alt=""
            />
          </div>
        </div>
        <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="box2">
          <img class="img2" src="/img/share/img2.png" alt="">
          <div class="sub">
            <!-- 分享赢现金宝箱！ -->
            {{ $t('share.l31') }}
          </div>
          <div class="text">
            <!-- 邀请好友加入极度并交易，您将获得最高 -->
            {{ $t('share.l32') }}<span class="span">500USD</span>{{ $t('share.l33') }}
            <!-- 的现金宝箱 -->
          </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: 1,
        width: 200,
        height: 200
      }).then((url) => {
        this.img = url
      })
      .catch((err) => {
        console.error(err)
      })
    },
  }
}
</script>
<style lang="less" scoped>
.pop {
  line-height: 1;
  padding-top: 20px;
}
.container {
  position: relative;
  width: 340px;
  margin: 0 auto 12.597vh;
  .close {
    position: absolute;
    top: 14px;
    right: 12px;
    width: 15px;
    cursor: pointer;
  }
}
#target {
  border-radius: 12px;
  background: #F6F6F6;
  overflow: hidden;
  .img {
    display: block;
    width: 100%;
  }
  .title {
    text-align: center;
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 10px;
    .span {
      color: #FF6F30;
    }
  }
  .box {
    padding: 0 23px 19px;
  }
  .code-box {
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgba(219,219,219,0.5);
    border-radius: 6px;
    line-height: 36px;
    padding: 0 11px;
    position: relative;
    font-size: 16px;
    .span {
      color: #FF6F30;
    }
    .copy {
      position: absolute;
      top: 9px;
      right: 10px;
      width: 19px;
      cursor: pointer;
    }
  }
}
.box1 {
  justify-content: center;
  padding-bottom: 16px;
  .qr-box {
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #E9E9E9;
    padding: 2px 6px;
    position: relative;
  }
  .qr {
    display: block;
    width: 117px;
  }
  .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
  }
}
.box2 {
  background-color: #fff;
  position: relative;
  padding: 18px 5px 18px 88px;
  .sub {
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
    margin-bottom: 6px;
    position: relative;
  }
  .text {
    font-size: 11px;
    line-height: 17px;
    opacity: 0.67;
    position: relative;
  }
  .span {
    color: #FF6F30;
  }
  .img2 {
    position: absolute;
    top: 13px;
    left: 10px;
    width: 88px;
  }
}
.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-top: 18px;
    padding-bottom: 27px;
    font-size: 16px;
    line-height: 18px;
    color: #000000;
  }
}
</style>