<view
  class="drawer_box"
  wx:if="{{showModalStatus}}"
  catchtouchmove="preventTouchMove"
>
  <view class="drawer_border" style="width:75%;height:{{canvasHeight}}px;">
    <!-- 将绘制好的海报生产图片绘制到预览框 -->
    <canvas 
      class="drawer-canvas"
      canvas-id="poster"
      style="height:{{canvasHeight}}px;"
    ></canvas>
  </view>
  <view class="btn_ok" bindtap="saveToImage" data-status="close">保存图片</view>
</view>

<!-- 隐藏用来绘制的canvas -->
<view class='canvas-wrap' style='width:0px;height:0px;overflow:hidden'>
  <canvas canvas-id="poster-canvas" style='width:750rpx;height:{{hiddenCanvasH}}rpx'></canvas>
</view>

<!-- 用来调试绘制的canvas -->
<!-- <view class='canvas-wrap' style='width:750px;height:{{hiddenCanvasH}}px;'>
  <canvas canvas-id="poster-canvas" style='width:750rpx;height:{{hiddenCanvasH}}rpx'></canvas>
</view> -->

let posterUrl = ''; // 海报临时url
let permissions = false; // 是否搜权标识

Page({
  drawPoster: function () {
    const that = this;
    wx.showLoading({
      title: "生成海报中",
    });

    const pro = this.data.proportion;
    const ctx = wx.createCanvasContext("poster-canvas");
    // 绘制本地图片
    ctx.drawImage('../../../images/1.png', 0, 0, 750 * pro, 1150 * pro);

    ctx.font = "12px PingFangSC-Regular";
    ctx.fillStyle = "#999999";
    ctx.textAlign = "center"; // 居中
    ctx.fillText(dateFormatStr.yymmddd, 375 * pro, 492 * pro); // 日期

    // 绘制外链图片
    wx.getImageInfo({
      src: imgUrl,
      success(res){
        ctx.drawImage(res.path, 234 * pro, 625 * pro, 280 * pro, 280 * pro)
        ctx.draw(false,setTimeout(() => {
          that.drawPosterToModal();
        },1000));
      }
    })
  
  },
  // 将海报画到模态框
  drawPosterToModal() {
    var that = this;
    const pro = this.data.proportion;
    // 画完二维码之后生成整体海报的临时路径
    wx.canvasToTempFilePath({
      canvasId: "poster-canvas",
      quality: 1,
      x: 0,
      y: 0,
      destWidth: that.data.screenWidth * that.data.dpr, // 适配当前设备的实际像素：屏幕宽度 * dpr = 实际像素
      destHeight: that.data.screenWidth * that.data.dpr * that.data.hiddenCanvasH / 750,
      fileType: "png",
      success: function (res) {
        // 把海报画到模态框
        posterUrl = res.tempFilePath;
        let finalWidth = that.data.canvasHeight * that.data.screenWidth / (that.data.hiddenCanvasH * pro);
        let finalX = Math.floor((that.data.canvasWidth - finalWidth) / 2)
        wx.hideToast();
        const ctx2 = wx.createCanvasContext("poster");
        ctx2.drawImage(res.tempFilePath, finalX, 0, finalWidth, that.data.canvasHeight);
        ctx2.draw();
      },
      fail: function (res) {
        console.info('生成海报失败');
      }
    })
  },
  // 保存到相册
  saveToImage: function () {
    const that = this;
    setTimeout(function () {
      wx.showLoading({
        title: "保存中",
      });

      wx.saveImageToPhotosAlbum({
        filePath: posterUrl,
        success(res) {
          // 保存成功
          wx.hideLoading();
          that.setData({
            showModalStatus: false
          });
          wx.showModal({
            content: "海报已保存到相册，赶紧去朋友圈晒一下吧",
            confirmText: "确定",
            confirmColor: '#000000',
            showCancel: false, //是否显示取消按钮
          });
        },

        fail: function (res) {
          wx.hideLoading();
          if (res.errMsg === "saveImageToPhotosAlbum:fail:auth denied" 
            || res.errMsg === "saveImageToPhotosAlbum:fail auth deny" 
            || res.errMsg === "saveImageToPhotosAlbum:fail authorize no response"
          ) {
            if (permissions) {
              that.imageErrorAuth();
            }
          }
          permissions = true;
        }
      });
    }, 1000);
  },
  // 无授权时的处理
  imageErrorAuth: function () {
    wx.showModal({
      title: "提示",
      content: "需要您授权保存相册",
      showCancel: true,
      success: function (res) {
        if (res.confirm) {
          wx.openSetting({
            success(settingdata) {
              console.log("settingdata", settingdata)
              if (settingdata.authSetting['scope.writePhotosAlbum']) {
                wx.showModal({
                  title: "提示",
                  content: "获取权限成功,再次点击生成海报即可",
                  showCancel: false,
                })
              } else {
                wx.showModal({
                  title: "提示",
                  content: "获取权限失败，将无法保存到相册",
                  showCancel: false,
                })
              }
            },
            fail(failData) {
              console.log("failData", failData);
            },
            complete(finishData) {
              console.log("finishData", finishData);
            }
          })
        }
      }
    })
  },
});