<template>
  <view class="poster">
    <view class="poster-mask" />
    <view class="poster-content">
      <image :show-menu-by-longpress="isTouchSave" :src="posterPath" class="poster-image" />
    </view>
    <button class="poster-button" @click="bundleSaveClick">
      点击保存海报
    </button>
  </view>
</template>

<script>
import saveImageMixin from "@/mixins/saveImage.mixin";
export default {
  mixins: [saveImageMixin],
  data() {
    return {
      isTouchSave: true,
      posterPath: ""
    };
  },
  async onLoad(option) {
    if (option.url) {
      this.posterPath = JSON.parse(decodeURIComponent(option.url));
    }
  },
  methods: {
    bundleSaveClick() {
      this.saveEwm();
    },
    saveImage() {
      const _self = this;
      const posterPath = this.posterPath;
      uni.downloadFile({
        url: posterPath,
        success: function(res) {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function() {
                _self.successTip();
              },
              fail: function() {
                _self.failTip();
              }
            });
          }
        },
        fail: function(error) {
          console.log(error);
          _self.failTip();
        }
      });
    },
    successTip() {
      const _self = this;
      wx.showToast({
        title: "保存海报成功",
        icon: "success", //图标，支持"success"、"loading"
        duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
        mask: false, //是否显示透明蒙层，防止触摸穿透，默认：false
        complete: function() {
          // _self.isTouchSave = true;
        }
      });
    },
    failTip() {
      const _self = this;
      uni.showModal({
        title: "失败",
        content: "保存海报失败",
        showCancel: false,
        confirmText: "确定",
        confirmColor: "#ec1500",
        icon: "success",
        success: function() {
          // _self.isTouchSave = true;
        }
      });
    },
    refuseSaveImage() {
      // this.isTouchSave = true;
    },
    doneSaveImage() {
      // 再次授权成功
      this.saveImage();
    }
  }
};
</script>
<style lang="scss">
.poster {
  width: 100%;
  height: 100%;
  padding: 40rpx 60rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  align-items: center;
  &-button {
    width: 580rpx;
    height: 80rpx;
    line-height: 80rpx;
    border: none;
    color: $white;
    background-image: $background-primary;
    margin-top: 40rpx;
  }
  &-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $uni-bg-color-mask;
  }
  &-content {
    // width: 580rpx;
    // height: 1078rpx;

    width: 580rpx;
    height: 1000rpx;
    border-radius: 10rpx;
    overflow: hidden;
    z-index: 1;
  }
  &-image {
    width: 100%;
    height: 100%;
  }
}
</style>
