// dist/pages/myassets/index.js
import MyAssetsService from './myassetsService.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    api: Object,
    data: [],
    summary: {
      totalIncome: '0.00',
      goodsIncome: '0.00',
      compensateIncome: '0.00'
      },
    currentPage:1,
    page:0,
    pagetotal:0,
    total:0,
    isLast:false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let api = new MyAssetsService();
    this.setData({ api: api });
    this.fetchIncomeList();
    
    // this.setData({api: new MyAssetsService()});
  },
  /**
  * 画progress底部背景
  */
  drawProgressbg: function (summary) {
    // let summary = {
    //   totalIncome: '130.98',
    //   goodsIncome: '30.98',
    //   compensateIncome: '100',
    // }
    // this.setData({
    //   summary: summary
    // });
    // 使用 wx.createContext 获取绘图上下文 context
    var ctx = wx.createCanvasContext('canvasProgressbg')
    // 设置圆环的宽度
    ctx.setLineWidth(10);
    // 设置圆环的颜色
    let strokeColor = '#E0E0E0'
    if (summary && summary.totalIncome >= 0) {
      strokeColor = '#65AB85';
    }
    ctx.setStrokeStyle(strokeColor);
    // 设置圆环端点的形状
    ctx.setLineCap('round')
    //开始一个新的路径
    ctx.beginPath();
    //设置一个原点(110,110)，半径为100的圆的路径到当前路径
    console.log("起始点：" + Math.PI)
    ctx.arc(60, 60, 51, 0, 2 * Math.PI, false);
    //对当前路径进行描边
    ctx.stroke();
    //开始绘制
    ctx.draw();
  },

  /**
   * 画progress进度
   */
  drawCircle: function (step) {
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('canvasProgress');
    // 设置圆环的宽度
    context.setLineWidth(10);
    // 设置圆环的颜色
    let strokeColor = '#002B47'
    // if (this.data.summary.totalIncome <= 0){
    //   strokeColor = '#E0E0E0';
    // }
    context.setStrokeStyle(strokeColor);
    // 设置圆环端点的形状
    context.setLineCap('round')
    //开始一个新的路径
    context.beginPath();
    //参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
    context.arc(60, 60, 51, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
    //对当前路径进行描边
    context.stroke();
    //开始绘制
    context.draw()
  },

  /**
   * 开始progress
   */
  startProgress: function (summary) {
    
    // 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
    if (summary && summary.totalIncome > 0) {
      // this.countTimer = setInterval(() => {
        
        // if (this.data.count <= 60) {
          /* 绘制彩色圆环进度条  
          注意此处 传参 step 取值范围是0到2，
          所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2
          */
          this.drawCircle(this.data.summary.goodsIncome / (this.data.summary.totalIncome / 2))
          // if()
          // this.data.count++;
        // }
        // else {
        //   clearInterval(this.countTimer);
        //   this.startProgress();
        // }
      // }, 100)
    }
  },

  fetchIncomeList: function () {
    let that = this;
    let params = {
      page: that.data.currentPage,
      limit: 20,
      // debug: 'XYZ'
    }
    that.data.api.getAssetsList(params, () => {
      wx.hideLoading();
    }).then(data => {
      if(data){
        let detail = data.data;
        let summary = data.summary ? data.summary : {};
        if(detail){
          detail = that.data.data.concat(detail);
        } else {
          detail = that.data.data
        }

        
        let cPage = data.page;
        if (cPage == 1){
          //绘制背景
          that.drawProgressbg(summary);
          //开始progress
          that.startProgress(summary);
        }
        
        let isLast = false;
        // that.setData(data);
        if (that.data.currentPage <= data.pagetotal) {
          cPage = data.page + 1;
        } else {
          isLast = true;
        }
        that.setData({
          data: detail,
          currentPage: cPage,
          isLast: isLast,
          summary: summary
        });
      }
      
      // console.log(data);
    })
  },

  /**
   * 加载更多
   */
  loadMore: function (event) {
    let item = this.data.data;
    console.log(item)
    if (!item.isLast) {
      this.fetchIncomeList();
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})