// pages/batteryHeath/batteryHeath.js
const config = require('../../config/index.js')
const {
  api,
  mapApi,
  imgName,
  getUserInfo,
  wxLogin,
  alertTip,
  toastTip,
  confirmTip,
  authAgainByUser,
  userLocation,
  getRgbColor,
  getPx,
  wxscan
} = require('../../lib/util.js')
const moment = require('../../lib/moment.js')
let cmd = null
let app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    vos: [
      [{
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }],
      [{
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
        }],
      [{
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
        }],
      [{
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        msg:true,
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }]
    ],
    tms: [
      [{
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }],
      [{
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }],
      [{
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }],
      [{
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        msg: true,
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }, {
        index: '01',
        vo: '3.544'
      }]
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  drawProgressbg: function() {
    // 使用 wx.createContext 获取绘图上下文 context
    var ctx = wx.createCanvasContext('canvasProgressbg', this)
    ctx.setLineWidth(getPx(10)); // 设置圆环的宽度
    ctx.setStrokeStyle('#333333'); // 设置圆环的颜色
    ctx.setLineCap('round') // 设置圆环端点的形状
    ctx.beginPath(); //开始一个新的路径
    ctx.arc(getPx(83), getPx(83), getPx(78), 0.75 * Math.PI, 2.25 * Math.PI, false);
    //设置一个原点(110,110)，半径为100的圆的路径到当前路径
    ctx.stroke(); //对当前路径进行描边
    ctx.draw(true);
  },
  getCircularGradient(x, y, ctx) {
    const grd = ctx.createCircularGradient(getPx(x), getPx(y), getPx(10))
    grd.addColorStop(0, '#ffffff')
    grd.addColorStop(0.5, '#0089f8')
    grd.addColorStop(1, '#171b1f')
    return grd
  },
  drawCircle: function(step = 100) {
    var context = wx.createCanvasContext('canvasProgress', this);
    // 设置渐变
    var gradient = context.createLinearGradient(getPx(0), 0, getPx(166), 0);
    gradient.addColorStop("0", "#0089f8");
    gradient.addColorStop("1.0", "#6bcaff");

    context.setLineWidth(getPx(10));
    context.setStrokeStyle(gradient);
    context.setLineCap('round')
    context.beginPath();
    // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
    context.arc(getPx(83), getPx(83), getPx(78), 0.75 * Math.PI, (0.75 + (step / 100) * 1.5) * Math.PI, false);
    context.stroke();
    context.draw()
  },
  onReady: function() {
    this.drawProgressbg();
    this.drawCircle(40);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})