<!-- 省、市 两级地区选择器 -->
<template>
  <view>
    <!-- 分享弹框 -->
    <van-share-sheet
        v-model="show"
        title="立即分享给好友"
        :close-on-click-overlay="false"
        :options="options"
        :cancel-text="''"
        @click-overlay="cancel"
        @cancel="cancel"
        @select="onShare"
    />
    <!-- 二维码弹框 -->
    <van-popup ref="qrcodeContent" class="qrcode-content" v-model="share_qrcode_show">
      <canvas ref="qrcode" canvas-id="share-qrcode" class="qrcode-canvas" />
    </van-popup>
    <!-- 海报弹框 -->
    <van-popup class="poster-content" v-model="share_poster_show">
      <canvas ref="posterImage" canvas-id="posterImage" id="posterImage" class="poster-image" />
      <image :src="poster_image" :show-menu-by-longpress="true" class="poster-image poster-show-image"/>
    </van-popup>
    <!--<view v-if="share_poster_show" class="poster-tip">-->
    <!--  <view class="download-button" @click="downloadPoster">下载海报</view>-->
    <!--</view>-->

    <view v-if="share_poster_show" class="poster-tip">长按图片保存</view>
    <!--同意关闭按钮-->
    <van-button v-if="share_poster_show || share_qrcode_show" type="danger" size="small" class="cancel-btn" @click="cancelAll">
      关闭
    </van-button>
  </view>
</template>

<script>
import uQRCode from 'common/js/uqrcode.js'
import {Weixin} from "../../common/js/wx-jssdk";
import Http from "../../common/js/http";

export default {
  name: 'share-panel',
  props:{
    // 是否显示
    show:{
      type: Boolean,
      default: function() {
        return false;
      }
    },
    // 分享信息
    share: {
      type: Object,
      default: function() {
        return {};
      }
    },
    // 分享参数
    shareParams: {
      type: Array,
      default: function() {
        return [];
      }
    },
  },
  onLoad() {},
  onShow() {},
  data() {
    return {
      userInfo: {},
      path: '',
      options: [
        // { name: '微信', icon: 'wechat' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
      share_qrcode_show: false,// 二维码分享
      share_poster_show: false,// 海报分享
      share_id: '',

      poster_image: '',
    };
  },
  watch: {
    share: {
      handler(newValue, oldValue) {

        this.createSharePath();
        this.setPublicShare();
      },
      immediate: false,
      deep: true
    }
  },
  created() {},
  mounted() {
    // 生成唯一分享id
    this.createShareId();
    // 获取个人信息
    this.getUserInfo();
  },
  methods: {
    //获取个人信息
    getUserInfo() {
      this.$api.sendRequest({
        url: '/api/member/info',
        success: res => {
          if (res.code == 0) {
            this.userInfo = res.data;

            this.createSharePath();
            this.setPublicShare();
          }
        }
      });
    },
    // 关闭
    cancel(){
      this.$emit('close');
    },
    // 关闭全部
    cancelAll(){
      this.share_qrcode_show = false;
      this.share_poster_show = false;

      this.cancel();
    },
    // 点击分享
    onShare(option,index){
      this.recordSharing();
      // 根据点击的类型进行对应的分享操作
      let icon = option.icon;
      switch (icon){
        case 'link': this.shareLink();break;
        case 'poster': this.sharePoster();break;
        case 'qrcode': this.shareQrcode();break;
      }
    },
    // 分享 —— 复制链接
    shareLink(){
      this.$util.copy(this.path);
      this.cancel();
    },
    // 分享 —— 二维码
    shareQrcode(is_get = false){
      let _this = this;
      _this.cancel();
      _this.share_qrcode_show = true
      return new Promise((req, rej) => {
        _this.$nextTick(() => {
          if(is_get) _this.$refs.qrcodeContent.$el.style.marginLeft = '50000px';
          else _this.$refs.qrcodeContent.$el.style.marginLeft = '0';
          let size = _this.$refs.qrcode.$el.offsetHeight;
          uQRCode.make({
            canvasId: 'share-qrcode',
            componentInstance: this,
            text: _this.path,
            size: size,
            margin: 10,
            backgroundColor: '#ffffff',
            foregroundColor: '#000000',
            fileType: 'jpg',
            errorCorrectLevel: uQRCode.errorCorrectLevel.H,
            success: res => {
              req(res);
            }
          });
        })
      });
    },
    // 分享 —— 生成海报
    async sharePoster(){
      // 显示内容
      let _this = this;
      _this.share_poster_show = true;
      let backgroundImage = _this.$util.img('public/picture/aijiu/article_bg.jpg');// 背景图片
      let avatar = _this.$util.img(  _this.userInfo.headimg );// 用户头像
      let qrcode = '';
      await _this.shareQrcode(true).then((res)=>{
        qrcode = res;
        _this.share_qrcode_show = false
      });
      // 开始绘制
      _this.$nextTick(() => {
        // 获取画布大小
        let width = _this.$refs.posterImage.$el.offsetWidth;// 300
        let height = _this.$refs.posterImage.$el.offsetHeight;// 510
        // 生成基本画布
        let ctx = uni.createCanvasContext('posterImage', this);
        ctx.setFillStyle('#ffffff'); // 默认白色
        ctx.fillRect(0, 0, width, height);// fillRect(x,y,宽度，高度)
        // 绘制背景图
        ctx.drawImage(backgroundImage, 0, 0, width , height) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
        // 绘制头像
        _this.drawAvatar(ctx,avatar,width);
        // 绘制用户昵称
        let nicknameLen = this.userInfo.nickname.length;
        let nicknameX = (width / 2) - (nicknameLen * 20 / 2);
        ctx.setFillStyle('#000000');
        _this.drawText(ctx,"20px Microsoft YaHei",this.userInfo.nickname,nicknameX,230,width)
        // 绘制文字
        ctx.setFillStyle('#a67344');
        _this.drawText(ctx,"20px Microsoft YaHei","欢迎关注",110,45,width)
        _this.drawText(ctx,"20px Microsoft YaHei","全叶真爱",110,70,width)
        // 邀请词
        let invitation = "邀请您一起学养生，懂健康";
        let len = invitation.length;
        let invitationX = (width / 2) - (len * 15 / 2);
        _this.drawText(ctx,"15px Microsoft YaHei",invitation,invitationX,270,width)
        // 二维码
        let qrcodeSize = 100;
        ctx.drawImage(qrcode, (width / 2 - (qrcodeSize / 2)), 290, qrcodeSize , qrcodeSize) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
        // 将内容绘制到画布上面
        ctx.draw(true,function () {


          uni.canvasToTempFilePath({
            canvasId: 'posterImage',
            success: (res) => {
              //console.log(res.tempFilePath);
              _this.poster_image = res.tempFilePath
            },
            fail: function(err) {
              console.log("失败")
              console.log(err)
            }
          })


        });





      })
    },
    // 生成海报 —— 绘制头像
    drawAvatar(ctx,avatar,width){
      let arcX = width / 2;
      let avatarSize = 40;
      ctx.save();
      // 绘制头像背景
      ctx.beginPath();
      ctx.fillStyle = "#d7c08a";
      ctx.arc(arcX,160,45,0,2*Math.PI);
      ctx.fill();
      // 绘制头像
      ctx.beginPath();
      ctx.arc(arcX,160, avatarSize, 0, Math.PI * 2);
      ctx.clip();
      ctx.drawImage(avatar, arcX - avatarSize, 160 - avatarSize , avatarSize * 2 , avatarSize * 2) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
      ctx.closePath();
      ctx.restore();
    },
    // 生成海报 —— 绘制文字
    drawText(ctx,size,text,x,y,maxWidth){
      ctx.save();
      ctx.beginPath();
      ctx.font = size;
      ctx.fillText(text, x, y, maxWidth);
      ctx.closePath();
      ctx.restore();
    },
    // 点击下载海报
    downloadPoster(){
      uni.canvasToTempFilePath({
        canvasId: 'posterImage',
        success: (res) => {
          uni.downloadFile({
            url: res.tempFilePath,
            success: (res) => {
              var link = document.createElement('a') //创建一个a标签
              link.href = res.tempFilePath//把a标签的href属性赋值到生成好了的url
              link.download = '邀请好友.png'//通过a标签的download属性修改下载图片的名字
              link.click()//让a标签的click函数，直接下载图片
            },
          })
        },
        fail: function(err) {
          console.log("失败canvasToTempFilePath")
          console.log(err)
        }
      })
    },
    // 记录分享信息
    recordSharing(){
      let _this = this;
      _this.$api.sendRequest({
        url: '/api/ShareRecord/recordShareInfo',
        data: { share_path: _this.path }
      });
    },
    // 设置公众号分享信息
    setPublicShare(){
      let shareUrl = this.path;
      let _this = this;
      this.$util.setPublicShare({
        title: _this.share.title, // 分享标题
        desc: _this.share.desc, // 分享描述
        link: shareUrl,
        imgUrl: _this.$util.img(_this.share.imgUrl), // 分享图标
      },function (params) {
        Http.sendRequest({
          url: '/api/ShareRecord/recordShareInfo',
          data: { share_path: params.link },
          success: res => {},
          fail:err=>{}
        })
      })
    },
    // 生成唯一的分享id
    createShareId(){
      let timeDate = new Date()
      this.share_id = timeDate.getTime().toString();
    },
    // 生成分享链接
    createSharePath(){
      // 生成唯一id
      this.createShareId();
      let member_id = this.userInfo.member_id;
      this.path = '';
      // 生成分享链接
      if(this.share.link){
        // 如果传递了分享链接  使用分享链接
        this.path = this.share.link + `?source_member=${member_id}&share_id=` + this.share_id.toString();
      }else{
        // 没有分享链接 生成分享链接
        let pages = getCurrentPages();
        let currentPage = pages[pages.length - 1].$page
        let currentPath = currentPage.path + `?source_member=${member_id}&share_id=` + this.share_id.toString();
        let options = currentPage.options;
        // 获取分享的参数
        if(Object.keys(this.shareParams).length > 0){
          this.shareParams.forEach(function (item, index) {
            if(options[item]) currentPath = currentPath + `&${item}=` + options[item];
          });
        }

        let split = window.location.href.split(currentPage.path)
        this.path = split[0] + currentPath;
      }
    }

  }
};
</script>

<style lang="scss" scoped>
.qrcode-content{
  width: 60vw;
  height: 60vw;
  .qrcode-canvas{
    width: 60vw;
    height: 60vw;
  }
}
.poster-content{
  --poster-size-: 300px; // 海报的大小
  width: var(--poster-size-);
  height: calc(var(--poster-size-) * 1.7);

  .poster-image{
    width: 100%;
    height: 100%;
  }

  .poster-show-image{
    position: absolute;
    z-index: 555555;
    top: 0;
  }
}
.poster-tip {
  position: absolute;
  font-size: 50rpx;
  font-weight: bold;
  z-index: 99999;
  bottom: 160rpx;
  width: 100%;
  text-align: center;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  .download-button{
    color: #fff;
    background: #ee0a24;
    width: 100px;
    border-radius: 30px;
    font-size: 15px;
    height: 30px;
    line-height: 30px;
  }
}
.cancel-btn{
  position: absolute;
  top: 40rpx;
  right: 40rpx;
  z-index: 999999;
  width: 100rpx;
  height: 50rpx;
  font-size: 26rpx;
  border-radius: 50rpx;
}
</style>

