// (function($, FChart, Util) {
function HistoryMode(options) {
  this.isEnable = false;

  this.factorMode = 'type0'; //type0: 无人机和车载；type1：无人船

  this.originData = []; // 原始数据

  this.lineChart;
  this.lineChartOption;
  this.xAxis = [];
  this.historyDatas = {
    datas: [],
    physicalQuantity: [],
  }; //历史数据
  this.lineChartFactorType = [0];
  this.slider; // 折线图滑动模块
  this.progress = 0;
  this.pageSize = 200;

  this.factorType = 0; //3d地图当前展示的监测因子id
  this.factorName = 'NO2';
  this.drawMode = 0; //绘制模式，0：自动模式，自动计算当前数据的范围，绘制合适的比例；1：手动模式，根据页面设置的绘图范围进行绘制
  this.setCenter = true;
  /**
   * {
   * factorId: Factor
   * }
   */
  this.factorDatas = new FactorDatas();

  this.mapMaker = options.mapMaker;
}

HistoryMode.prototype = {
  init: function () {
    this.initLineChart();
    //初始化图表滑动条
    this.initSlider();
    this.initTable();
    // this.searchBox()
    this.lastProgress = -1;
  },
  enable: function () {
    this.isEnable = true;
    this.uichange(true);
  },
  disable: function () {
    this.isEnable = false;
    this.uichange(false);
  },
  uichange: function (isShow) {
    // var h = $('#btn_history')
    if (isShow) {
      this.setFactorMode('type0');

      setTimeout(() => {
        // h.removeClass()
        // h.addClass('btn-selected')

        $('#historybox').slideDown('fast');
        $('#history_table_box').slideDown('fast');
        $('#searchbox').slideDown('fast');
        $('#history_animation').slideDown('fast');

        $('#legend').css('left', '1px');
        $('#legend').css('right', 'auto');
        $('#rangeset').removeClass('map-range-set-2');
        $('#rangeset').addClass('map-range-set');

        $('#rangeset').show('fast');
        $('#legend').show('fast');

        $('.map-factor-selector').show('fast');

        this.searchBox();
      }, 500);
    }
  },
  searchBox: function () {
    var that = this;

    $('.hMode').show();

    var type = $('#select_device_type').val();
    var tD = $('#select_device_code');
    tD.empty();
    var options2 = [];
    switch (type) {
      case '0a':
        options2.push('0a0000000001');
        options2.push('0a0000000002');
        options2.push('0a0000000003');
        break;
      case '0b':
        options2.push('0b0000000001');
        options2.push('0b0000000002');
        break;
      case '0c':
        options2.push('0c0000000001');
        break;
      default:
        options2.push('0a0000000001');
        options2.push('0a0000000002');
        options2.push('0a0000000003');
        break;
    }

    options2.forEach((element) => {
      var op = $('<option></option>');
      op.text(element);
      tD.append(op);
    });

    $('#btn_search').off();
    $('#btn_search').on('click', function () {
      var deviceCode = $('#select_device_code').val();
      var startTime = $('#starttime_text').text();
      var endTime = $('#endtime_text').text();

      DataUtil.toggleLoading();
      that.getHistoryData(deviceCode, startTime, endTime, 1, true);
    });

    this.getRealtimeData();
  },
  getRealtimeData: function () {
    var that = this;
    DataUtil.toggleLoading();
    HttpService.getRealtimeData('0a0000000001', 100, function (data) {
      DataUtil.toggleLoading();
      if (data.length == 0) {
        alert('数据库没有任何数据');
        return;
      }
      var code = data[0].deviceCode;
      var factorMode = DataUtil.refreshFactorMode(code);
      $('#starttime_text').text(data[0].time);
      $('#endtime_text').text(data[data.length - 1].time);
      timePicker.setStartDate(data[0].time);
      timePicker.setEndDate(data[data.length - 1].time);

      that.setFactorData(data, factorMode);
      $('#historybox').slideDown('fast');
      $('#history_table_box').slideDown('fast');
    });
  },
  getHistoryData: function (deviceCode, startTime, endTime, page, loading) {
    var that = this;
    HttpService.getHistoryData(
      deviceCode,
      startTime,
      endTime,
      page,
      10000,
      function (data) {
        if (loading) {
          DataUtil.toggleLoading();
        }
        if (data.length == 0) {
          alert('未查询到数据');
          return;
        }
        var factorMode = DataUtil.refreshFactorMode(deviceCode);
        var type = DataUtil.refreshVehicleType(deviceCode);
        that.mapMaker.setVehicleType(type);
        if (loading) {
          that.setFactorMode(factorMode);
          CheckBox.newRadioBox(
            'factorbox',
            'factorType',
            Util.selectOptions2[that.factorMode],
            ['1'],
            onCheckMap
          );
          that.setFactorData(data, factorMode);
        } else {
          that.addFactorData(data);
        }
      },
      function (head) {
        if (page < head.totalPage) {
          // that.getHistoryData(deviceCode, startTime, endTime, page + 1, false)
        }
      }
    );
  },
  setFactorType: function (factorType, factorMode, factorName) {
    this.factorMode = factorMode;
    this.factorType = factorType;
    this.factorName = factorName;
    this.factorDatas.refreshHeight(this.factorType + 1 + '');
    this.refreshLegend(this.factorDatas);
    this.mapMaker.setFactorType(factorType);
    if (!this.mapMaker.runStatus()) {
      this.drawMesh(false, this, this.factorDatas);
    }
  },
  setFactorMode: function (factorMode) {
    if (this.factorMode != factorMode) {
      this.factorMode = factorMode;
      this.initTable();
      this.initLineChart();
    }
  },
  //设置绘图范围
  setRange: function (range) {
    this.factorDatas.setRange(this.factorType + 1 + '', range);
    this.refreshLegend(this.factorDatas);
    this.drawMesh(false, this, this.factorDatas);
  },
  //重置为动态绘图范围（取当前数据中的最大最小值）
  resetRange: function () {
    this.factorDatas.resetRange(this.factorType + 1 + '');
    this.refreshLegend(this.factorDatas);
    this.drawMesh(false, this, this.factorDatas);
  },
  //标准绘图范围（以标准图例展示）
  standardRange: function () {
    this.factorDatas.standardRange(this.factorType + 1 + '');
    this.refreshLegend(this.factorDatas);
    this.drawMesh(false, this, this.factorDatas);
  },

  /********************************* 监测数据 - start ************************************/
  // 设置当前数据集
  setFactorData: function (dataList, factorMode, noMap) {
    // this.setFactorMode(factorMode)

    this.originData = dataList;

    if (noMap != true) {
      // 1.初始化数据结构
      this.factorDatas.setData(
        dataList,
        this.drawMode,
        true,
        function () {
          this.factorDatas.refreshHeight(this.factorType + 1 + '');
          // 绘制3D图形
          this.draw();
        }.bind(this)
      );
    }

    // 绘制折线图
    this.setChartData(dataList);
    this.refreshLineChartData();

    // 绘制表格
    this.refreshTable();
  },
  addFactorData: function (dataList, noMap) {
    this.originData.push.apply(this.originData, dataList);

    if (noMap != true) {
      this.factorDatas.addData(
        dataList,
        this.drawMode,
        true,
        function () {
          this.draw();
        }.bind(this)
      );
    }

    this.addChartData(dataList);
    this.refreshLineChartData();

    this.addToTable(dataList);
  },
  /********************************* 监测数据 - end ************************************/

  /********************************* 地图图形绘制 - start ************************************/
  draw: function () {
    // var that = this
    // MapUtil.convertFromGPS(this.factorDatas.lnglats_GPS, function(result) {
    //   var gd = that.factorDatas.lnglats_GD
    //   gd.push.apply(gd, result)

    //   var coor_GD = MapUtil.lngLatToGeodeticCoord(gd)
    //   var coor = that.factorDatas.coors_GD
    //   coor.push.apply(coor, coor_GD)
    // })
    // 3.绘制3d图形
    this.refreshLegend(this.factorDatas);
    this.drawMesh(false, this, this.factorDatas);
  },
  /********************************* 地图图形绘制 - end ************************************/

  /********************************* 折线图 - start ************************************/
  initLineChart: function (mode) {
    // 1.初始化折线图
    var div = document.getElementById('chart');
    this.lineChart = echarts.init(div);
    // 2.初始化监测因子复选框
    $('#history_chart_factorbox').empty();
    var m = mode == undefined ? this.factorMode : mode;
    CheckBox.newCheckBox(
      'history_chart_factorbox',
      Util.selectOptions1[m],
      ['1'],
      this.onCheckLineChart.bind(this)
    );
    // 3.创建初始折线图
    this.drawLineChart();
  },
  // 复选框监测因子监听事件
  onCheckLineChart: function (obj) {
    var _factorType = parseInt(obj.value) - 1;

    this.historyDatas.datas[_factorType].show = obj.checked;
    this.historyDatas.physicalQuantity[_factorType].show = obj.checked;

    if (obj.checked) {
      this.lineChartFactorType.push(_factorType);
    } else {
      var i = this.lineChartFactorType.indexOf(_factorType);
      if (i != -1) {
        this.lineChartFactorType.splice(i, 1);
      }
    }

    this.refreshLineChartData();
  },
  // 创建初始折线图
  drawLineChart: function () {
    this.lineChartOption = FChart.genLineChart(
      this.lineChart,
      this.xAxis,
      [],
      false
    );
  },
  // 刷新折线图数据
  refreshLineChartData: function () {
    var series = this.historyDatas.datas;
    this.lineChartOption = FChart.lineChartOnLegend(
      this.lineChart,
      this.xAxis,
      series,
      this.lineChartOption
    );
  },
  //初始化图表滑动条
  initSlider: function () {
    $('#sliderParent').empty();
    var option = {
      handleSrc: './asset/mipmap/slider_handle.png',
      isCustomText: false,
    };
    var that = this;
    this.slider = $('#sliderParent').jackWeiSlider(option);
    this.slider
      .setProgress(0.0)
      .setOnStartDragCallback(function () {
        // console.log('start');
      })
      .setOnDragCallback(function (p) {
        if (p != that.lastProgress) {
          that.progress = p;
          FChart.lineChartOnPage2({
            chart: that.lineChart,
            option: that.lineChartOption,
            progress: p,
            size: that.pageSize,
          });
        }
      })
      .setOnStopDragCallback(function () {
        // console.log('stop');
      });
  },
  // 初始化图标对象
  setChartData: function (dataList) {
    this.xAxis = [];
    this.historyDatas.datas = [];
    this.historyDatas.physicalQuantity = [];

    this.addChartData(dataList);
  },
  addChartData: function (dataList) {
    dataList.forEach((d) => {
      // 数据时间
      this.xAxis.push(d.time.split(' ')[1]);

      for (let i = 0; i < d.values.length; i++) {
        const v = d.values[i];
        if (this.historyDatas.datas.length < i + 1) {
          this.historyDatas.datas.push({
            name: Util.factorName[v.factorName],
            type: 'line',
            data: [v.factorData],
            showAllSymbol: true,
            animationDelay: function (idx) {
              return idx * 10;
            },
            show: this.lineChartFactorType.indexOf(i) != -1,
          });
          this.historyDatas.physicalQuantity.push({
            name: Util.factorName[v.factorName] + '-物理量',
            type: 'line',
            data: [v.physicalQuantity],
            showAllSymbol: true,
            show: this.lineChartFactorType.indexOf(i) != -1,
          });
        } else {
          this.historyDatas.datas[i].data.push(v.factorData);
          this.historyDatas.physicalQuantity[i].data.push(v.physicalQuantity);
        }
      }
    });
  },
  //
  setPage: function (perPage) {
    this.pageSize = perPage;
    FChart.lineChartOnPage2({
      chart: this.lineChart,
      option: this.lineChartOption,
      progress: this.progress,
      size: this.pageSize,
    });
  },
  /********************************* 折线图 - end ************************************/

  /********************************* 表格 - start ************************************/
  initTable: function (mode) {
    var m = mode == undefined ? this.factorMode : mode;
    CheckBox.newCheckBox(
      'history_table_factorbox',
      Util.selectOptions3[m],
      ['1', '2', '3'],
      this.onCheckTable.bind(this)
    );
  },
  onCheckTable: function (obj) {
    Table.onChangeTh(obj.value, obj.checked);
  },
  refreshTable: function () {
    Table.table(
      'history_table',
      this.originData,
      this.factorMode,
      (factor, index) => {
        MapUtil.convertFromGPS([[factor.lng, factor.lat]], (result) => {
          var windDir = 0;
          if (factor.values[16] != undefined) {
            windDir = factor.values[16].factorData;
          }
          var windSpeed = 1;
          if (factor.values[15] != undefined) {
            windSpeed = factor.values[15].factorData;
          }
          // 1. 绘制扇形区域
          MapUtil.drawSector3(result[0], windDir, windSpeed);

          // 2. 绘制对话框
          const window = DialogUtil.createInfoWindow2(factor, () => {
            // 移除扇形区域
            MapUtil.clearSector3();
          });
          window.open(MapUtil._map, result[0]);
          // 3. 趋势图跳转定位
          var f = this.factorDatas.factor[this.factorType + 1 + ''];
          const progress = FChart.locate(
            this.lineChart,
            this.lineChartOption,
            index,
            f.factorName
          );
          this.slider.setProgress(progress);
        });
      },
      undefined,
      ['1', '2', '3']
    );
    $('#table_data_count').text(
      '数据量：' + this.originData.length + '个，单页：200个'
    );
  },
  addToTable: function (data) {
    var count = Table.onNewData(data, true);
    $('#table_data_count').text('数据量：' + count + '个，单页：200个');
  },
  /********************************* 表格 - end ************************************/

  /********************************* 历史轨迹动画 - start ************************************/
  newTimeTask: function (speed, restart) {
    this.mapMaker.setDynamicSpeed(false); //关闭动态绘制速度调整
    this.mapMaker.moveAnimation(this.factorDatas, this.factorType);
  },
  startAnimation: function (speed) {
    this.changeSpeed(speed);
    if (!this.mapMaker.runStatus()) {
      this.newTimeTask();
    } else {
      this.mapMaker.start();
    }
  },
  changeSpeed: function (speed) {
    this.mapMaker.changeSpeed(speed);
  },
  pauseAnimation: function () {
    this.mapMaker.pause();
  },
  stopAnimation: function (clear) {
    this.mapMaker.stop();
  },
  setOnStopAnimationCallback: function (callback) {
    this.mapMaker.setOnStopCallback(
      function () {
        var f = this.factorDatas.factor[this.factorType + 1 + ''];
        MapUtil.drawMesh2(
          this.factorDatas.lnglats_GD,
          this.factorDatas.coors_GD,
          f.heights,
          f.colors,
          f.bottomColor
        );
        callback();
      }.bind(this)
    );
  },
  /********************************* 历史轨迹动画 - end ************************************/

  refreshLegend: function (_factorDatas) {
    var f = _factorDatas.factor[this.factorType + 1 + ''];
    $('#in_min').val(f.min.toFixed(1));
    $('#in_max').val(f.max.toFixed(1));
    // DataUtil.refreshLegend(f.min, f.max, true, this.factorType)
    Legend.refreshLegend(
      'legend_content',
      f.factorName,
      true,
      f.legendType,
      f.min,
      f.max
    );
  },
  drawMesh: function (merge, that, _factorDatas) {
    // 1.获取当前选择的监测因子的数据
    var f = _factorDatas.factor[that.factorType + 1 + ''];
    // 2.绘制3d图形
    MapUtil.drawMesh_Test(_factorDatas, f, merge, that.setCenter);
    // MapUtil.drawLine(_factorDatas.lnglats_GD);
    // MapUtil.drawMarker(
    //   _factorDatas,
    //   f,
    //   {
    //     chart: this.lineChart,
    //     option: this.lineChartOption,
    //   },
    //   (progress) => {
    //     this.slider.setProgress(progress);
    //   }
    // );
    MapUtil.drawMassMarks(
      _factorDatas,
      f,
      {
        chart: this.lineChart,
        option: this.lineChartOption,
      },
      (progress) => {
        this.slider.setProgress(progress);
      }
    );

    // polyline.on('click', function (event) {
    //   console.log(event);
    // });
    // that.setCenter = false
  },
  drawSector: function (params) {},
};

$.fn.historyMode = function (options) {
  return new HistoryMode(options);
};
// })(jQuery, FChart, Util);