// package/subSystem/dayPatrolInfo/dayPatrolInfo.js
import * as echarts from '../../components/ec-canvas/echarts';

const setPieOptions = ((chart, data) => {
  const option = {
    grid: {
      top: '0%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: 'bottom',
    },
    series: [
      {
        type: 'pie',
        radius: ['30%', '55%'],
        // avoidLabelOverlap: false,
        emphasis: {
          label: {
            show: true,
            fontWeight: 'bold'
          }
        },
        data: data
      }
    ]
  };
  chart.setOption(option);
})

Page({

  /**
   * 页面的初始数据
   */
  data: {
    needEc: { lazyLoad: true },
    alreadyEc: { lazyLoad: true },
  },

  // 今日待检分布图表
  initNeedChart: function (data) {
    this.needEcComponent.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      setPieOptions(chart, data)
      return chart;
    });
  },

   // 今日已检分布图表
   initAlreadyChart: function (data) {
    this.alreadyEcComponent.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      setPieOptions(chart, data)
      return chart;
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.setNavigationBarTitle({ title: options.day })
    setTimeout(() => {
      this.initNeedChart([
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 580, name: 'Email2' },
        { value: 580, name: 'Email3' },
      ])
      this.initAlreadyChart([
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 580, name: 'Email2' },
        { value: 580, name: 'Email3' },
      ])
    }, 1000)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.needEcComponent = this.selectComponent('#need-chart-dom');
    this.alreadyEcComponent = this.selectComponent('#already-chart-dom');
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})