const wxCharts = require('../../../utils/wxcharts.js');
const data = require('../../../utils/util.js');
const app = getApp()
let ringChart = null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    startDate: '2019-10-29',
    endDate: '2019-10-29',
    scopeIndex: 0,
    scopeArray: ['机械工程学院', '电子计算机系', '文学系'],
    weiguiList: [{
      name: '刘天仙',
      build: '1号楼',
      room: '1101',
      num: '1',
      time: ''
    }, {
      name: '陈方明',
      build: '3号楼',
      room: '1101',
      num: '1',
      time: ''
    }, {
      name: '刘天仙',
      build: '1号楼',
      room: '1101',
      num: '1',
      time: ''
    }, {
      name: '陈方明',
      build: '3号楼',
      room: '1101',
      num: '1',
      time: ''
    }]
  },

  bindStartDateChange: function(e) {
    this.setData({
      startDate: e.detail.value
    })
  },

  bindendDateChange: function(e) {
    this.setData({
      endDate: e.detail.value
    })
  },

  bindScopeChange: function(e) {
    this.setData({
      scopeIndex: e.detail.value
    })
  },

  getChart: function(e) {
    ringChart = new wxCharts({
      animation: true,
      canvasId: 'ringCanvas',
      type: 'ring',
      extra: {
        ringWidth: 10,
        pie: {
          offsetAngle: -40
        }
      },
      title: {
        name: '归勤率',
        color: '#333',
        fontSize: 15
      },
      subtitle: {
        name: '98%',
        color: '#6282f4',
        fontSize: 18
      },
      series: [{
        name: '归勤',
        data: 90,
        stroke: false,
        color: '#6282f4'
      }, {
        name: '缺勤',
        data: 10,
        stroke: false,
        color: '#ed5c68'
      }],
      disablePieStroke: true,
      width: 160,
      height: 160,
      dataLabel: false,
      legend: false,
      background: '#fff',
      padding: 0
    });
    ringChart.addEventListener('renderComplete', () => {
      console.log('renderComplete');
    });
    setTimeout(() => {
      ringChart.stopAnimation();
    }, 500);
  },

  touchHandler: function(e) {
    console.log(ringChart.getCurrentDataIndex(e));
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    const that = this;
    that.getChart();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})