import { getWxaqrcode } from "../../api/goods.js"
import { ossStatic } from "../../utils/config.js"
Component({
  options: {
    multipleSlots: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
    canvasData: {
      type: Object,
      value: {}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    src: "",
    width: "",
    height: "",
    detail: {},
    factor: null, // 当前屏幕宽度
  },

  lifetimes: {
    attached() {
      // 获取屏幕宽度
      const sysInfo = wx.getSystemInfoSync()
      const screenWidth = sysInfo.screenWidth
      this.setData({
      factor: screenWidth / 750
    })
      this.widget = this.selectComponent('.widget')
      wx.showLoading({
        title: '图片绘制中'
      })
      this.__proto__.getWxaqrcode(this, this.__proto__.renderToCanvas)
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 获取小程序码
     **/
    getWxaqrcode(_this, callback) {
      let { path, scene } = _this.data.canvasData
      let params = {
        page: path,
        scene: JSON.stringify(scene),
        width: 75
      }
      getWxaqrcode(params).then(res => {
        const filePath = `${wx.env.USER_DATA_PATH}/eshop_temp_image_${new Date().getTime()}_${scene.giftBagUuid}.jpg`;
          const buffer = wx.base64ToArrayBuffer(res.data);
          wx.getFileSystemManager().writeFile({
            filePath,
            data: buffer,
            encoding: 'binary',
            success() {
              callback(_this, filePath)
            }
          });
      })
    },
    /**
     * rpx转px
     */
    toPx: function(rpx) {
      return rpx * this.data.factor
    },
    /**
     * px转rpx
     */
    toRpx: function(px) {
      return px / this.data.factor
    },
    renderToCanvas(_this, e) {
      const wxml = `
        <view class="container">
          <image src="https://exp-picture.cdn.bcebos.com/def72c6c576699cfe346fad0a885e036e3915ea9.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1" class="avatar"></image>
          <text class="user_name">用户昵称用户昵称</text>
          <image class="red_dialog" src="${ossStatic}gift_share_text_338.png"></image>
          <image class="card_image" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3277495659,786462183&fm=26&gp=0.jpg"></image>
          <text class="gift_name">这里礼包名称这里礼包名称这里礼包名车成这里里</text>
          <text class="gift_price">¥399.09</text>
          <text class="gift_orignal_price">¥399.09</text>

<image class=“qrcode_image” src="${e}"></image>

        </view>
      `
      const style = {
        container: {
          width: _this.toPx(590),
          height: _this.toPx(760),
          backgroundColor: '#fff',
          borderRadius: _this.toPx(10),
          padding: _this.toPx(40)
        },
        avatar: {
          width: _this.toPx(80),
          height: _this.toPx(80),
          backgroundColor: "#eee",
          borderRadius: 20,
          position: "absolute"
        },
        user_name: {
          width: _this.toPx(384),
          height: _this.toPx(42),
          fontSize: _this.toPx(30),
          color: "#666",
          position: "absolute",
          left: _this.toPx(140)
        },
        red_dialog: {
          width: _this.toPx(334),
          height: _this.toPx(68),
          position: "absolute",
          left: _this.toPx(140),
          top: _this.toPx(92)
        },
        card_image: {
          width: _this.toPx(510),
          height: _this.toPx(340),
          position: "absolute",
          left: _this.toPx(40), 
          top: _this.toPx(190),
          borderRadius: 4
        },
        gift_name: {
          width: _this.toPx(340),
          height: _this.toPx(84),
          position: "absolute",
          left: _this.toPx(40), 
          top: _this.toPx(560),
          fontSize: _this.toPx(30),
          color: "#666"
        },
        gift_price: {
          width: _this.toPx(205),
          height: _this.toPx(56),
          position: "absolute",
          left: _this.toPx(40), 
          top: _this.toPx(664),
          fontSize: _this.toPx(40),
          color: "#FF3E66"
        },
        gift_orignal_price: {
          width: _this.toPx(150),
          height: _this.toPx(56),
          position: "absolute",
          left: _this.toPx(245), 
          top: _this.toPx(674),
          fontSize: _this.toPx(30),
          color: "#999" 
        },
        qrcode_image: {
          width: _this.toPx(150),
          height: _this.toPx(150),
          position: "absolute",
          left: _this.toPx(400), 
          top: _this.toPx(560),
          borderRadius: _this.toPx(4)
        }
      }
      const p1 = _this.widget.renderToCanvas({ wxml, style })
      p1.then((res) => {
        _this.container = res
        _this.extraImage(_this)
      })
    },
    extraImage(_this) {
      const p2 = _this.widget.canvasToTempFilePath()
      p2.then(res => {
        _this.setData({
          src: res.tempFilePath,
          width: _this.container.layoutBox.width,
          height: _this.container.layoutBox.height
        })
        wx.hideLoading()
      })
    },
  }
})