<template>
  <div class="page">
    <van-sticky class="sticky">
      <div class="header">
        <div class="back">
          <backIcon/>
        </div>
        <!-- 二维码名片 -->
        {{ $t('about.l17') }}
        <!-- <img class="scan" src="/img/setting/scan.png" alt="极度证券"> -->
      </div>
    </van-sticky>
    <div class="container">
      <div class="box">
        <div class="top flex">
          <van-image
            width="36"
            height="36"
            round
            fit="cover"
            :src="userInfo.head_file || '/img/home/user.png'"
          />
          <div>{{ userInfo.code }}</div>
        </div>
        <div>
          <img class="qr" :src="img" alt="极度证券">
        </div>
        <div class="tip">
          <!-- 扫一扫,加极友 -->
          {{ $t('about.l26') }}
        </div>
        <img v-if="language == 'zh-CN' || language == 'zh-TW'" class="logo" src="/img/icon/logo.png" alt="极度证券">
        <img v-else class="logo" src="/img/icon/logo_en.png" alt="极度证券">
      </div>
      <div class="btn-box flex">
        <div class="btn ltn flex" @click="saveAddress">
          <img class="icon" src="/img/setting/save.png" alt="极度证券">
          <!-- 保存 -->
          {{ $t('common.l47') }}
        </div>
        <div class="btn rtn flex" @click="shareLink">
          <img class="icon" src="/img/setting/share.png" alt="极度证券">
          <!-- 分享 -->
          {{ $t('common.l53') }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import NativeShare from 'nativeshare'
import { copyText } from '@/utils/index'
import { mapGetters } from "vuex";
import QRCode from 'qrcode'
export default {
  data () {
    return {
      img: '',
      link: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    userInfo: {
      handler() {
        this.creatImg()
      },
      deep: true
    }
  },
  created() {
    if (this.userInfo.code) {
      this.creatImg()
    }
  },
  methods: {
    saveAddress() {
      if (this.img) {
        var alink = document.createElement("a");
        alink.href = this.img;
        alink.download = this.userInfo.code;
        alink.click();
      }
    },
    shareLink() {
      try {
        this.nativeShare = new NativeShare()
        var shareData = {
          link: this.link,
          icon: window.location.origin + '/logo.png',
        }
        this.nativeShare.setShareData(shareData)
        this.nativeShare.call()
      } catch (err) {
        copyText(this.link)
      }
    },
    creatImg() {
      this.link = location.origin + '/rf/' + this.userInfo.code
      QRCode.toDataURL(this.link,{
        margin: 1,
        width: 233,
        height: 233
      }).then((url) => {
        this.img = url
      }).catch((err) => {
        console.error(err)
      })
    },
  }
}
</script>
<style lang="less" scoped>
.page {
  min-height: 100vh;
  background-color: #F6FAFE;
}
.sticky {
  background-color: var(--bg-);
}
.header {
  position: relative;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 17px;
  font-size: 18px;
  background-color: var(--bg-);
  .back {
    position: absolute;
    left: 9px;
    top: 11px;
  }
  .scan {
    position: absolute;
    top: 11px;
    right: 11px;
    cursor: pointer;
    width: 24px;
  }
}
.container {
  padding: 15px 18px;
  .box {
    background-color: #fff;
    border: 1px solid #EFF3F7;
    padding: 17px 18px 28px;
  }
  .top {
    font-size: 16px;
    color: var(--color-1-);
    column-gap: 7px;
    margin-bottom: 49px;
  }
  .qr {
    display: block;
    width: 227px;
    max-width: 100%;
    margin: 0 auto;
  }
  .tip {
    color: #AAAAAA;
    font-size: 14px;
    line-height: 18px;
    margin-top: 6px;
    text-align: center;
  }
  .logo {
    display: block;
    width: 116px;
    margin: 0 auto;
    margin-top: 45px;
  }
}
.btn-box {
  margin-top: 33px;
  column-gap: 18px;
  .btn {
    flex: 1;
    height: 40px;
    border-radius: 6px;
    border: 1px solid var(--color-);
    font-weight: 500;
    cursor: pointer;
    justify-content: center;
  }
  .icon {
    width: 25px;
  }
  .ltn {
    color: var(--color-);
  }
  .rtn {
    color: #fff;
    background-color: var(--color-);
  }
}
</style>