// pages/mService/pDevicedata/pDevicedata.js
import moment from '../../../utils/moment.min'
import bLoadingStatus from '../../../base/behaviors/bLoadingStatus'
import bLoadingToast from '../../../base/behaviors/bLoadingToast'

const echarts = require("../../../component/ec-canvas/echarts")
const deviceservice = require('../../../service/deviceservice')
const app = getApp()

function setOption(chart, data) {
  var option = {
    // title: {
    //   text: data.total, //主标题文本
    //   subtext: '注册企业', //副标题文本
    // },
    textStyle: {
      color: 'white'
    },
    color: ['white'],
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      name: '时间',
      nameLocation: 'end',
      type: 'time',
      boundaryGap: false,
      nameRotate: 90,
      nameTextStyle: {
        fontSize: 10,
      },
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      name: '浓度\n(mg/m³)',
      nameLocation: 'end',
      position: 'left',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      // show: false
    },
    grid: {
      x: 38,
      y: 40,
      x2: 30,
      y2: 60
    },

    series: [{
      name: '浓度',
      type: 'line',
      smooth: true,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0.5,
          y: 0,
          x2: 0.5,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#28db74' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#dcfeea79' // 100% 处的颜色
          }],
          opacity: 0.1,
          global: false // 缺省为 false
        }
      },
      data: data,
    }]
  };

  chart.setOption(option);
}

Page({
  behaviors: [bLoadingStatus, bLoadingToast],
  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      lazyLoad: true
    },
    //查询日期
    selectDate: '',
    endDay: '',
    //查询时间
    startTime: '',
    endTime: '',
    //监测数据
    dataList: [{
      time: '----',
      value: '--'
    }, ],
    //排口位置
    outfallLocation: undefined,
    //排口所属
    outfallOwner: undefined
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.ecComponent = this.selectComponent('#mychart-dom-line');
    this.initChart()
  },

  initParams() {
    const now = moment()
    const eD = now.format("YYYY-MM-DD")
    this.setData({
      selectDate: eD,
      endDay: eD,
      startTime: '00:00',
      endTime: '23:59'
    })
  },

  initChart: function () {
    var data = []
    this.ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);
      setOption(chart, data);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;
      this.getDeviceData()
      this.initParams()

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

  getDeviceData() {
    this.setData({
      loading: true
    })

    var that = this
    const {
      selectDate,
      startTime,
      endTime
    } = this.data
    let sT = ''
    let eT = ''
    if (selectDate != '') {
      sT = selectDate + ' ' + startTime
      eT = selectDate + ' ' + endTime
    }
    const cb = {
      success(data) {
        that.setData({
          dataList: data.reverse()
        })
        that.parseChart(data)
      },
      fail(err) {
        that.setData({
          dataList: []
        })
      },
      complete() {
        that.setData({
          loading: false
        })
      }
    }
    const sceneType = app.globalData.userInfo.extension2
    switch (sceneType) {
      case '1':
        deviceservice.getJingAnFumeVakue(app.globalData.accessToken.userId, sT, eT, cb)
        break;
      // case '2':
      //   break;
      // case '3':
      //   break;
      // case '4':
      //   break;
      // case '5':
      //   break;
      // case '6':
      //   break;
      // case '7':
      //   break;
      default:
        this.setData({
          dataList: [],
          loading: false
        })
        break;
    }
  },

  parseChart(dataList) {
    const xValues = []
    dataList.forEach(d => {
      let t = d.time.replace(' ', 'T')
      t = t + ':00.000'
      xValues.push([t, d.value])
    });
    setOption(this.chart, xValues)

    // setOption(this.chart, [
    //   ['2022-11-28T10:05:00.000', 0.02],
    //   ['2022-11-28T10:10:00.000', 0.04],
    //   ['2022-11-28T10:15:00.000', 0.02],
    //   ['2022-11-28T10:20:00.000', 0.02],
    //   ['2022-11-28T10:25:00.000', 0.01],
    //   ['2022-11-28T10:30:00.000', 0.01],
    //   ['2022-11-28T10:35:00.000', 0.01],
    //   ['2022-11-28T10:40:00.000', 0.01],
    //   ['2022-11-28T10:45:00.000', 0.02],
    //   ['2022-11-28T10:50:00.000', 0.03],
    //   ['2022-11-28T10:55:00.000', 0.08],
    //   ['2022-11-28T11:00:00.000', 0.1],
    // ])
  },

  bindDateChange(e) {
    let d = e.detail.value
    this.setData({
      selectDate: d,
    })
  },

  bindStartTimeChange(e) {
    let d = e.detail.value
    this.setData({
      startTime: d,
    })
  },

  bindEndTimeChange(e) {
    let d = e.detail.value
    this.setData({
      endTime: d,
    })
  }
})