/**
 * 企业信访投诉图层
 */
function ComplaintLayer(options) {
  this.isShow = false
  // 吕巷区域企业信访图层
  this.complaints = []
  this.markers = []

  // 吕巷区域企业生产工艺图层
  this.companys = []
  this.markers2 = []

  // 吕巷区域企业违法风险等级图层
  this.assessments = []
  this.markers3 = []

  // 吕巷区域信访来源地
  this.sources = []
  this.markers4 = []
  this.markers4_1 = []

  // 吕巷区域信访集中区
  this.centers = []
  this.markers5 = []
  this.markers5_1 = []

  this.showTypes = [1, 2, 3, 4, 5, 6]

  this.zoomLevel = 14
}

ComplaintLayer.prototype = {
  init: function () {
    this.searchBox()
  },
  enable: function () {
    this.isEnable = true
    this.uiChange(true)
  },
  disable: function () {
    this.isEnable = false
    this.uiChange(false)
  },
  /**
   * UI显示隐藏变化
   */
  uiChange: function (isShow) {
    if (isShow) {
      $('#complaint_type').slideDown("fast")
    } else {
      $('#complaint_type').slideUp("fast")
    }
  },
  searchBox: function () {
    var that = this
    $('.complaint-check').on('click', function () {
      var type = parseInt(this.value)
      var i = that.showTypes.indexOf(type)
      if (i == -1) {
        that.showTypes.push(type)
      } else {
        that.showTypes.splice(i, 1)
      }
      that.refreshContent()
      MapUtil.addViews(that.markers, false)
    })
  },
  toggleComplaint: function () {
    this.isShow = !this.isShow
    if (!this.isShow) {
      this.disable()
      MapUtil.removeViews(this.markers)
    } else {
      this.enable()
      DataUtil.toggleLoading()
      this.getData(function () {
        MapUtil.addViews(this.markers)
        DataUtil.toggleLoading()
      }.bind(this))
    }
  },
  toggleComplaint2: function () {
    this.isShow2 = !this.isShow2
    if (!this.isShow2) {
      MapUtil.removeViews(this.markers2)
    } else {
      DataUtil.toggleLoading()
      this.getData2(function () {
        MapUtil.addViews(this.markers2)
        DataUtil.toggleLoading()
      }.bind(this))
    }
  },
  toggleComplaint3: function () {
    this.isShow3 = !this.isShow3
    if (!this.isShow3) {
      MapUtil.removeViews(this.markers3)
    } else {
      DataUtil.toggleLoading()
      this.getData3(function () {
        MapUtil.addViews(this.markers3)
        DataUtil.toggleLoading()
      }.bind(this))
    }
  },
  toggleComplaint4: function () {
    this.isShow4 = !this.isShow4
    this.zoomEvent(4)
    if (!this.isShow4) {
      MapUtil.removeViews(this.markers4)
      MapUtil.removeViews(this.markers4_1)
    } else {
      DataUtil.toggleLoading()
      this.getData4(function () {
        MapUtil.addViews(this.markers4)
        MapUtil.addViews(this.markers4_1)
        DataUtil.toggleLoading()
      }.bind(this))
    }
  },
  toggleComplaint5: function () {
    this.isShow5 = !this.isShow5
    this.zoomEvent(5)
    if (!this.isShow5) {
      MapUtil.removeViews(this.markers5)
      MapUtil.removeViews(this.markers5_1)
    } else {
      DataUtil.toggleLoading()
      this.getData5(function () {
        MapUtil.addViews(this.markers5)
        MapUtil.addViews(this.markers5_1)
        DataUtil.toggleLoading()
      }.bind(this))
    }
  },
  getData: function (callback) {
    if (this.complaints.length === 0) {
      HttpService.getComplaint(function (data) {
        this.complaints = data
        this.refreshMarkers(data, callback)
      }.bind(this))
    } else {
      callback()
    }
  },
  getData2: function (callback) {
    if (this.companys.length === 0) {
      HttpService.getCompanyInfo(function (data) {
        this.companys = data
        this.refreshMarkers2(data, callback)
      }.bind(this))
    } else {
      callback()
    }
  },
  getData3: function (callback) {
    if (this.assessments.length === 0) {
      HttpService.getAssessment(function (data) {
        this.assessments = data
        this.refreshMarkers3(data, callback)
      }.bind(this))
    } else {
      callback()
    }
  },
  getData4: function (callback) {
    if (this.sources.length === 0) {
      this.sources = deBugSources
      this.refreshMarkers4(this.sources, callback)
    } else {
      callback()
    }
  },
  getData5: function (callback) {
    if (this.centers.length === 0) {
      this.centers = deBugCenters
      this.refreshMarkers5(this.centers, callback)
    } else {
      callback()
    }
  },
  refreshMarkers: function (data, callback) {
    var lnglats = []
    this.complaints.forEach(e => {
      if (e.ciLng != undefined) {
        lnglats.push([e.ciLng, e.ciLat])
      }
    });
    MapUtil.convertFromGPS(lnglats, function (gd) {
      for (let i = 0; i < data.length; i++) {
        let c = data[i]
        let lngLat = gd[i]
        let content = this.getMarkerContent(c)
        var marker = new AMap.Marker({
          position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: c.ciName,
          content: content,
          animation: "AMAP_ANIMATION_DROP"
        });
        this.markers.push(marker)
      }
      callback()
    }.bind(this))
  },
  refreshMarkers2: function (data, callback) {
    var lnglats = []
    this.companys.forEach(e => {
      if (e.ciLongitude != undefined) {
        lnglats.push([e.ciLongitude, e.ciLatitude])
      }
    });
    MapUtil.convertFromGPS(lnglats, function (gd) {
      for (let i = 0; i < data.length; i++) {
        let c = data[i]
        let lngLat = gd[i]
        let content = this.getMarkerContent2(c)
        var marker = new AMap.Marker({
          position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: c.ciName,
          content: content,
          animation: "AMAP_ANIMATION_DROP"
        });
        this.markers2.push(marker)
      }
      callback()
    }.bind(this))
  },
  refreshMarkers3: function (data, callback) {
    var lnglats = []
    this.assessments.forEach(e => {
      if (e.ciLng != undefined) {
        lnglats.push([e.ciLng, e.ciLat])
      }
    });
    MapUtil.convertFromGPS(lnglats, function (gd) {
      for (let i = 0; i < data.length; i++) {
        let c = data[i]
        let lngLat = gd[i]
        let content = this.getMarkerContent3(c)
        var marker = new AMap.Marker({
          position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: c.ciName,
          content: content,
          animation: "AMAP_ANIMATION_DROP"
        });
        this.markers3.push(marker)
      }
      callback()
    }.bind(this))
  },
  refreshMarkers4: function (data, callback) {
    data.forEach(d => {
      var circle = new AMap.Circle({
        center: new AMap.LngLat(...d.center), // 圆心位置
        radius: d.radius, //半径
        strokeColor: "#A1C2F8", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 1, //线粗细度
        fillColor: "#A1C2F8", //填充颜色
        fillOpacity: 0.35 //填充透明度
      })
      var text = new AMap.Text({
        text: d.name,
        position: new AMap.LngLat(...d.center),
        style: {
          'font-size': '16px',
          'color': '#333333',
          'fontWeight': '600',
          'background-color': '#ffffff55'
        }
      })
      this.markers4.push(circle)
      this.markers4_1.push(text)
    })
    callback()
  },
  refreshMarkers5: function (data, callback) {
    data.forEach(d => {
      var circle = new AMap.Circle({
        center: new AMap.LngLat(...d.center), // 圆心位置
        radius: d.radius, //半径
        strokeColor: "#DEE4E4", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 1, //线粗细度
        fillColor: "#DEE4E4", //填充颜色
        fillOpacity: 0.35 //填充透明度
      })
      var text = new AMap.Text({
        text: d.name,
        position: new AMap.LngLat(...d.center),
        style: {
          'font-size': '16px',
          'color': '#333333',
          'fontWeight': '600',
          'background-color': '#ffffff55'
        }
      })
      this.markers5.push(circle)
      this.markers5_1.push(text)
    })
    callback()
  },
  refreshContent: function () {
    for (let i = 0; i < this.complaints.length; i++) {
      let c = this.complaints[i]
      let content = this.getMarkerContent(c)
      this.markers[i].setContent(content)
    }
  },
  getMarkerContent: function (c) {
    var show = false
    var content = `<div>${c.index}  ${c.ciName}</div>`
    c.result.forEach(t => {
      if (this.showTypes.indexOf(t.type) == -1) {
        return
      }
      show = true
      let icon = this.getIcon(t.type)
      content += `<div>
      <img src="${icon}" style="width: 16px;height: 16px"/>
      ${t.typeName}：${t.count}个  占比：${(t.percent * 100).toFixed(2)}%
      </div>`
    });
    var mc = '<div>'
    mc += '<img src="./asset/mipmap/company.png" style="width: 30px;height: 30px"/>'
    if (show) {
      mc += '<div class="marker-content">'
      mc += content
      mc += '</div>'
    }
    mc += '</div>'

    return mc
  },
  getIcon: function (type) {
    switch (type) {
      case 1:
        return "./asset/mipmap/stink.png"
      case 2:
        return "./asset/mipmap/pungent.png"
      case 3:
        return "./asset/mipmap/dust.png"
      case 4:
        return "./asset/mipmap/plastics.png"
      case 5:
        return "./asset/mipmap/oil_paint.png"
      case 6:
        return "./asset/mipmap/other_smell.png"
      default:
        return "./asset/mipmap/other_smell.png"
    }
  },
  getMarkerContent2: function (c) {
    var content = ''
    // `<div>${c.ciIndex}  ${c.ciName}</div>`

    var icon = "./asset/mipmap/c_level_no.png",
      color = 'green'
    content += `<div style='color: ${color};'>${c.ciMainBusiness}</div>`
    var mc = '<div>'
    mc += `<img src="${icon}" style="width: 30px;height: 30px"/>`
    mc += '<div class="marker-content">'
    mc += content
    mc += '</div>'
    mc += '</div>'

    return mc
  },
  getMarkerContent3: function (c) {
    var content = ''
    // `<div>${c.ciIndex}  ${c.ciName}</div>`

    var icon = "./asset/mipmap/c_level_no.png",
      color = 'green'
    switch (c.risk) {
      case '低风险':
        color = 'green'
        icon = "./asset/mipmap/c_level_0.png"
        break;
      case '中风险':
        color = 'rgb(187, 108, 4)'
        icon = "./asset/mipmap/c_level_1.png"
        break;
      case '高风险':
        color = 'red'
        icon = "./asset/mipmap/c_level_2.png"
        break;
      default:
        icon = "./asset/mipmap/c_level_no.png"
        break;
    }
    content += `<div style='color: ${color};'>${c.risk}</div>`
    var mc = '<div>'
    mc += `<img src="${icon}" style="width: 30px;height: 30px"/>`
    mc += '<div class="marker-content">'
    mc += content
    mc += '</div>'
    mc += '</div>'

    return mc
  },
  _onZoom: function () {
    var context = mapController.complaintLayer
    var zoom = MapUtil._map.getZoom()
    if (zoom >= context.zoomLevel) {
      if (context.tags.indexOf(4) != -1) {
        MapUtil.addViews(context.markers4_1, false) 
      }
      if (context.tags.indexOf(5) != -1) {
        MapUtil.addViews(context.markers5_1, false)
      }
    } else {
      MapUtil.removeViews(context.markers4_1, false)
      MapUtil.removeViews(context.markers5_1, false)
    }
    context.lastZoom = zoom
  },
  zoomEvent: function (tag) {
    if (this.tags == undefined) {
      this.tags = []
    }
    var i = this.tags.indexOf(tag)
    if (i == -1) {
      this.tags.push(tag)
    } else {
      this.tags.splice(i, 1)
    }
    if (this.tags.length == 0) {
      MapUtil._map.off('zoomend', this._onZoom)
    } else {
      MapUtil._map.on('zoomend', this._onZoom)
    }
  }
}