// pages/member/member.js
import * as echarts from '../../../../ec-canvas/echarts';
const app = getApp()


function initChart1(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '',
      left: 'center'
    },
    legend: {
      data: ['进人数']
    },
    textStyle: {
      fontSize: 14
    },

    toolbox: {

    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      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: {
        interval: 1,
        fontSize: 13,
      },
      name: '日期',
      nameTextStyle: {
        fontSize: 12
      }
      


    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}'
      },
      min: 10,
      max: 100,
      splitNumber: 10,
      name: '人数',
      nameTextStyle:{
        fontSize: 12 
      }

    },
    series: [{
        name: '进人数',
        type: 'line',
        smooth: true,
        color: '#A8ACE8',
        data: [41, 87, 35, 23, 42, 33, 40, 30, 50, 80],
        markPoint: {
          data: [{
              type: 'max',
              name: '最大值'
            },
            {
              type: 'min',
              name: '最小值'
            }
          ]
        },
        markLine: {
          data: [{
            type: 'average',
            name: '平均值'
          }]
        },
        // areaStyle: {
        //   // normal: {
        //   //   color: '#F8E9DD' //改变区域颜色
        //   // }
        // },
      },

    ]
  };

  chart.setOption(option);
  return chart;
}

Page({

  onShareAppMessage: function(res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '',
      success: function() {},
      fail: function() {}
    }
  },

  /**
   * 页面的初始数据
   */
  data: {
    state: 1,
    timestate: 1,
    ec1: {

      onInit: initChart1,




    },
    statedate: '',
    showdate: "",
    watertime: '',
    timesel: 1,
    timearr: [


    ],
    date: '',
    datePickerValue: ['', '', ''],
    datePickerIsShow: false,
    datechu:false,
    currentdate:true,
    //开始日期
    startdate:'',
    //结束日期
    enddate:'',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.setData({
      statedate: app.monthnowDate(),
      watertime: app.newnowDate() + '-' + app.endate(),
      startdate: app.newnowDate(),
      enddate: app.endate()
    })

    console.log(this.data.statedate)
    let newdate = this.data.statedate.split("-");
    this.setData({
      showdate: newdate[0] + '年' + newdate[1] + '月'
    })

  },

  showDatePicker: function(e) {
    // this.data.datePicker.show(this);
    this.setData({
      datePickerIsShow: true,
    });
  },

  datePickerOnSureClick: function(e) {
    console.log('datePickerOnSureClick');

    if (this.data.timesel==1){
      console.log(e);
      this.setData({
        date: `${e.detail.value[0]}年${e.detail.value[1]}月${e.detail.value[2]}日`,
        datePickerValue: e.detail.value,
        datePickerIsShow: false,
        currentdate: false,
        state: 2,
       startdate:e.detail.value[0]+'.'+e.detail.value[1]+"."+e.detail.value[2]
      });
    }else{
      console.log(e);
      this.setData({
        date: `${e.detail.value[0]}年${e.detail.value[1]}月${e.detail.value[2]}日`,
        datePickerValue: e.detail.value,
        datePickerIsShow: false,
        currentdate: false,
        state: 2,
        enddate: e.detail.value[0] + '.' + e.detail.value[1] + "." + e.detail.value[2]
      });
    }
    
  },

  datePickerOnCancelClick: function(event) {
    console.log('datePickerOnCancelClick');
    console.log(event);
    this.setData({
      datePickerIsShow: false,
     
      currentdate: false,
      state:2
    });
  },
  changedate(e) {
    console.log(e)
  },
  // 选择设备切换
  selectshebei(e){
    this.setData({
      state:e.currentTarget.dataset.id
    })
  },  

  // 显示日期
  datexianshi(){
    this.setData({
      datechu:true,
      currentdate:true
    })

    //获取年
    var date = new Date();
    var obj = {}
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    if (month < 10) {
      month = '0' + month
    }

    var day = date.getDate();
    if (day < 10) {
      day = "0" + day
    }
    console.log()
    if (typeof (day) == 'number') {
      day = day.toString()
    }
    console.log(typeof (day))
    this.setData({
      datePickerValue: [year, month, day],
    })

  },


  // 选择时间和摄像头切换
  seltime(e) {
    this.setData({
      timestate: e.currentTarget.dataset.id
    })
  },

  //开始时间和结束时间切换
  xuanshijan(e) {
    this.setData({
      timesel: e.currentTarget.dataset.time,
      currentdate:true
    })

    this.datexianshi()
  },
  // 选择日期
  bindstateDateChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      statedate: e.detail.value
    })
    let newdate = this.data.statedate.split("-");
    this.setData({
      showdate: newdate[0] + '年' + newdate[1] + '月'
    })
  },

  //确定选择开始日期和结束日期
  qudingxuandate(){
    this.setData({
      datechu:false,
      watertime: this.data.startdate+'-'+this.data.enddate
    })
  },
    /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

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

   
    

   
  },

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

  },

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

  },

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

  },

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

  },

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

  }
})