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

  /**
   * 页面的初始数据
   */
  data: {
    gprsImei: '',
    bmsVer: '',
    bmsVolt: '',
    bmsCurrent: '',
    bmsState: '',
    bmsCycles: '',
    bmsSoc: '',
    gpsSnr: '',
    gpsLocate: '',
    updateTime: '',
    cellVolt: [
      [
        // {
        //   index: '01',
        //   vo: '3.544'
        // }
      ],
    ],
    bmsTempetrue: [
      [
        // {
        //   index: '01',
        //   vo: '3.544'
        // }
      ],
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.getCarDetail()
    clearInterval(timer)
    setInterval(() => {
      this.getCarDetail()
    }, 4000)
  },

  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() {
    clearInterval(timer)
  },
  getCarDetail() {
    api.get('device/base/deviceDetailNew', {}, true)
      .then(res => {
        let {
          data,
          model: {
            deviceBmsInfo
          }
        } = res
        let carData = {
          ...data,
          ...deviceBmsInfo
        }
        this.setUI2(carData)
      })
      .catch(err => {
        console.error(1, err)
      })

  },
  // 轮询设置
  setUI2(data) {
    console.log(data)
    let {
      gprsImei,
      bmsVer,
      bmsVolt,
      bmsCurrent,
      bmsState,
      bmsCycles,
      bmsSoc,
      gpsSnr,
      gpsLocate,
      cellVolt,
      bmsTempetrue,
      updateTime
    } = data
    if (bmsState == 1) {
      bmsState = '开锁'
    } else {
      bmsState = '关锁'
    }
    cellVolt = JSON.parse(cellVolt)
    bmsTempetrue = JSON.parse(bmsTempetrue)
    if (cellVolt && cellVolt.length) {
      cellVolt = arrTarrs(4,cellVolt.map((elt,i) => {
        return {
          index:i,
          vo:elt
        }
      }))
    } else {
      cellVolt = [
        []
      ]
    }
    if (bmsTempetrue && bmsTempetrue.length) {
      bmsTempetrue = arrTarrs(4, bmsTempetrue.map((elt, i) => {
        return {
          index: i,
          vo: elt
        }
      }))
    } else {
      cellVolt = [
        []
      ]
    }
    this.setData({
      gprsImei,
      bmsVer,
      bmsVolt,
      bmsCurrent,
      bmsState,
      bmsCycles,
      bmsSoc,
      updateTime,
      gpsSnr,
      cellVolt,
      bmsTempetrue,
      batteryDeatil: data
    })
    this.drawCircle(bmsSoc);
  },

})