<template>
    <view class="InviteCode">
        <view class='poste_box' id='canvas-container'>
             <canvas type="2d"  id="canvass" :style="{ width: '100vw', height:  667 * (systemInfo.windowWidth / 375) + 'px' }"></canvas>
        </view>
    </view>
</template>

<script>
import {staticPicture } from '@/utils/global.js'
import banner from '../../static/image/poster.jpg'
import Tip from '@/utils/tip.js'
export default {
  name: 'InviteCode',
  props: {
      name: {
          type: String,
          default: '逻辑狗'
      },
      codeUrl: {
          type: String,
          required: true
      }
  },
  computed: {
      mulName () {
          return this.name.length > 3 ? this.name.substr(0,3) + '...' : this.name
      },
      systemInfo () {
          return this.$store.state.systemInfo
      }
  },
   onReady () {
       Tip.loading('生成邀请码中')
      this.createPoster()
  },
  data () {
      return {
          staticPicture,
          bgImg: '',
          InviteCode: '',
          imgUrl: '',
          banner
      }
  },
  methods: {
    createPoster() {
    
    this.createSelectorQuery().select("#canvass").fields({
            node: true,
            size: true,
    }).exec( (res => {

        const { windowHeight, windowWidth }  = this.systemInfo
         let rpx = windowWidth / 375
      
        const width = res[0].width;
        const height = res[0].height;

        const inviteCodeSite = {
            x: windowWidth  / 2 - 90.5 * rpx,
            y: height * 0.41
        }

        const nameSite = {
            x: windowWidth * 0.3413,
            y: height * 0.3088
        }

        const tipSite = {
            x: windowWidth  / 2 - 90.5 * rpx ,
            y: height * 0.92
        }


        const canvas = res[0].node;
            const ctx = canvas.getContext("2d");
            // 开始绘制        
            const dpr = wx.getSystemInfoSync().pixelRatio;
            canvas.width = width * dpr;
            canvas.height = height * dpr;
            ctx.scale(dpr, dpr);
            
            const bgImg = canvas.createImage()
            const InviteCode = canvas.createImage()
         
            bgImg.onload = () => {
                this.bgImg = bgImg
              
                ctx.drawImage( this.bgImg, 0, 0,  width ,  height);
            }

            InviteCode.onload = () => {
                this.InviteCode = InviteCode
                ctx.drawImage( this.InviteCode, inviteCodeSite.x, inviteCodeSite.y, 181 * rpx, 180 * rpx);
            }
           
            bgImg.src = '/static/image/poster.jpg'
                 // 画布背景
            InviteCode.src = this.codeUrl
            setTimeout( async () => {
                // 邀请人
                ctx.font = " 600 " + rpx  * 16 + "px" + " PingFangSC-Semibold, PingFang SC";
                ctx.fillStyle = "#666";
                
                ctx.fillText(this.mulName + '邀请您开园', nameSite.x, nameSite.y);
                // 提示

                ctx.font = rpx * 12 + "px" + 'PingFangSC-Semibold, PingFang SC'
                ctx.fillStyle = "#fff";
        
                ctx.fillText( '长按上图保存图片或发给好友', tipSite.x, tipSite.y);

           
                // 邀请码
                const imgUrl = canvas.toDataURL()
                this.imgUrl = imgUrl
                Tip.loaded()

                await Tip.success('生成成功')
                
                 wx.previewImage({
                    current: imgUrl, // 当前显示图片的http链接
                    urls: [imgUrl] // 需要预览的图片http链接列表
                })
                setTimeout(() => {
                         this.$emit('inviteCodeOverlay')
                }, 0)
           
            }, 1000)
    }).bind(this))
  }
  }
}
</script>
<style scoped lang="less">
.InviteCode {
    width: 100vw;
    height: 100vh;
    position: relative;
    .bg-img {
        width: 100%;
        height: 100%;
    }
    .name {
        position: absolute;
        left: 35%;
        top: 33.8%;
        font-size: 36rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #666666;
    }
    .code-url {
        width: 362rpx;
        height: 360rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .code-url {
        position: absolute;
        z-index: 1;
        left: 50%;
        top: 55%;
        transform: translate(-50%, -50%);
    }
}

.poste_box {
  width: 100%;
  margin: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
</style>