/**
 * 网格化监测
 */
function GridMonitor(options) {
  this.sites
  this.showingSites = []

  // 信访企业
  this.companys = []
  // 信访企业地图标记
  this.companyMarker = []
  this.companyInfoWindow = []
  this.isCompanyShow = false

  this.historyMode = options.historyMode
  this.timePicker = options.timePicker
}

GridMonitor.prototype = {
  init: function () {
    this.getStats()
    // this.fetchingData()
  },
  enable: function () {
    this.isEnable = true
    this.uiChange(true)
  },
  disable: function () {
    this.isEnable = false
    this.uiChange(false)
  },
  getStats: function () {
    //   todo
    this.sites = {
      '0d0000000001': {
        name: '吕巷镇乡间艺墅微型站',
        code: '0d0000000001',
        show: false,
        data: new FactorDatas(),
        location: [0, 0],
        // 地图标记点
        marker: '',
        // 标记点信息窗体
        infoWindow: ''
      },
      // '0a0000000001': {
      //   name: '测试站点二',
      //   code: '0a0000000001',
      //   show: false,
      //   data: new FactorDatas(),
      //   location: [0, 0],
      //   // 地图标记点
      //   marker: '',
      //   // 标记点信息窗体
      //   infoWindow: ''
      // }
    }

    var that = this

    var group = $('#monitor_sites')
    group.empty()
    Object.keys(this.sites).forEach(k => {
      var s = this.sites[k]
      var d1 = $('<div class="form-check"></div>')
      var check = $('<input type="checkbox" class="form-check-input">')
      check.attr('id', s.code)
      check.attr('value', s.code)
      check.on('click', function () {
        var code = $(this).val()
        that.showData(code)
      })
      var label = $('<label class="form-check-label">')
      label.attr('for', s.code)
      label.text(s.name)
      d1.append(check)
      d1.append(label)

      group.append(d1)
    });
  },
  fetchingData: function (code, callback) {
    var that = this
    var type = $('#select_data_type').val()
    var _code = code == undefined ? Object.keys(this.sites)[0] : code
    HttpService.getRealtimeData(_code, 1, function (datas) {
      if (datas.length == 0) {
        return
      }
      // 更新最新的数据时间
      that.lastestTime = datas[datas.length - 1].time
      that.parseData(datas, callback)
    }, {}, type)
  },
  parseData: function (datas, callback) {
    var that = this
    if (datas.length == 0) {
      return
    }
    var data = datas[datas.length - 1]
    // datas.forEach(data => {
    var dCode = data.deviceCode
    var site = this.sites[dCode]
    if (site == undefined) {
      return
    }
    site.data.setData([data])
    // if (data.lng != 0 && data.lat != 0) {
    if (site.location[0] == 0) {
      site.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: that.createInfoWindow(site),
        offset: new AMap.Pixel(16, -45)
      })

      site.location = [121.235813, 30.835898]
      MapUtil.convertFromGPS([site.location], function (result) {
        site.marker = new AMap.Marker({
          position: new AMap.LngLat(...result[0]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          // label: {
          //   content: site.name,
          //   offset: 0,
          //   direction: "bottom"
          // },
          title: site.name,
          content: '<div><img src="./asset/mipmap/device.png" style="width: 30px;height: 30px"/><div class="marker-content">' + site.name + '</div></div>',
          // icon: "./asset/mipmap/location.png",
          animation: "AMAP_ANIMATION_DROP"
        });

        //鼠标点击marker弹出自定义的信息窗体
        AMap.event.addListener(site.marker, 'click', function () {
          site.infoWindow.open(MapUtil._map, site.marker.getPosition());
        });

        if (callback != undefined) {
          callback()
        }
      })
    } else {
      site.infoWindow.setContent(that.refreshInfoWindow(site, site.infoWindow.getContent()))

      if (callback != undefined) {
        callback()
      }
    }
    // })
  },

  showData: function (...deviceCodes) {
    deviceCodes.forEach(d => {
      if (this._isSiteShowing(d)) {
        this._hideSite(d)
      } else {
        this._showSite(d)
      }
    })
  },
  _isSiteShowing: function (dCode) {
    return this.showingSites.indexOf(dCode) != -1
  },
  _hideSite: function (dCode) {
    var site = this.sites[dCode]
    var m = site.marker
    MapUtil.removeViews(m)

    var info = site.infoWindow
    info.close()

    var i = this.showingSites.indexOf(dCode)
    this.showingSites.splice(i, 1)
  },
  _showSite: function (dCode) {
    var that = this
    var site = this.sites[dCode]
    if (site.marker == '') {
      this.fetchingData(site.code, function () {
        that._siteShow(dCode)
      })
    } else {
      this._siteShow(dCode)
    }
  },
  _siteShow: function (dCode) {
    var site = this.sites[dCode]
    var m = site.marker
    MapUtil.addViews(m)

    var info = site.infoWindow
    info.open(MapUtil._map, m.getPosition());

    this.showingSites.push(dCode)
  },

  /**
   * 显示或隐藏信访企业
   */
  toggleCompany: function () {
    this.isCompanyShow = !this.isCompanyShow

    if (!this.isCompanyShow) {
      MapUtil.removeViews(this.companyMarker)
      return
    }

    if (this.companys.length == 0) {
      HttpService.getCompanyInfo(function (data) {
        this.companys = data
        var datas = []
        var index = 1
        var lnglats = []
        this.companys.forEach(element => {
          if (element.ciLongitude != undefined) {
            datas.push({
              id: index,
              name: element.ciName,
            })
            lnglats.push([element.ciLongitude, element.ciLatitude])
            index++
          }
        });
        MapUtil.convertFromGPS(lnglats, function (gd) {

          for (let i = 0; i < datas.length; i++) {
            const element = datas[i];
            var icon = new AMap.Icon({
              size: new AMap.Size(30, 30),
              imageSize: new AMap.Size(22, 22),
              image: "./asset/mipmap/company.png",
              // imageOffset: new AMap.Pixel(-16, -16) // 相对于基点的偏移位置
            })
  
            var marker = new AMap.Marker({
              position: new AMap.LngLat(gd[i][0], gd[i][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              label: {
                content: element.name,
                offset: 0,
                direction: "top"
              },
              title: element.name,
              // content: element.name,
              icon: icon,
              animation: "AMAP_ANIMATION_DROP"
            });
  
            //鼠标点击marker弹出自定义的信息窗体
            AMap.event.addListener(marker, 'click', function () {
              this.companyInfoWindow[i].open(MapUtil._map, marker.getPosition());
            });
  
            this.companyMarker.push(marker)
          }
  
          MapUtil.addViews(this.companyMarker)
        }.bind(this))
      }.bind(this))
    } else {
      MapUtil.addViews(this.companyMarker)
    }
  },

  /**
   * 站点标记信息窗体
   */
  createInfoWindow: function (site) {
    var that = this
    //实例化信息窗体
    var title = '<div>' + site.name + '</div>' + '<div class="sub-title">编号:' + site.code + '</div>',
      content = '';
    tag = ''

    tag += ("<div class='time'>" + '时间: ' + site.data.times[site.data.times.length - 1])

    // 遍历站点数据中的每一项监测因子，生成页面
    content += "<table class='text-table'>"
    var _contents = new Map()
    Object.keys(site.data.factor).forEach(k => {
      var f = site.data.factor[k]
      // 删选不显示的因子
      if (f.factorName == 'NOI' || f.factorName == 'LNG' || f.factorName == 'LAT' || f.factorName == 'VELOCITY' ||
        f.factorName == 'TIME' || f.factorName == 'HEIGHT') {
        return
      }

      var d = f.datas[f.datas.length - 1]

      var factor = Util.factorName[f.factorName]
      var n = 1
      if (f.factorName == 'WIND_DIRECTION') {
        n = 0
      }
      var v = d.factorData.toFixed(n)
      var unit = Util.factorUnit2[f.factorName]
      if (f.factorName == 'CO') {
        unit = 'μg/m³'
      }
      if (f.factorName == 'WIND_DIRECTION') {
        unit += '(' + Util.windDir(d.factorData) + ')'
      }
      var c = "<tr>"
      if (f.factorName == 'H2S' || f.factorName == 'PM10') {
        c = "<tr class='divide'>"
      }
      c += "<td>" + factor + "</td>"
      c += "<td>" + ': ' + "</td>"
      c += "<td>" + v + "</td>"
      c += "<td class='last-col'>" + unit + "</td>"
      c += "</tr>"

      _contents.set(f.factorName, c)
    })
    var orderList = ['VOC', 'H2S', 'NO2', 'CO', 'SO2', 'O3', 'PM25', 'PM10', 'TEMPERATURE', 'HUMIDITY', 'WIND_SPEED', 'WIND_DIRECTION']
    orderList.forEach(e => {
      content += _contents.get(e)
    });

    content += "</table>"

    var info = document.createElement("div");
    // info.className = "custom-info input-card content-window-card";
    info.className = "flexbox-col";

    //可以通过下面的方式修改自定义窗体的宽高
    //info.style.width = "400px";
    // 定义顶部标题
    var top = document.createElement("div");
    // top.className = "info-top";
    top.className = "ff-content ff-content-top-left ff-content-small-borderless-t info-top";
    var top_b = document.createElement("div");
    top_b.className = "ff-border-bottom"
    var top_t = document.createElement("div");
    top_t.className = "ff-border-top"
    var top_c = document.createElement("div");
    top_c.className = "ff-border-content flexbox flex-space-between"


    var titleD = document.createElement("div");
    var closeX = document.createElement("i");
    titleD.innerHTML = title;
    closeX.className = "fa fa-times"
    $(closeX).attr('aria-hidden', 'true')
    closeX.onclick = function () {
      that.closeInfoWindow(site);
    }

    top_c.appendChild(titleD);
    top_c.appendChild(closeX);

    top_t.appendChild(top_c)
    top.appendChild(top_b)
    top.appendChild(top_t)

    info.appendChild(top);

    // 定义中部内容
    var refreshV = document.createElement("div");
    refreshV.className = 'refresh-btn'
    var refresh = document.createElement("i");
    refresh.className = 'fa fa-refresh'
    $(refresh).attr('aria-hidden', 'true')
    $(refresh).css('color', '#ffffffc0')
    $(refresh).css('cursor', 'pointer')
    refresh.onclick = function () {
      $(this).addClass('fa-spin')
      that.fetchingData(site.code, function () {
        setTimeout(() => {
          $(this).removeClass('fa-spin')
        }, 1000);
      }.bind(this))
    }
    var m_top = document.createElement("div");
    m_top.className = "ff-content ff-content-left ff-content-medium";
    var m_top_b = document.createElement("div");
    m_top_b.className = "ff-border-bottom"
    var m_top_t = document.createElement("div");
    m_top_t.className = "ff-border-top"
    var m_top_c = document.createElement("div");
    m_top_c.className = "ff-border-content"
    var m_top_f = document.createElement("div");
    m_top_f.className = "ff-footer flexbox-col flex-center"
    var m_top_tr = document.createElement("div");
    m_top_tr.className = "ff-triangle"
    var m_top_trb = document.createElement("div");
    m_top_trb.className = "ff-triangle-border"

    // $(refresh).on('click', site.code, function(event) {
    //   $(this).addClass('loading-pic')
    //   that.fetchingData(event.data, function() {
    //     $(this).removeClass('loading-pic')
    //   })
    // });
    refreshV.appendChild(refresh)
    m_top_c.appendChild(refreshV);

    var middle = document.createElement("div");
    middle.className = "info-middle";
    middle.innerHTML = content;
    m_top_f.innerHTML = tag

    m_top_c.appendChild(middle);


    m_top_t.appendChild(m_top_c)
    m_top_tr.appendChild(m_top_trb)

    m_top.appendChild(m_top_b)
    m_top.appendChild(m_top_t)
    m_top.appendChild(m_top_f)
    m_top.appendChild(m_top_tr)

    info.appendChild(m_top);


    // 定义底部内容
    var bottom = document.createElement("div");
    bottom.className = "info-bottom";
    bottom.style.position = 'relative';
    bottom.style.top = '0px';
    bottom.style.margin = '0 auto';
    var sharp = document.createElement("img");
    sharp.src = "https://webapi.amap.com/images/sharp.png";
    bottom.appendChild(sharp);
    info.appendChild(bottom);
    return info;
  },
  closeInfoWindow: function (site) {
    site.infoWindow.close()
  },
  refreshInfoWindow: function (site, infoWindow) {
    return this.createInfoWindow(site)
  },

  /**
   * UI显示隐藏变化
   */
  uiChange: function (isShow) {
    // var g = $('#btn_gridmonitor')
    // g.addClass('btn-unselected')
    if (isShow) {
      this.historyMode.setFactorMode('type2')

      setTimeout(() => {
        // g.removeClass()
        // g.addClass('btn-selected margin-left-8')

        $('#historybox').slideDown("fast")
        $('#history_table_box').slideDown("fast")
        $('#searchbox').slideDown("fast")

        $('#table_title').html(" 监<br>测<br>数<br>据<br>详<br>情")

        this.searchBox()
      }, 500)
    } else {
      // DataUtil.hideAll()
      $('.gMode').hide()
    }
  },
  /**
   *  搜索框重新初始化
   */
  searchBox: function () {

    var that = this

    $('.hMode').hide()
    $('.gMode').show()

    var tD = $('#select_device_code')
    tD.empty()
    var options2 = ['0d0000000001']
    var op = $('<option></option>')
    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()
      var type = $('#select_data_type').val()

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

    this.getRealtimeData()
  },
  getRealtimeData: function () {
    var that = this
    DataUtil.toggleLoading()
    HttpService.getRealtimeData("0d0000000001", 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)
      that.timePicker.setStartDate(data[0].time)
      that.timePicker.setEndDate(data[data.length - 1].time)

      that.historyMode.setFactorData(data, factorMode, true)

      MapUtil.clear3D()
      that._showSite("0d0000000001")
    }, {}, 1)//默认获取分钟数据
  },
  getHistoryData: function (deviceCode, startTime, endTime, page, loading, type) {
    var that = this
    HttpService.getHistoryData(deviceCode, startTime, endTime, page, 100000, function (data) {
      if (loading) {
        DataUtil.toggleLoading()
      }
      if (data.length == 0) {
        alert('未查询到数据')
        return
      }
      var factorMode = DataUtil.refreshFactorMode(deviceCode)
      if (loading) {
        that.historyMode.setFactorData(data, factorMode, true)
      } else {
        that.historyMode.addFactorData(data, true)
      }
      that._showSite(deviceCode)
    }, function (head) {
      setTimeout(() => {
        if (page < head.totalPage) {
          that.getHistoryData(deviceCode, startTime, endTime, page + 1, false, type)
        }
      }, 500);
    }, type)
  }
}