import _ from '../../commons/js/commons'
import Canvas from '../../commons/js/utils/canvas'
let isGetImgInfo = false
const app = getApp()
Component({
  //组件的属性列表
  properties: {
    isShow: {
      type: Boolean,
      value: false
    },
    customImg: {
      type: String,
      value: ''
    },
    codeImg: {
      type: String,
      value: ''
    },
  },

  //组件的初始数据
  data: {
    imgs: [],
    tempPosterPath: '',
    showOptBtn:false,//操作按钮显示
  },

  attached: function () {
    isGetImgInfo = false
  },

  //数据监听
  observers: {
    'isShow': function (e) {
      if (e) {
        this.setData({
          showOptBtn:false,
        })
        this.createPoster()
      }
    },
    'customImg': function (e) {
      if (e) {
        this.getImageInfo(this.data.customImg, 0)
      }
    },
    'codeImg': function (e) {
      if (e) {
        this.getImageInfo(this.data.codeImg, 1)
      }
    },
  },

  //组件的方法列表
  methods: {

    // 转化网络图片，获取路径
    getImageInfo(src, index) {
      let that = this
      isGetImgInfo = false
      setTimeout(function () {
        wx.getImageInfo({
          src: src,
          success: (res) => {
            let arr = that.data.imgs
            arr[index] = res
            that.setData({
              imgs: arr
            })
            isGetImgInfo = true
          },
          fail: (err) => {
            console.log('error img is: ' + src)
          }
        })
      }, 200)
    },

    //自定义海报
    customizePoster(CTX){

      if(this.data.customImg){
        let that = this
        let width = 600
        let height = (parseFloat(this.data.imgs[0].height)/parseFloat(this.data.imgs[0].width))*600
        this.setData({
          canvasInfo:{
            width: width+'px',
            height: height+'px'
          }
        })

        // CTX.setFillStyle('#ffffff')
        // CTX.fillRect(0, 0,width+20, picheight+optheight+ftheight+20)
        
        //底图
        if (that.data.imgs[0]) {
          CTX.drawImage(that.data.imgs[0].path, 0, 0, that.data.imgs[0].width, that.data.imgs[0].height, 0, 0, width, height)
        }
      
        //二维码
        if (that.data.imgs[1]) {
          CTX.drawImage(that.data.imgs[1].path,417, height-180,140,140)
        }
        

        setTimeout(function(){
          CTX.save()
          CTX.draw(true, function () {
            wx.hideLoading()
            that.saveCanvas()
          })
        },200)
        
      }
      
    },

    //生成海报
    createPoster() {
      let that = this
      wx.showLoading({
        title: '正在生成',
      })
      
      if(isGetImgInfo){
        this.setData({
          tempPosterPath: ''
        })
        let ctx = wx.createCanvasContext('postercanvas', that)
        that.customizePoster(ctx)
      }
    },

    //临时存储canvas
    saveCanvas() {
      let that = this
      wx.canvasToTempFilePath({
        canvasId: 'postercanvas',
        quality: 1,
        success: (res) => {
          // this.tempFilePath = res.tempFilePath
          that.setData({
            'tempPosterPath': res.tempFilePath
          })

          setTimeout(function () {
            that.setData({
              showOptBtn:true,
            })
          },200)

        },
        fail: (res) => {
          app.printErrorClient('poseterfail',['错误信息：临时存储canvas失败',JSON.stringify(res)])
        }
      }, this)
    },
    
    //保存到相册
    saveToAblum() {
      let that = this
      wx.saveImageToPhotosAlbum({
        filePath: this.data.tempPosterPath,
        success: (res) => {
          _.utils.$toast('保存成功')
        },
        fail: (err) => {
          app.printErrorClient('poseterfail',['错误信息：图片保存失败',JSON.stringify(err)])
          if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
            _.utils.$toast('您已取消保存')
          } else if (err.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
            _.utils.$modal('提示', '保存图片失败，您可以点击确定设置获取相册权限后再尝试保存！', '去授权').then(res => {
              if (res) {
                wx.openSetting({}) // 打开小程序设置页面，可以设置权限
              }
            })
          }
        }
      })
    },

    //隐藏海报弹框
    hidePoster() {
      this.setData({
        isShow: false
      })
      wx.hideLoading()
    },

    //预览图片
    preview() {
      wx.previewImage({
        current: this.data.tempPosterPath, // 当前显示图片的http链接
        urls: [this.data.tempPosterPath] // 需要预览的图片http链接列表
      })
    },

    //推送链接
    pushLink(e) {
      if(e.currentTarget.dataset.url){
        _.$router.openUrlScheme(e.currentTarget.dataset.url)
      }
    },

  //复制内容
  copyWord(e){
    if(e.currentTarget.dataset.tx){
      wx.setClipboardData({
        data: e.currentTarget.dataset.tx,
        success (res) {
          _.utils.$toast('复制成功')
        }
      })
    }else{
      _.utils.$toast('目前无文案')
    }
  },

  }
})