// pages/qiyeyongdian/detail/detail.js

import * as echarts from '../../../ec-canvas/echarts';

const app = getApp();
var Chart = null;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    showModal: false,
    monthList: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    time:'2019.01.01-2019.01.31',
    changeColor: -1,
    ec: {

      onInit: function(canvas, width, height) {

        chart = echarts.init(canvas, null, {

          width: width,

          height: height

        });

        canvas.setChart(chart);

        return chart;

      },

      lazyLoad: true, // 延迟加载
      showt:false
    },

  },
  choice(e) {
    let index = e.currentTarget.dataset.id;
    index=index+1
    if(index==1||index==3||index==5||index==7||index==8||index==10||index==12){
      if(index<10){
        this.setData({
          time: "（" + "2019." + "0" + index + ".01" + "-2019." +'0'+ index + ".31" + "）"
        })
      }else{
        this.setData({
          time: "（" + "2019." + index + ".01" + "-2019." + index + ".31" + "）"
        })
      }
     
    }else{
      if(index<10){
        this.setData({
          time: "（" + "2019." + "0" + index + ".01" + "-2019." + '0' + index + ".30" + "）"
        })
      }else{
        this.setData({
          time: "（" + "2019." + index + ".01" + "-2019." +  index + ".30" + "）"
        })
      }
     
    }
    this.setData({
      changeColor: index-1
    })
  },
  three(){
    this.setData({
      time:'近30天',
      showt: !this.data.showt
    })
  },
  toShowModal(e) {
    this.setData({
      showModal: true

    })
  },

  hideModal() {
    this.setData({
      showModal: false
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

    this.echartsComponnet = this.selectComponent('#mychart');

    //如果是第一次绘制

    if (!Chart) {

      this.init_echarts(); //初始化图表

    } else {

      this.setOption(Chart); //更新数据

    }

  },
  //初始化图表

  init_echarts: function() {

    this.echartsComponnet.init((canvas, width, height) => {

      // 初始化图表

      const Chart = echarts.init(canvas, null, {

        width: width,

        height: height

      });

      this.setOption(Chart)

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等

      return Chart;

    });

  },

  setOption: function(Chart) {

    Chart.clear(); // 清除

    Chart.setOption(this.getOption()); //获取新数据

  },

  // 图表配置项

  getOption() {

    var self = this;

    var option = {

      color: ["#FFF"], //图例图标颜色
      // lineStyle:{//阴影
      //   shadowColor: '#6495F8',
      //   shadowBlur: 10
      // },
      xAxis: { //横坐标

        type: 'category',

        name: '日期', //横坐标名称

        nameTextStyle: { //在name值存在下，设置name的样式

          color: '#333',

          fontStyle: 'normal'

        },
        axisLabel: {
          interval: 0,
        },
        boundaryGap: false, //1.true 数据点在2个刻度直接  2.fals 数据点在分割线上，即刻度值上

        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30','31'],

        axisLabel: {
          
          textStyle: {

            fontSize: 13,

            color: '#5D5D5D'

          }

        }

      },

      yAxis: { //纵坐标

        type: 'value',

        position: 'left',

        name: '千瓦时', //纵坐标名称

        nameTextStyle: { //在name值存在下，设置name的样式

          color: '#333333',

          fontStyle: 'normal'

        },

        splitNumber: 5, //坐标轴的分割段数


        min: 0,

        max: 500,

      },

      series: [{

        type: 'line',

        data: [100, 120, 123, 142, 231, 231, 123, 341, 234, 432, 100, 120, 123, 142, 231, 231, 123, 341, 234, 432, 100, 120, 123, 142, 231, 231, 123, 341, 234, 432,253],

        symbol: 'true',

        itemStyle: {

          normal: {

            lineStyle: {

              color: '#6495F8'

            }

          }

        },
        // areaStyle: {
        //   normal: {
        //     color: '#6495F8' //改变区域颜色
        //   }
        // },

      }],

    }

    return option;

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})