var width = 0
var height = 0
var ctx
var buttonClicked = true
var _request = require('../../../utils/request.js')
var _handle = require('../../../utils/handle.js')
var WxParse = require('../../../utils/wxParse/wxParse.js')
var util = require('../../../utils/accounting.min.js')
var fomldsJSON = ''
Page({
  posterImage: {},
  posterLoading: 0,
  canvasLoading: false,
  qcodeError: false,
  data: {
   indicatorDots: false,
   autoplay: false,
   interval: 5000,
   duration: 1000,
   circular: false,
   imgUrls: [
    // 'http://fohow-test.oss-cn-shenzhen.aliyuncs.com/ad_item/8b472c80.jpg',
    // 'http://fohow-test.oss-cn-shenzhen.aliyuncs.com/ad_item/7ab455d0.jpg',
    // 'http://fohow-test.oss-cn-shenzhen.aliyuncs.com/ad_item/70eabcc0.jpg'
   ],
   imgindex: 1,
   currentTab: 0,
   project: null,
   percent: '0',
   step: '0',
   personList: [],
   page: 1,
   per_page: 10,
   InvestWayList: {},
   day: '00',
   hour: '00',
   min: '00',
   second: '00',
   timer: '',
   ctime: '0',
   btn: true,
   animationData: {},
   showDialog: false,
   showModalDialog: false,
   bindTel: false,
   itemindex: 0,
   InvestWayList1:[],
   changenum: 0,
   count: 1,
   count1: '',
  //  hidden: false,
   title: '',
   ctime: '',
   progress: 0,
   progress1: 0,
   bgcolor: '#eee',
   cashTotal: 0,
   posterPopup: false,
   productOid: '',
   posterImage: null,
   popup: false,
   Inid: ''
  },
  onLoad: function (options) {
    this.getIphoneX()
    var info = wx.getSystemInfoSync()
    width = info.windowWidth
    height = info.windowHeight
    this.data.projectId = options.id
    this.getProjectDetail()
    this.getPersonList()
    this.getInvestWayList()
    this.check()
    this.showprogress()
    this.getCashTotal()
  },
  onShow: function () {
  },
  onReady: function () {
  },
  dpi: function (val) {
    return val
  },
  onSlideChangeEnd: function(e) {
    var that = this;
    that.setData({
      imgindex: e.detail.current + 1
    })
  },
  check () {
    var that = this
    var url = 'v1/user/check'
    var params = {
    }
    var success = function (res) {
      if (res.data.user_id > 0) {
        that.setData({
          bindTel: true
        })
      }
    }
    _request.$get(url, params, success)
  },
  drawProgressbg () {
    // 使用 wx.createContext 获取绘图上下文 context
    var ctx = wx.createCanvasContext('canvasProgressbg')
    ctx.setLineWidth(this.dpi(10));// 设置圆环的宽度
    ctx.setStrokeStyle('#eeeeee'); // 设置圆环的颜色
    ctx.setLineCap('butt') // 设置圆环端点的形状
    ctx.beginPath();//开始一个新的路径
    ctx.arc(this.dpi(55), this.dpi(38), this.dpi(28), this.dpi(0), 2 * Math.PI, false);
    //设置一个原点(100,100)，半径为90的圆的路径到当前路径
    ctx.stroke();//对当前路径进行描边
    ctx.draw();
  },
  drawCircle: function (step){  
   var context = wx.createCanvasContext('canvasProgress');
     // 设置渐变
     var gradient = context.createLinearGradient(this.dpi(200), this.dpi(100), this.dpi(100), this.dpi(100));
     gradient.addColorStop("0", "#ffc06c");
     gradient.addColorStop("0.5", "#ff9e61");
     gradient.addColorStop("1.0", "#ff7655");
     
     context.setLineWidth(this.dpi(10));
     context.setStrokeStyle(gradient);
     context.setLineCap('butt')
     context.beginPath(); 
     // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
     context.arc(this.dpi(55), this.dpi(38), this.dpi(28), -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
     context.stroke(); 
     context.draw() 
   },
   swichNav:function(e){
    var cur=e.target.dataset.current;
    if (this.data.currentTaB==cur) {
      return false;
    }
    else {
      this.setData({
        currentTab:cur
      })
    }
  },
  getProjectDetail () {
    var that = this
    var url = "v1/project/" + that.data.projectId
    var params = {}
    var success = function (val) {
      var p = val.data.detail
      var f = val.data.finance_plan
      var countArr = []
      var percent = val.data.current_funding / val.data.min_funding * 100
      var percent1 = (percent).toFixed(2)
      var step = val.data.current_funding / val.data.min_funding * 2
      for (var index in val.data.pics) {
        var imgs = val.data.pics[index].img
        countArr.push(imgs)
      }
      that.setData({
        timer: setInterval(function () {
          var t = Date.parse(new Date())
          t = t / 1000;
          var ctime = val.data.stop_time - t
          var day = parseInt(ctime / 86400)
          var hour = parseInt(ctime / 3600) - day *24
          var min = parseInt(ctime / 60 ) - parseInt(ctime / 3600) * 60
          var second = parseInt(ctime) - parseInt(ctime / 60 ) * 60
          that.setData({
            day: day,
            hour: hour,
            min: min,
            second: second,
            ctime: ctime
          })
          if (ctime <= 0) {
            clearInterval(that.data.timer);
            that.setData({
              ctime: 0
            })
          }
        },100),
        project: val.data,
        imgUrls: countArr,
        percent: percent1,
        step: step,
      });
      that.showprogress()
      WxParse.wxParse('parse', 'html', p, that, 10)
      // WxParse.wxParse('parse1', 'html', f, that, 10)
      that.projectImageLoading()
      // that.drawProgressbg();
      // that.drawCircle(step)
    }
    _request.$get(url, params, success)
  },
  getPersonList() {
    var that = this
    var url = 'v1/project/' + that.data.projectId + '/invests'
    var params = {
      page: that.data.page,
      per_page: that.data.per_page
    }
    var success = function (res) {
      if (res.data.investor_list) {
        var newPersonList = that.data.personList.concat(res.data.investor_list)
        that.setData({
          personList : newPersonList,
          page: that.data.page + 1,
          per_page: that.data.per_page
        })
      } else {
        that.setData({
          btn: false
        })
      }
    }
    _request.$get(url, params, success)
  },
  getInvestWayList() {
    var that = this
    var url = 'v1/project/' + that.data.projectId + '/invest_ways'
    var params = {
    }
    var success = function (res) {
      if (res.data.invest_way.length > 0) {
        var left = res.data.invest_way[that.data.itemindex].left_copies
        var min = res.data.invest_way[that.data.itemindex].min_limit
        var owned = res.data.invest_way[that.data.itemindex].owned_copies
        var gap = res.data.invest_way[that.data.itemindex].gap_limit
        var Inid = res.data.invest_way[that.data.itemindex].id
        if (left > min || left == min) {
          if (owned > min || owned == min) {
            if (gap > left) {
              that.setData({
                count: left
              })
            } else {
              that.setData({
                count: gap
              })
            }
          } else {
            that.setData({
              count: min
            })
          }
        } else {
          if (owned > min || owned == min) {
            if (gap > left) {
              that.setData({
                count: left
              })
            } else {
              that.setData({
                count: gap
              })
            }
          } else {
            that.setData({
              count: left
            })
          }
        }
        that.setData({
          InvestWayList : res.data,
          InvestWayList1 : res.data.invest_way,
          // title: res.data.invest_way[that.data.itemindex].title,
          price: res.data.invest_way[that.data.itemindex].price,
          count1: min,
          Inid: Inid
        })
        var itemindex = that.data.itemindex
        var g = that.data.InvestWayList1[itemindex].desc
        WxParse.wxParse('parse2', 'html', g, that, 10)
        }
      }
    _request.$get(url, params, success)
  },
  // 显示弹框
  showModal: function () {
    var animation = wx.createAnimation({
      duration: 300,
      timingFunction: "ease-out"
    })
    this.animation = animation
    animation.translateY(500).step()
    this.setData({
      animationData: animation.export(),
      showDialog: true
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 300)
  },
  // 隐藏弹框
  hideModal: function () {
    var animation = wx.createAnimation({
      duration: 300,
      timingFunction: "ease-out"
    })
    this.animation = animation
    animation.translateY(500).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showDialog: false
      })
    }.bind(this), 300)
  },
  toPay: function (e) {
    _handle.setFormId(e)
    if (this.data.bindTel) {
      var that = this
      // that.buttonClicked()
      that.data.showDialog = !that.data.showDialog
      if (that.data.showDialog) {
          that.showModal()
      } else {
          that.hideModal()
      }
    } else {
      wx.navigateTo({
        url: '/packageUser/pages/user/bind/bind'
      })
    }
  },
  closePay: function () {
    this.hideModal()
  },
  changeCount: function(e) {
    var that = this
    var itemindex = e.target.dataset.item;
    var left = that.data.InvestWayList1[itemindex].left_copies
    var min = that.data.InvestWayList1[itemindex].min_limit
    var owned = that.data.InvestWayList1[itemindex].owned_copies
    var gap = that.data.InvestWayList1[itemindex].gap_limit
    var Inid = that.data.InvestWayList1[itemindex].id
    if (left > min || left == min) {
      if (owned > min || owned == min) {
        if (gap > left) {
          that.setData({
            count: left
          })
        } else {
          that.setData({
            count: gap
          })
        }
      } else {
        that.setData({
          count: min
        })
      }
    } else {
      if (owned > min || owned == min) {
        if (gap > left) {
          that.setData({
            count: left
          })
        } else {
          that.setData({
            count: gap
          })
        }
      } else {
        that.setData({
          count: left
        })
      }
    }
    that.setData({
      itemindex: itemindex,
      changenum: itemindex,
      // title: that.data.InvestWayList1[itemindex].title,
      price: that.data.InvestWayList1[itemindex].price,
      count1: min,
      Inid: Inid
    })
    var g = that.data.InvestWayList1[itemindex].desc
    WxParse.wxParse('parse2', 'html', g, that, 10)
  },
  add: function () {
    var left = this.data.InvestWayList1[this.data.itemindex].left_copies
    var min = this.data.InvestWayList1[this.data.itemindex].min_limit
    var owned = this.data.InvestWayList1[this.data.itemindex].owned_copies
    var gap = this.data.InvestWayList1[this.data.itemindex].gap_limit
    var max = this.data.InvestWayList1[this.data.itemindex].max_limit
    var count = this.data.count
    if (left > min) {
      if (owned > min || owned == min) {
        if (gap > left) {
          this.setData({
            count: left
          })
        } else {
          this.setData({
            count: count + gap
          })
        }
      } else {
        if (gap > left) {
          this.setData({
            count: left
          })
        } else {
          this.setData({
            count: count + gap 
          })
        }
      }
    } else {
      this.setData({
        count: left
      })
    }
  },
  mius: function () {
    var left = this.data.InvestWayList1[this.data.itemindex].left_copies
    var min = this.data.InvestWayList1[this.data.itemindex].min_limit
    var owned = this.data.InvestWayList1[this.data.itemindex].owned_copies
    var gap = this.data.InvestWayList1[this.data.itemindex].gap_limit
    var count = this.data.count
    if (left > min) {
      if (owned > min || owned == min) {
        if (gap > left) {
          this.setData({
            count: left
          })
        } else {
          if (count - gap < 0 || count - gap == 0) {
            this.setData({
              count: count
            })
          } else {
            this.setData({
              count: count - gap
            })
          }
        }
      } else {
        if (gap > left) {
          this.setData({
            count: left
          })
        } else {
          if (count - gap < 0 || count - gap == 0) {
            this.setData({
              count: count
            })
          } else {
            this.setData({
              count: count - gap
            })
          }
        }
      }
    } else {
      this.setData({
        count: left
      })
    }
  },
  changeSum: function(val) {
    var count = val.detail.value
    if (count <= 0 ) {
      this.setData({
        count: 1
      })
    } else {
      this.setData({
        count: count
      })
    }
  },
  pay: function(e) {
     _handle.setFormId(e)
    if (buttonClicked) {
      buttonClicked = false
      var that = this
      var url = "v1/project/" + that.data.projectId + "/invest/" + that.data.count
      var params = {
        invest_way_id: that.data.InvestWayList1[that.data.itemindex].id
      }
      var success = function (res) {
        that.data.productOid = res.data.order_id
        that.topay1(res)
        buttonClicked = true
      }
      var fail = function () {
        buttonClicked = true
      }
      _request.$post(url, params, success, fail)
    }
  },
  topay1 () {
    var that = this
    var price = that.data.count * that.data.InvestWayList1[that.data.itemindex].price
    if (that.data.cashTotal >= price) {
      // wx.showModal({
      //   title: '提示',
      //   content: '是否使用余额支付？',
      //   confirmText: '是',
      //   cancelText: '微信支付',
      //   success: function(res) {
      //     if (res.confirm) {
      //       that.toBalancePay(value.data.order_id)
      //     } else if (res.cancel) {
      //       that.toWeixinPay(value.data.order_id)
      //     }
      //   }
      // })
      that.setData({
        showModalDialog: true
      })
    } else {
      that.toWeixinPay()
    }
  },
  closeModalDialog () {
    var that = this
    that.data.showModalDialog = false
    that.setData({
      showModalDialog: false
    })
  },
  toWeixinPay () {
    var that = this
    var url = 'v1/pay'
    var pay_way = 'weixinpay'
    var params = {
      order_id: that.data.productOid,
      pay_way: pay_way
    }
    var success = function (val) {
      wx.requestPayment({
        'timeStamp': val.data.pay_data.timeStamp,
        'nonceStr': val.data.pay_data.nonceStr,
        'package': val.data.pay_data.package,
        'signType': val.data.pay_data.signType,
        'paySign': val.data.pay_data.paySign,
        'success':function(res){
          wx.showToast({
            title: '支付成功',
            icon: 'success',
            duration: 1000
          })
          that.closeModalDialog()
          // wx.navigateTo({
          //   url:  that.data.path + '?orderId=' + that.data.orderId
          //   url:  '/packageUser/pages/user/farm/farm'
          // })
          wx.redirectTo({
            url:  '/pages/helpfarm/helpfarm-success/helpfarm-success?id=' + that.data.Inid
          })
        },
        'fail':function(res){
        },
        'complete': function () {
          buttonClicked = true
        }
      })
    }
    _request.$post(url, params, success)
  },
  toBalancePay () {
    var that = this 
    var url = 'v1/pay'
    var pay_way = 'cashbalance'
    var params = {
      order_id: that.data.productOid,
      pay_way: pay_way
    }
    var success = function (val) {
      that.closeModalDialog()
      buttonClicked = true
      wx.showToast({
        title: '支付成功',
        icon: 'success',
        duration: 1000
      })
      if (val) {
        wx.redirectTo({
          // url:  that.data.path + '?orderId=' + that.data.orderId
          // url:  '/packageUser/pages/user/farm/farm'
          url:  '/pages/helpfarm/helpfarm-success/helpfarm-success?id=' + that.data.Inid
        })
      }
    }
    _request.$post(url, params, success)
  },
  // buttonClicked () {
  //   var that = this
  //   that.setData({
  //     buttonClicked: true
  //   })
  //   setTimeout(function () {
  //     that.setData({
  //       buttonClicked: false
  //     })
  //   }, 500)
  // },
  onShareAppMessage: function (val) {
    return _request.share({
      title: this.data.project.share_title,
      path: '/pages/start/start?url=pages/helpfarm/helpfarm-detail/helpfarm-detail&id=' + this.data.projectId,
      imageUrl: '',
      sc: 'xcx_helpfarmproject',
      ri: this.data.projectId,
      rp: this.data.projectId
    })
  },
  showprogress() {
    var that = this
    var percent  = that.data.percent
    if (percent <= 50) {
      that.setData({
        progress: percent * 3.6
      })
    } else if (percent > 100) {
      percent = 100
      that.setData({
        bgcolor: '#ff7655',
        progress: 0,
        progress1: (percent-50)*3.6
      })
    } else {
      that.setData({
        bgcolor: '#ff7655',
        progress: 0,
        progress1: (percent-50)*3.6
      })
    }
  },
  toCount () {
    let price = this.data.count * this.data.InvestWayList.invest_way[this.data.itemindex].price
    let count = this.data.count
    let sell = this.data.InvestWayList.invest_way[this.data.itemindex].product.user_sale_price
    let min = this.data.InvestWayList.invest_way[this.data.itemindex].self_use_min
    let retrieve = this.data.InvestWayList.invest_way[this.data.itemindex].harvest_rate / 100
    let limit = this.data.InvestWayList.invest_way[this.data.itemindex].gap_limit
    let remax = this.data.InvestWayList.invest_way[this.data.itemindex].buy_back_max_limit
    let reprice = this.data.InvestWayList.invest_way[this.data.itemindex].buy_back_price
    let minlimit = this.data.InvestWayList.invest_way[this.data.itemindex].min_limit
    wx.navigateTo({
      url:  '/pages/helpfarm/count/count?price=' + price + '&count=' + count + '&sell=' + sell + '&min=' + min + '&retrieve=' + retrieve + '&limit=' + limit + '&remax=' + remax + '&minlimit=' + minlimit + '&reprice=' + reprice
    })
  },
  getIphoneX () {
    var that = this
    wx.getSystemInfo({
      success: function (res) {
        if (res.model.toLowerCase().indexOf('iphone x') > -1) {
          that.setData({
            value: 34
          })
        }
      }
    })
  },
  getCashTotal () {
    var that = this
    var url = 'v1/user/cash/balance/info'
    var params = {
    }
    var success = function (res) {
      that.data.cashTotal = res.data.available
      that.setData({
        cashTotal: res.data.available
      })
    }
    _request.$get(url, params, success)
  },
  projectImageLoading () {
    var that = this
    wx.getImageInfo({
      src: 'https://cfohow.hiwavo.com/xcx/poster5.jpg',
      success: function (res) {
        that.posterImage.bg = res
        that.posterLoading++
        if (that.posterLoading === 4) {
          that.createCtx()
        }
      }
    })
    if (this.data.imgUrls.length > 0) {
      wx.getImageInfo({
        src: this.data.imgUrls[0],
        success: function (res) {
          that.posterImage.project = res
          that.posterLoading++
          if (that.posterLoading === 4) {
            that.createCtx()
          }
        }
      })
    }
    var url = 'v1/poster/' + this.data.projectId
    var params = {
      type: 'poster'
    }
    var success = function (res) {
      wx.getImageInfo({
        src: res.data.qrcode_url,
        success: function (res) {
          that.posterImage.qcode = res
          that.posterLoading++
          if (that.posterLoading === 4) {
            that.createCtx()
          }
        },
        fail: function (res) {
          that.qcodeError = true
          if (that.data.posterPopup) {
            that.setData({
              posterPopup: false
            })
            wx.showToast({
              title: '海报生成失败，请稍后重试',
              icon: 'none',
              duration: 2000
            })
            wx.hideLoading()
          }
        }
      })
      wx.getImageInfo({
        src: res.data.wx_head,
        success: function (res) {
          that.posterImage.head = res
          that.posterLoading++
          if (that.posterLoading === 4) {
            that.createCtx()
          }
        }
      })
    }
    _request.$get(url, params, success)
  },
  createPoster () {
    if (!this.qcodeError) {
      if (!this.canvasLoading) {
        wx.showLoading({
          mask: true,
          title: ''
        })
      }
      this.setData({
        posterPopup: true
      })
    } else {
      wx.showToast({
        title: '海报生成失败，请稍后重试',
        icon: 'none',
        duration: 2000
      })
    }
  },
  posterClose () {
    this.setData({
      posterPopup: false
    })
  },
  createCtx () {
    var that = this
    ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage(this.posterImage.bg.path, 0, 0, this.dpi(this.posterImage.bg.width), this.dpi(this.posterImage.bg.height))
    ctx.drawImage(this.posterImage.qcode.path, this.dpi(501), this.dpi(1140), this.dpi(180), this.dpi(180))
    ctx.save()
      ctx.translate(this.dpi(44),this.dpi(129))
      ctx.save()
      ctx.arc(this.dpi(60), this.dpi(59), this.dpi(40), 0, Math.PI * 2, false)
      ctx.lineWidth = 1
      ctx.strokeStyle = '#d4d4d4'
      ctx.stroke()
      ctx.clip()
      ctx.drawImage(this.posterImage.head.path, this.dpi(21), this.dpi(20), this.dpi(78), this.dpi(78))
      ctx.restore()
      ctx.save()
      ctx.textBaseline = 'middle'
      ctx.font = this.dpi(24) + 'px Arial'
      ctx.fillStyle = '#eab86a'
      ctx.fillText('以农民最有尊严的方式扶贫，我为FOHOW玖玖助力。', this.dpi(136), this.dpi(59))
      ctx.restore()
      ctx.drawImage(this.posterImage.project.path, this.dpi(0), this.dpi(120), this.dpi(662), this.dpi(353))
      ctx.save()
      ctx.translate(this.dpi(434), this.dpi(485))
      ctx.textAlign="center"
      ctx.fillStyle = '#eab86a'
      ctx.font = 'bold ' + this.dpi(24) + 'px Arial'
      ctx.fillText(this.data.percent + '%', this.dpi(90), this.dpi(100))
      ctx.fillStyle = '#ffab34'
      ctx.font = this.dpi(24) + 'px Arial'
      ctx.fillText('完成度', this.dpi(90), this.dpi(195))
      this.drawArc()
      ctx.restore()
      ctx.beginPath()
      ctx.moveTo(this.dpi(0), this.dpi(119))
      ctx.lineTo(this.dpi(662), this.dpi(119))
      ctx.lineWidth = 1
      ctx.strokeStyle = '#eab86a'
      ctx.stroke()
      ctx.closePath()
      ctx.textBaseline = 'middle'
      ctx.font = this.dpi(28) + 'px Arial'
      ctx.fillStyle = '#bbbbbb'
      ctx.fillText('团购单价', this.dpi(64), this.dpi(540))
      ctx.fillStyle = '#eab86a'
      ctx.font = 'bold ' + this.dpi(48) + 'px Arial'
      ctx.fillText('￥', this.dpi(63), this.dpi(624))
      ctx.font = 'bold ' + this.dpi(72) + 'px Arial'
      ctx.fillText(util.formatMoney(this.data.project.min_project_way_price / 100, '', 2), this.dpi(110), this.dpi(624))
      ctx.translate(this.dpi(20),this.dpi(705))
      this.roundRect(this.dpi(0), this.dpi(0), this.dpi(622), this.dpi(140), this.dpi(6), '#f3f3f3')
      ctx.font = this.dpi(32) + 'px Arial'
      ctx.fillStyle = '#2b2b2b'
      this.textAutoLine(this.data.project.share_title, this.dpi(40), this.dpi(50), this.dpi(40))
    ctx.restore()
    ctx.draw(true, function callback () {
      that.createImage()
    }) 
  },
  createImage () {
    var that = this
    wx.canvasToTempFilePath({
      destWidth: 750,
      destHeight: 1334,
      canvasId: 'myCanvas',
      fileType: 'jpg',
      success: function (res) {
        console.log(res)
        that.setData({
          posterImage: res.tempFilePath
        })
        that.canvasLoading = true
        wx.hideLoading()
      }
    })
  },
  saveImage () {
    var that = this
    wx.showLoading({
      mask: true,
      title: ''
    })
    wx.saveImageToPhotosAlbum({
      filePath: this.data.posterImage,
      success (res) {
        wx.showToast({
          title: '已保存相册',
          icon: 'success',
          duration: 2000
        })
      },
      fail (res) {
        wx.getSetting({
          success (res) {
            if (!res.authSetting['scope.writePhotosAlbum']) {
              that.setData({
                popup: true
              })
            }
          }
        })
        wx.hideLoading()
      }
    })
  },
  setting () {
    this.setData({
      popup: false
    })
  },
  roundRect (x, y, w, h, r, color) {
    ctx.beginPath()
    ctx.moveTo(x+r, y)
    ctx.arcTo(x+w, y, x+w, y+h, r)
    ctx.arcTo(x+w, y+h, x, y+h, r)
    ctx.arcTo(x, y+h, x, y, r)
    ctx.arcTo(x, y, x+w, y, r)
    ctx.closePath()
    ctx.fillStyle = color
    ctx.fill()
  },
  textAutoLine (str, initX, initY, lineHeight) {
    let lineWidth = 0
    let textWidth = this.dpi(600)
    let lastSubStrIndex= 0
    for (let i = 0; i < str.length; i++) {
      lineWidth += ctx.measureText(str[i]).width
      if (lineWidth > textWidth - initX) {
        ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY)
        initY += lineHeight
        lineWidth = 0
        lastSubStrIndex = i
      }
      if (i === str.length - 1) {
        ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY)
      }
    }
  },
  drawArc () {
    var rad = Math.PI * 2 / 100
    var arc = this.dpi(90)
    var lineHeight = this.dpi(30)
    var radius = arc - lineHeight
    ctx.save()
    ctx.beginPath()
    ctx.lineWidth = lineHeight
    ctx.lineCap = 'round'
    ctx.strokeStyle = '#eeeeee'
    ctx.arc(arc, arc, radius, 0, Math.PI * 2, false)
    ctx.stroke()
    ctx.closePath()
    ctx.restore()
    ctx.save()
    ctx.strokeStyle = '#ff7655'
    ctx.lineWidth = lineHeight
    ctx.beginPath()
    ctx.arc(arc, arc, radius , -Math.PI/2, -Math.PI/2 + this.data.percent * rad, false)
    ctx.stroke()
    ctx.closePath()
    ctx.restore()
  },
  stopPageScroll () {
    return
  }
})