<template>
  <div class="p-result">
    <div class="title">{{result.title}}</div>
    <div class="desc">{{result.desc}}</div>
    <div @click="saveImg">点击生成图片</div>
    <painter :palette="template" @imgOK="onImgOk" />
    <button data-id="shareBtn" open-type="share">点击分享</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: {},
      template: {
        background: '#eee',
        width: '654rpx',
        height: '400rpx',
        borderRadius: '20rpx',
        views: [
          {
            type: 'image',
            url:
              'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q',
            css: {
              top: '48rpx',
              right: '48rpx',
              width: '192rpx',
              height: '192rpx'
            }
          },
          {
            type: 'text',
            text: 'borderWidth',
            css: {
              bottom: '40rpx',
              right: '200rpx',
              color: 'green',
              borderWidth: '2rpx'
            }
          }
        ],
        imgPath: ''
      }
    }
  },
  onShow() {
    const result = wx.getStorageSync('tempResult')
    this.result = result
  },
  onShareAppMessage(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  },
  methods: {
    onImgOk(e) {
      // console.log(e.details.path)
      console.log(e.mp.detail.path)
      this.imgPath = e.mp.detail.path
    },
    saveImg() {
      wx.saveImageToPhotosAlbum({
        filePath: this.imgPath,
        success: function() {
          console.log('成功保存')
          wx.showToast({
            title: '保存成功', //提示的内容,
            icon: 'success', //图标,
            duration: 2000, //延迟时间,
            mask: true //显示透明蒙层，防止触摸穿透,
          })
        },
        fail: function(err) {
          console.log(err)
        }
      })
    }
  }
}
</script>

<style>
</style>
