<template>
  <div class="current-container">
    <div class="right">
      <div id="current-map"></div>
    </div>
    <t-modal :visibled.sync="modal" title="指派救援人员" >
      <t-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" label-position="left">
        <t-form-item label="救援人员" prop="rescue">
          <t-select v-model="formValidate.rescue" placeholder="请选择">
            <t-option v-for="(item, index) in rescuer" :key="index+'rescuer'" :value="item.workEmployeeId">{{ item.workEmployeeName }}</t-option>
          </t-select>
        </t-form-item>
      </t-form>
      <div slot="footer">
        <t-button @click="cancel">取消</t-button>
        <t-button class="submit-button" @click="appointSubmit()">指派</t-button>
      </div>
    </t-modal>
  </div>
</template>
<script>
import './current.scss'
import {GIS_SEA_LAYER_URL, GIS_SEA_URL} from '../../constants'
import services from '../../conf/services'
import EventBus from '../../bus'
export default {
  data() {
    return {
      alarmList: [
        {
          name: '张三',
          type: 1,
          number: 'ZDBH0001',
          rescue: '',
          alarmTime: '2020.08.13 08:24:32',
          positionTime: '2020.08.13 08:24:32'
        },
        {
          name: '张三',
          type: 2,
          number: 'ZDBH0001',
          rescue: '',
          alarmTime: '2020.08.13 08:24:32',
          positionTime: '2020.08.13 08:24:32'
        },
        {
          name: '张三',
          type: 2,
          number: 'ZDBH0001',
          rescue: '海事局A',
          alarmTime: '2020.08.13 08:24:32',
          positionTime: '2020.08.13 08:24:32'
        },
        {
          name: '张三',
          type: 2,
          number: 'ZDBH0001',
          rescue: '',
          alarmTime: '2020.08.13 08:24:32',
          positionTime: '2020.08.13 08:24:32'
        }
      ],
      activeIndex: 0,
      modal: false,
      formValidate: {
        rescue: ''
      },
      ruleValidate: {
        rescue: [{
          required: true,
          message: '救援人员不能为空',
          trigger: 'blur',
          validator(rule, value, callback) {
            console.log(value)
            if (!value) {
              callback(rule.message)
            } else {
              callback()
            }
          }
        }]
      },
      map: null,
      alarmPoint: null,
      rescuePoint: null,
      polyline: null,
      personLayer: new Ai.FeatureGroup(),
      rescuer: []
    }
  },
  mounted() {
    this.loadMap()
    EventBus.$on('person', (msg) => { // 获取镜屏推送消息
      console.log(msg)
      this.changePoint(msg)
    })
    EventBus.$on('reload', (msg) => { // 获取镜屏推送消息
      this.personLayer.eachLayer(layer => {
        this.map.removeLayer(layer)
        this.map.closePopup()
      })
      this.load()
    })
    console.log(this.getDurationTime('2020-11-21 12:54:55'))
  },
  methods: {
    loadMap() {
      window.Vue = this
      this.map = new Ai.Map('current-map', {
        ak: this.$store.getters.getGisToken,
        center: this.$store.getters.getMapParam.center,
        zoom: this.$store.getters.getMapParam.zoom
      })
      var maplayer = null
      maplayer = Ai.TileLayer(GIS_SEA_LAYER_URL)
      this.map.addLayer(maplayer)
      var la = Ai.WMTSLayer(GIS_SEA_URL)
      this.map.addLayer(la)
      this.load()
    },
    load() {
      this.personLayer = new Ai.FeatureGroup()
      this.$test
        .post(services.alarm.LOAD_ALARM_DETAILS, '')
        .then((res) => {
          console.log(res)
          this.map.addLayer(this.personLayer)
          res.data.forEach(element => {
            var alarmPoint = null
            if (element.rescueTargetEntityPosition) {
              alarmPoint = this.point(element)
            }
            if (element.rescueEntityPosition) {
              var rescuerPoint = this.rescuerPoint(element)
              var lineWktStr = 'LINESTRING ( ' + element.rescueTargetEntityPosition.longitude + ' ' + element.rescueTargetEntityPosition.latitude + ',' + element.rescueEntityPosition.longitude + ' ' + element.rescueEntityPosition.latitude + ')'
              var lineLayer = new Ai.Polyline(lineWktStr, {color: 'red', opacity: 1.0})
              alarmPoint.getAttributes().lineLayer = lineLayer
              rescuerPoint.getAttributes().lineLayer = lineLayer
              alarmPoint.getAttributes().point = rescuerPoint
              rescuerPoint.getAttributes().point = alarmPoint
              this.map.addLayer(lineLayer)
            }
          })
          // this.map.setViewPort([this.personLayer])
        })
        .catch((res) => {
          // 请求失败处理...
        })
      this.$test
        .post(services.alarm.LOAD_MAP_AREA_TOOL, {})
        .then((res) => {
          console.log(res)
          res.data.mapAreaList.forEach(e => {
            var typeObj = res.data.mapAreaTypeList.filter(type => {
              return e.businessType == type.mapAreaBusinessType
            })
            var polygon = Ai.Polygon(e.mapAreaContent, {color: typeObj[0].color})
            this.map.addLayer(polygon)
          })
          res.data.toolList.forEach(e => {
            var typeObj = res.data.toolTypeList.filter(type => {
              return e.resourceToolType == type.resourceToolType
            })
            var point = Ai.Point([e.latitude, e.longitude], {
              icon: Ai.Icon({
              // 设置图标URL路径
                iconUrl: typeObj[0].iconUrl,
                // 设置图标大小
                iconSize: [20, 20],
                // 设置点对象和图标的相对偏移量
                iconAnchor: [100, 100]
              })
            })
            this.map.addLayer(point)
          })
        })
        .catch((res) => {
        // 请求失败处理...
        })
    },
    changePoint(msg) {
      var obj = JSON.parse(msg)
      if (obj.data.currentEntityPosition) {
        var targetPoint = null
        var flag = true
        this.personLayer.eachLayer((point) => {
          if (flag) {
            if (point.getAttributes().rescueEntityPosition && (point.getAttributes().rescueEntityPosition.entityId == obj.data.currentEntityPosition.entityId) && !point.target) { // 救援人
              flag = false
              point.setLatLng([obj.data.currentEntityPosition.latitude, obj.data.currentEntityPosition.longitude])
              point.getAttributes().rescueEntityPosition = obj.data.currentEntityPosition
              if (point.getAttributes().lineLayer) {
                var lineWktStr = 'LINESTRING ( ' + obj.data.currentEntityPosition.longitude + ' ' + obj.data.currentEntityPosition.latitude + ',' + point.getAttributes().rescueTargetEntityPosition.longitude + ' ' + point.getAttributes().rescueTargetEntityPosition.latitude + ')'
                console.log(lineWktStr)
                point.getAttributes().lineLayer.setPoints(lineWktStr)
              }
              if (point.popup) {
                point.popup.setLatLng([obj.data.currentEntityPosition.latitude, obj.data.currentEntityPosition.longitude])
                var tips
                tips = '<div class="hand-alarm">救援人员</div>'
                var content =
                  '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>' + obj.data.currentEntityPosition.name + '</div>' + tips + '</div><div class="middle">' +
                  '<div class="row">' +
                  '<div>经度</div>' +
                  '<div>' + obj.data.currentEntityPosition.longitude + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>纬度</div>' +
                  '<div>' + obj.data.currentEntityPosition.latitude + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>最新定位时间</div>' +
                  '<div>' + this.formatDate(new Date(obj.data.currentEntityPosition.createDate)) + '</div>' +
                  '</div></div></div>' +
                  '</div></div>'
                point.popup.setContent(content).openOn(this.map)
              }
            } else if (point.getAttributes().rescueTargetEntityPosition && (point.getAttributes().rescueTargetEntityPosition.entityId == obj.data.currentEntityPosition.entityId) && point.target) { // 报警人
              flag = false
              point.setLatLng([obj.data.currentEntityPosition.latitude, obj.data.currentEntityPosition.longitude])
              point.getAttributes().rescueTargetEntityPosition = obj.data.currentEntityPosition
              if (point.getAttributes().lineLayer) {
                var lineWktStr = 'LINESTRING ( ' + obj.data.currentEntityPosition.longitude + ' ' + obj.data.currentEntityPosition.latitude + ',' + point.getAttributes().rescueEntityPosition.longitude + ' ' + point.getAttributes().rescueEntityPosition.latitude + ')'
                console.log(lineWktStr)
                point.getAttributes().lineLayer.setPoints(lineWktStr)
              }
              if (point.popup) {
                point.popup.setLatLng([obj.data.currentEntityPosition.latitude, obj.data.currentEntityPosition.longitude])
                var e = point.getAttributes()
                console.log(e.terminalId)
                var tips
                var callHelp = ''
                var other = ''
                var className = 'alarm'
                if (e.businessType == '2') {
                  className = 'hand-alarm'
                } else if (e.businessType == '4') {
                  className = 'offline'
                }
                tips = '<div class="' + className + '">' + e.businessTypeZH + '</div>'
                other = '<div class="row sos">' +
                '<div>求救时间</div>' +
                '<div>' + e.alarmTime + '</div>' +
                '</div>' + '<div class="row sos">' +
                '<div>求救时长</div>' +
                '<div>' + this.getDurationTime(e.alarmTime) + '</div>' +
                '</div>'
                if (e.isAssignAlarm == '0') {
                  callHelp = '<div style="display:flex;">' +
                "<button class='point-out' onClick='window.Vue.appoint(" + e + ")'><i style='font-size: 20px;' class='aidicon aidicon-user-outline'></i>指派</button>" +
                "<button class='close-confirm' onClick='window.Vue.close(" + e + ")'><i style='font-size: 20px;' class='aidicon aidicon-close'></i>关闭</button>" +
                '</div>'
                } else {
                  callHelp = '<div style="display:flex;justify-content: flex-end;">' +
                "<button class='close-confirm' onClick='window.Vue.close(" + e + ")'><i style='font-size: 20px;' class='aidicon aidicon-close'></i>关闭</button>" +
                '</div>'
                }
                var content = '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>' + e.rescueTargetEntityPosition.name + '</div>' + tips + '</div><div class="middle"><div class="row">' +
                  '<div>终端编号</div>' +
                  '<div>' + e.terminalId + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>经度</div>' +
                  '<div>' + e.rescueTargetEntityPosition.longitude + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>纬度</div>' +
                  '<div>' + e.rescueTargetEntityPosition.latitude + '</div>' +
                  '</div>' + other +
                  '<div class="row">' +
                  '<div>最新定位时间</div>' +
                  '<div>' + e.alarmTime + '</div>' +
                  '</div></div></div>' + callHelp +
                  '</div></div>'
                point.popup.setContent(content).openOn(this.map)
              }
            }
            if (!point.getAttributes().rescueEntityPosition) {
              if (point.getAttributes().rescueWorkEmployeeRoleId == obj.data.currentEntityPosition.entityId) {
                flag = false
                targetPoint = point
              }
            }
          }
        })
        if (targetPoint) {
          var rescuerPoint = this.rescuePoint({rescueEntityPosition: obj.data.currentEntityPosition})
          var lineWktStr = 'LINESTRING ( ' + obj.data.currentEntityPosition.longitude + ' ' + obj.data.currentEntityPosition.latitude + ',' + targetPoint.getAttributes().rescueTargetEntityPosition.longitude + ' ' + targetPoint.getAttributes().rescueTargetEntityPosition.latitude + ')'
          var lineLayer = new Ai.Polyline(lineWktStr, {color: 'red', opacity: 1.0})
          targetPoint.getAttributes().lineLayer = lineLayer
          rescuerPoint.getAttributes().lineLayer = lineLayer
          targetPoint.getAttributes().point = rescuerPoint
          rescuerPoint.getAttributes().point = targetPoint
          this.map.addLayer(lineLayer)
        }
      }
    },
    point(e) {
      console.log(e)
      var icon, tips
      var callHelp = ''
      var other = ''
      var className = 'alarm'
      icon = '/static/images/sosworker.png'
      if (e.businessType == '2') {
        className = 'hand-alarm'
      } else if (e.businessType == '4') {
        className = 'offline'
      }
      tips = '<div class="' + className + '">' + e.businessTypeZH + '</div>'
      other = '<div class="row sos">' +
                '<div>求救时间</div>' +
                '<div>' + e.alarmTime + '</div>' +
                '</div>' + '<div class="row sos">' +
                '<div>求救时长</div>' +
                '<div>' + e.durationTime + '</div>' +
                '</div>'
      if (e.isAssignAlarm == '0') {
        callHelp = '<div style="display:flex;">' +
                "<button class='point-out' onClick='window.Vue.appoint(" + JSON.stringify(e) + ")'><i style='font-size: 20px;' class='aidicon aidicon-user-outline'></i>指派</button>" +
                "<button class='close-confirm' onClick='window.Vue.close(" + JSON.stringify(e) + ")'><i style='font-size: 20px;' class='aidicon aidicon-close'></i>关闭</button>" +
                '</div>'
      } else {
        callHelp = '<div style="display:flex;justify-content: flex-end;">' +
                "<button class='close-confirm' onClick='window.Vue.close(" + JSON.stringify(e) + ")'><i style='font-size: 20px;' class='aidicon aidicon-close'></i>关闭</button>" +
                '</div>'
      }

      var point = Ai.Point([e.rescueTargetEntityPosition.latitude, e.rescueTargetEntityPosition.longitude], {
        icon: Ai.DivIcon({
          html: '<img src="' + icon + '"/>',
          className: 'myicon-lv',
          // 设置图标大小
          iconSize: [20, 20],
          // 设置点对象和图标的相对偏移量
          iconAnchor: [10, 20]
        })
      })
      point.setAttributes(e)
      var content =
                  '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>' + e.rescueTargetEntityPosition.name + '</div>' + tips + '</div><div class="middle"><div class="row">' +
                  '<div>终端编号</div>' +
                  '<div>' + e.terminalId + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>经度</div>' +
                  '<div>' + e.rescueTargetEntityPosition.longitude + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>纬度</div>' +
                  '<div>' + e.rescueTargetEntityPosition.latitude + '</div>' +
                  '</div>' + other +
                  '<div class="row">' +
                  '<div>最新定位时间</div>' +
                  '<div>' + e.alarmTime + '</div>' +
                  '</div></div></div>' + callHelp +
                  '</div></div>'
      var popup = Ai.Popup({
        minWidth: 300,
        offset: [0, -10],
        autoClose: false,
        closeButton: true
      })
        // 设置弹出框弹出位置
        .setLatLng(point.getLatLng())
        // 设置弹出框弹出内容
        .setContent(content)
        .openOn(this.map)
      point.on('click', (pointE) => {
        popup.openOn(this.map)
      })
      point.target = true
      point.popup = popup
      this.personLayer.addLayer(point)
      return point
    },
    rescuerPoint(e) {
      var icon, tips
      icon = '/static/images/outlineworker.png'
      tips = '<div class="hand-alarm">救援人员</div>'
      var point = Ai.Point([e.rescueEntityPosition.latitude, e.rescueEntityPosition.longitude], {
        icon: Ai.DivIcon({
          html: '<img src="' + icon + '"/>',
          className: 'myicon-lv',
          // 设置图标大小
          iconSize: [20, 20],
          // 设置点对象和图标的相对偏移量
          iconAnchor: [10, 20]
        })
      })
      point.setAttributes(e)
      var content =
                  '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>' + e.rescueEntityPosition.name + '</div>' + tips + '</div><div class="middle">' +
                  '<div class="row">' +
                  '<div>经度</div>' +
                  '<div>' + e.rescueEntityPosition.longitude + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>纬度</div>' +
                  '<div>' + e.rescueEntityPosition.latitude + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>最新定位时间</div>' +
                  '<div>' + e.rescueEntityPosition.doneDate + '</div>' +
                  '</div></div></div>' +
                  '</div></div>'
      var popup = Ai.Popup({
        minWidth: 300,
        offset: [0, -10],
        autoClose: false,
        closeButton: true
      })
      // 设置弹出框弹出位置
      popup.setLatLng(point.getLatLng())
      // 设置弹出框弹出内容
      popup.setContent(content)
      popup.openOn(this.map)
      point.target = false
      point.popup = popup
      point.on('click', (pointE) => {
        popup.openOn(this.map)
      })
      this.personLayer.addLayer(point)
      return point
    },
    formatDate(date) {
      var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
      var day = (date.getDate()) < 10 ? '0' + (date.getDate()) : (date.getDate())
      var hour = (date.getHours()) < 10 ? '0' + (date.getHours()) : (date.getHours())
      var minutes = (date.getMinutes()) < 10 ? '0' + (date.getMinutes()) : (date.getMinutes() + 1)
      var seconds = (date.getSeconds()) < 10 ? '0' + (date.getSeconds()) : (date.getSeconds())
      return date.getFullYear() + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
    },
    getDurationTime(time) {
      let date = new Date(time)
      let diff = (new Date().getTime() - date.getTime()) / 1000
      return Math.floor(diff / 3600) + '小时' + Math.floor((diff - Math.floor(diff / 3600) * 3600) / 60) + '分钟'
    },
    showModal(item) {
      this.modal = true
    },
    cancel() {
      this.modal = false
    },
    appoint(item) { // 打开指派Modal
      this.modal = true
      this.$test
        .post(services.organization.BIND_DEVICE, {})
        .then((res) => {
          console.log(res)
          this.rescuer = res.data
        })
        .catch((res) => {
          // 请求失败处理...
        })
      this.appointAlarm = item
    },
    appointSubmit() { // 指派
      console.log(this.formValidate.rescue)
      this.$refs['formValidate'].validate(valid => {
        console.log(valid)
        if (valid) {
          this.$test
            .post(services.alarm.ASSIGN_RESCUER, {workTaskId: this.appointAlarm.workTaskId, rescuersId: this.formValidate.rescue})
            .then((res) => {
              this.modal = false
              this.personLayer.eachLayer(layer => {
                this.map.removeLayer(layer)
                this.map.closePopup()
              })
              this.load()
              // var alarmPoint = this.rescuerPoint({rescueEntityPosition: res.data})
              // var lineWktStr = 'LINESTRING ( ' + res.data.longitude + ' ' + res.data.latitude + ',' + this.appointAlarm.rescueTargetEntityPosition.longitude + ' ' + this.appointAlarm.rescueTargetEntityPosition.latitude + ')'
              // var lineLayer = new Ai.Polyline(lineWktStr, {color: 'red', opacity: 1.0})
              // this.personLayer.addLayer(alarmPoint)
              // this.map.addLayer(lineLayer)
              // var that = this
              // this.personLayer.eachLayer(layer => {
              //   if (layer.getAttributes().rescueTargetEntityPosition.entityId === that.appointAlarm.rescueTargetEntityPosition.entityId) {
              //     var className = 'alarm'
              //     if (layer.getAttributes().businessType == '2') {
              //       className = 'hand-alarm'
              //     } else if (layer.getAttributes().businessType == '4') {
              //       className = 'offline'
              //     }
              //     var tips = '<div class="' + className + '">' + layer.getAttributes().businessTypeZH + '</div>'
              //     var content =
              //     '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>' + layer.getAttributes().rescueTargetEntityPosition.name + '</div>' + tips + '</div><div class="middle"><div class="row">' +
              //     '<div>终端编号</div>' +
              //     '<div>' + layer.getAttributes().terminalId + '</div>' +
              //     '</div>' +
              //     '<div class="row">' +
              //     '<div>经度</div>' +
              //     '<div>' + layer.getAttributes().rescueTargetEntityPosition.longitude + '</div>' +
              //     '</div>' +
              //     '<div class="row">' +
              //     '<div>纬度</div>' +
              //     '<div>' + layer.getAttributes().rescueTargetEntityPosition.latitude + '</div>' +
              //     '</div>' + '<div class="row sos">' +
              //   '<div>求救时间</div>' +
              //   '<div>' + layer.getAttributes().alarmTime + '</div>' +
              //   '</div>' + '<div class="row sos">' +
              //   '<div>求救时长</div>' +
              //   '<div>' + 1 + 'min</div>' +
              //   '</div>' +
              //     '<div class="row">' +
              //     '<div>最新定位时间</div>' +
              //     '<div>' + layer.getAttributes().alarmTime + '</div>' +
              //     '</div></div></div>' + '<div style="display:flex;justify-content: flex-end;">' +
              //   "<button class='close-confirm' onClick='window.Vue.close(" + JSON.stringify(layer.getAttributes()) + ")'><i style='font-size: 20px;' class='aidicon aidicon-close'></i>关闭</button>" +
              //   '</div>' +
              //     '</div></div>'
              //     layer.getAttributes().popup.setContent(content).openOn(this.map)
              //     alarmPoint.getAttributes().lineLayer = lineLayer
              //     layer.getAttributes().lineLayer = lineLayer
              //     alarmPoint.getAttributes().point = layer
              //     layer.getAttributes().point = alarmPoint
              //   }
              // })
            })
            .catch((res) => {
              // 请求失败处理...
            })
        }
      })
    },
    close(item) {
      this.$Confirm.confirm({
        title: '确认要关闭' + item.rescueTargetEntityPosition.name + item.businessTypeZH + '吗？',
        content: '关闭后将不再进行报警显示',
        ok: () => {
          console.log(item)
          this.$test
            .post(services.alarm.CLOSE_RESCUE, {workTaskId: item.workTaskId, isAssignAlarm: item.isAssignAlarm})
            .then((res) => {
              console.log(res)
              this.personLayer.eachLayer(layer => {
                this.map.removeLayer(layer)
                this.map.closePopup()
              })
              this.load()
              // var chooseLayer
              // this.personLayer.eachLayer(layer => {
              //   if (layer.getAttributes().rescueTargetEntityPosition.entityId === item.rescueTargetEntityPosition.entityId) {
              //     chooseLayer = layer
              //     if (layer.getAttributes().point) {
              //       this.map.removeLayer(layer.getAttributes().point)
              //       this.map.closePopup(layer.getAttributes().point.popup)
              //       this.map.removeLayer(layer.getAttributes().lineLayer)
              //     }
              //   }
              // })
              // this.personLayer.removeLayer(chooseLayer)
              // if (chooseLayer.getAttributes().point) {
              //   this.personLayer.removeLayer(chooseLayer.getAttributes().point)
              // }
              // this.map.closePopup(chooseLayer.popup)
            })
            .catch((res) => {
            // 请求失败处理...
            })
        },
        cancel: () => {
          console.log('点击了取消')
        }
      })
    }
  }
}

</script>