var echart;
//x坐标
var xAxis = [];
//y轴数据集
var factorDatas = {
  datas: [],
  physicalQuantity: [],
};
var option = {};
//经纬度
var coor = {};
//监测因子类型
var factorType = [];

var date = '';

var first = true;

var showBadLngLats = true;

var drawMarker = false;

function onCheck(obj) {
  factorDatas.datas[obj.value].show = obj.checked;
  factorDatas.physicalQuantity[obj.value].show = obj.checked;

  var series = [].concat(factorDatas.datas); //.concat(factorDatas.physicalQuantity)
  // FChart.genLineChart(echart, xAxis, series);
  FChart.lineChartOnLegend(echart, xAxis, series, option)
}

function onCoorCheck(obj) {
  showBadLngLats = !obj.checked;

  drawMap();
}

function onMarkerCheck(obj) {
  drawMarker = obj.checked;
  drawMap();
}

function drawMap() {
  var lnglats = [];
  for (const key of Object.keys(coor)) {
    if (showBadLngLats || coor[key].status == 'A') {
      lnglats.push([coor[key].lng, coor[key].lat]);
    }
  }
  if (first) {
    MapUtil.setCenter(lnglats[0]);
    first = false;
  }

  if (drawMarker) {
    MapUtil.drawMarker(lnglats);
  } else {
    MapUtil.drawLine(lnglats);
  }
}

function initView() {
  $('#date').append(date);
}

function initCheckBox() {
  var check = $('.multi-checkbox');
  for (let i = 0; i < factorType.length; i++) {
    const e = factorType[i];

    var checked = i == 0;
    var checkbox = $(
      "<input type='checkbox' id='" +
        i +
        "' value=" +
        i +
        " onclick='onCheck(this)'/>"
    );
    var label = $("<label for='" + i + "'>" + factorType[i] + '</label>');
    checkbox.attr('checked', checked);

    var item = $('<div></div>');
    item.css('padding-end', '0.5rem');
    item.append(checkbox);
    item.append(label);

    check.append(item);
  }
}

function initChart(data) {
  for (let i = 0; i < data.length; i++) {
    const e = data[i];
    if (date == '') {
      date = e.time.substring(0, 10);
    }
    xAxis.push(e.time.substring(11, 19));
    // coor.push([e.lng, e.lat])

    for (let y = 0; y < e.values.length; y++) {
      const v = e.values[y];
      var index = factorType.indexOf(v.factorName);
      if (v.factorName == 'LNG') {
        if (coor[e.time] == undefined) {
          coor[e.time] = {};
        }
        coor[e.time].lng = v.factorData;
        // coor[e.time].status = v.statusList[0]
      }
      if (v.factorName == 'LAT') {
        if (coor[e.time] == undefined) {
          coor[e.time] = {};
        }
        coor[e.time].lat = v.factorData;
      }
      if (index == -1) {
        factorType.push(v.factorName);
        factorDatas.datas.push({
          name: v.factorName,
          type: 'line',
          data: [v.factorData],
          showAllSymbol: true,
          animationDelay: function (idx) {
            return idx * 10;
          },
          show: y == 0,
          markLine: {
            symbol: 'none',

            data: [
            //   {
            //     name: '选中',
            //     xAxis: 'Tue',
            //     lineStyle: {
            //       color: 'green',
            //     },
            //   },
              {
                name: '选中',
                type: 'average',
                yAxis: 32,
                lineStyle: {
                  color: 'red',
                },
              },
            ],
          },
        });
        factorDatas.physicalQuantity.push({
          name: v.factorName + '-物理量',
          type: 'line',
          data: [v.physicalQuantity],
          showAllSymbol: true,
          show: y == 0,
        });
      } else {
        factorDatas.datas[index].data.push(v.factorData);
        factorDatas.physicalQuantity[index].data.push(v.physicalQuantity);
      }
    }
  }
  var series = [].concat(factorDatas.datas); //.concat(factorDatas.physicalQuantity)
  // const option = {
  //   xAxis: {
  //     type: 'category',
  //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  //   },
  //   yAxis: {},
  //   series: [
  //     {
  //       name: 'hehe',
  //       showAllSymbol: true,
  //       animationDelay: function (idx) {
  //         return idx * 10;
  //       },
  //       show: false,
  //       data: [820, 932, 901, 934, 1290, 1330, 1320],
  //       type: 'line',
  //       markLine: {
  //         symbol: 'none',

  //         data: [
  //           {
  //             name: '选中',
  //             xAxis: 'Tue',
  //             lineStyle: {
  //               color: 'green',
  //             },
  //           },
  //           {
  //             name: '选中',
  //             type: 'average',
  //             yAxis: 300,
  //             lineStyle: {
  //               color: 'red',
  //             },
  //           },
  //         ],
  //       },
  //     },
  //   ],
  // };
  //   echart.setOption(option);
  //   var wH = $(window).height();
  //   var wW = $(window).width();

  //   var minW = 700;
  //   var minH = 280;

  //   var width = wW * 0.3 > minW ? wW * 0.3 : minW;
  //   var height = wH * 0.35 > minH ? wH * 0.35 : minH;
  //   echart.resize({
  //     width: width,
  //     height: height,
  //   });
  option = FChart.genLineChart(echart, xAxis, series);
}

function refreshChart(data) {
  //x坐标
  xAxis = [];
  //y轴数据集
  for (var key of factorDatas.datas) {
    key.data = [];
  }
  for (var key of factorDatas.physicalQuantity) {
    key.data = [];
  }

  initChart(data);
  drawMap();
}
jQuery(function () {
  MapUtil.init('container');
  var div = document.getElementById('chart');
  echart = echarts.init(div);
  HttpService.getRealtimeData('0a0000000001', 100, function (data) {
    initChart(data);
    initCheckBox();
    initView();
    drawMap();

    // setInterval(function () {
    //     HttpService.getRealtimeData(60, refreshChart)
    //     console.log("refresh!");
    // }, 1000 * 10)
  });
});