<template>
  <view>
    <view @click="showFen = true">分享海报</view>
    <u-popup :show="showFen" :round="10" mode="bottom" @close="close" @open="open">
      <view class="topText flexC">立即分享给好友</view>
      <view class="centerBox flexJ">
        <view class="item flexA">
          <button open-type="share"></button>
          <image src="/static/WeChat.png" mode="scaleToFill" />
          <view>微信好友</view>
        </view>
        <view class="item flexA" @click="showHandler">
          <image src="/static/posterFen.png" mode="scaleToFill" />
          <view>分享海报</view>
        </view>
      </view>
      <view class="lineBox"></view>
      <view class="bottom flexC" @click="showFen = false">取消</view>
    </u-popup>
    <view style="margin-top: -9999rpx">
      <r-canvas ref="rCanvas"></r-canvas>
    </view>

    <view v-if="showPoster" class="maskBox flexA" @click="showPoster = false">
      <image @click.stop="() => {return}" class="posterImg flexC" :src="tempFilePath" mode="scaleToFill" />
      <view class="whiteBtnBox flexC" @click.stop="saveQrCodeHandler">
        <image
          src="/static/downLoad.png"
          mode="scaleToFill"
        />
      </view>
      <view class="text flexC" @click.stop="saveQrCodeHandler">保存图片</view>
    </view>
  </view>
</template>

<script>
import rCanvas from '@/components/r-canvas/r-canvas.vue'
export default {
  components: { rCanvas },
  data() {
    return {
      showFen: false,
      tempFilePath: '',
      showPoster: false,
    }
  },
  onReady() {
    this.draw()
  },
  onLoad(options) {
    wx.showShareMenu({
      withShareTicket: true,
      //设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
      menus: ['shareAppMessage', 'shareTimeline'],
    })
  },
  methods: {
    open() {
      // console.log('open');
    },
    close() {
      this.showFen = false
      // console.log('close');
    },
    draw() {
      this.$nextTick(async () => {
        // 初始化
        await this.$refs.rCanvas.init({
          canvas_id: 'rCanvas',
          canvas_height: 456,
          canvas_width: 343,
          background_color: '#ffffff',
        })

        // 顶部大图
        await this.$refs.rCanvas
          .drawImage({
            url: '/static/posterTop.png',
            x: 0,
            y: 0,
            w: 343,
            h: 214,
          })
          .catch(err_msg => {
            uni.showToast({
              title: err_msg,
              icon: 'none',
            })
          })

        // 标题
        await this.$refs.rCanvas
          .drawText({
            text: '少儿美术培训班',
            x: 116,
            y: 238,
            font_color: '#000000',
            font_size: 16,
            font_weight: 700,
          })
          .catch(err_msg => {
            uni.showToast({
              title: err_msg,
              icon: 'none',
            })
          })

        // 价格
        await this.$refs.rCanvas
          .drawText({
            text: '¥234',
            x: 149,
            y: 264,
            font_color: '#000000',
            font_size: 18,
            font_weight: 700,
          })
          .catch(err_msg => {
            uni.showToast({
              title: err_msg,
              icon: 'none',
            })
          })

        // 时间图标
        await this.$refs.rCanvas
          .drawImage({
            url: '/static/time.png',
            x: 91,
            y: 300,
            w: 16,
            h: 16,
          })
          .catch(err_msg => {
            uni.showToast({
              title: err_msg,
              icon: 'none',
            })
          })
        // 时间
        await this.$refs.rCanvas
          .drawText({
            text: '2021-08-09 10:00-12:00',
            x: 116,
            y: 312,
            font_color: '#646566',
            font_size: 12,
            font_weight: 400,
          })
          .catch(err_msg => {
            uni.showToast({
              title: err_msg,
              icon: 'none',
            })
          })
        // 地点
        await this.$refs.rCanvas
          .drawText({
            text: '塘沽学校-生态城校区',
            x: 116,
            y: 344,
            font_color: '#646566',
            font_size: 12,
            font_weight: 400,
          })
          .catch(err_msg => {
            uni.showToast({
              title: err_msg,
              icon: 'none',
            })
          })
        // 地点图标
        await this.$refs.rCanvas
          .drawImage({
            url: '/static/aabb.png',
            x: 91,
            y: 330,
            w: 16,
            h: 16,
          })
          .catch(err_msg => {
            uni.showToast({
              title: err_msg,
              icon: 'none',
            })
          })
        // 头像
        await this.$refs.rCanvas
          .drawImage({
            url: '/static/headImg.jpg',
            x: 18,
            y: 384,
            w: 44,
            h: 44,
            border_radius: 22,
          })
          .catch(err_msg => {
            uni.showToast({
              title: err_msg,
              icon: 'none',
            })
          })

        // 名字
        await this.$refs.rCanvas
          .drawText({
            text: '张美丽',
            x: 74,
            y: 400,
            font_color: '#000000',
            font_size: 14,
            font_weight: 400,
          })
          .catch(err_msg => {
            uni.showToast({
              title: err_msg,
              icon: 'none',
            })
          })
        // 推销文字
        await this.$refs.rCanvas
          .drawText({
            text: '长按识别二维码去看好课程',
            x: 74,
            y: 421,
            font_color: '#969799',
            font_size: 12,
            font_weight: 400,
          })
          .catch(err_msg => {
            uni.showToast({
              title: err_msg,
              icon: 'none',
            })
          })

        // 二维码
        await this.$refs.rCanvas
          .drawImage({
            url: '/static/qrCode.png',
            x: 245,
            y: 358,
            w: 80,
            h: 80,
          })
          .catch(err_msg => {
            uni.showToast({
              title: err_msg,
              icon: 'none',
            })
          })

        // 生成海报
        await this.$refs.rCanvas.draw(res => {
          //res.tempFilePath：生成成功，返回base64图片
          // 保存图片
          this.tempFilePath = res.tempFilePath
          // this.$refs.rCanvas.saveImage(res.tempFilePath)
        })
      })
    },
    saveQrCodeHandler() {
      this.$nextTick(async () => {
        uni.showLoading({
          title: '生成中',
          mask: true,
        })

        // 生成海报
        uni.hideLoading()
        uni
          .showModal({
            title: '提示',
            content: '是否下载当前生成的海报？',
            success: res => {
              if (res.confirm) {
                // 保存图片
                this.$refs.rCanvas
                  .saveImage(this.tempFilePath)
                  .then(() => {
                    uni.showToast({
                      title: '保存成功',
                      icon: 'success',
                    })
                  })
                  .catch(err => {
                    // this.error(err)
                    console.log(err)
                  })
              }
            },
          })
          .catch(err => {
            this.error(err)
          })
      })
    },
    // 分享微信好友
    onShareAppMessage() {
      // 此处的distSource为分享者的部分信息，需要传递给其他人
      let distSource = 'jiejiejie'
      if (distSource) {
        return {
          title: '欢迎使用xxx商城',
          type: 0,
          path: '/pages/index/poster?id=' + distSource,
          summary: '',
          imageUrl: this.tempFilePath,
        }
      }
    },
    showHandler() {
      this.showFen = false
      this.showPoster = true
    },
  },
}
</script>

<style lang="scss">
page {
  background: #fff;
}
.topText {
  margin: 40rpx 0;
  color: rgba(49.98, 50.35, 51, 1);
  font-size: 28rpx;
}
.centerBox {
  padding: 0 190rpx;
  box-sizing: border-box;
  > .item {
    flex-direction: column;
    color: rgba(100, 101, 102, 1);
    font-size: 24rpx;
  }
  image {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    margin-bottom: 16rpx;
  }
}
.lineBox {
  width: 100%;
  height: 16rpx;
  background: rgba(247, 248, 250, 1);
  margin-top: 32rpx;
}
.bottom {
  padding: 26rpx 0 0 0;
  box-sizing: border-box;
  color: rgba(99.96, 100.71, 102, 1);
  font-size: 32rpx;
}
.posterImg {
  margin: 60rpx auto 40rpx;
  width: 686rpx;
  height: 912rpx;
  border-radius: 32rpx;
}
.maskBox {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  flex-direction: column;
}
button {
  background: transparent;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;

  position: absolute;
  /* top: 0; */
}
.whiteBtnBox{
  width: 112rpx;
  height: 112rpx;
  border-radius: 50%;
  background: #fff;
  image{
    width: 74rpx;
    height: 82rpx;
  }
}
.text{
  color: rgba(255,255,255,1);
font-size: 28rpx;
font-weight: 700;
margin-top: 16rpx;
}
</style>