<!--suppress ALL -->
<template>
  <div>
    <div class="overview-map-container">
      <!--地图-->
      <a-map-container ref="map" :center="center" :zoom="zoom" :base-layer="baseLayer" :style="{height:(bodyHeight-50)+'px'}" vid="overview" class="map-demo" @ready="mapReady">
        <!--报警点位-->
        <a-map-marker v-for="alarmWell of alarmWells" :visible="showAlarm && alarmWell.visible" :position="alarmWell.coordinates" :offset="alarmOffset">
          <el-image :src="alarmIcon" :style="{'width':alarmIconSize[0]+'px','height':alarmIconSize[1]+'px'}" fit="fill" @click="openAlarmWindow(alarmWell.wellId, alarmWell.coordinates)" />
        </a-map-marker>
        <!--搜索结果点标注-->
        <a-map-marker v-for="(marker,index) of searchMarkers" :position="marker.lnglat" :offset="alarmOffset">
          <div class="search-marker" :style="{'width':searchResultSize[0]+'px','height':searchResultSize[1]+'px'}" @click="openInfoWindow(marker.id, marker.lnglat, searchResultWindowOffset)">
            <el-image :src="searchResultIcon" class="search-marker-image" fit="fill" />
            <div class="search-marker-label">
              {{ index+1 }}
            </div>
          </div>
        </a-map-marker>
      </a-map-container>
      <!--搜索框-->
      <map-search-comp :list="resultList" placeholder="点位编号/名称/位置" @search="search" @change-page="searchPageChange" @click-item="searchItemClick" @clear="clearSearch" />
      <!--报警列表-->
      <alarm-list :show="showAlarm" :data="alarmList" @row-click="alarmRowClick" />
      <!--工具箱-->
      <tool-box :show="!loading" :layers="layers" :layer-checked="checkedLayer" :tool-menu="menus.menuList" @change-base-map="changeBaseMap" @layer-change="filterLayer" @click-menu="clickMenu" @close-menu-pop="closeAllPopup" />
      <!--数据筛选窗口-->
      <popup-data-filter :show="menus.dataFilterWindowShow" :well-type-list="wellTypeList" @filter="dataFilter" @close="closePopupDataFilter" />
      <!--坐标定位窗口-->
      <popup-location ref="popupLocation" :show="menus.locationWindowShow" @search="setCenter" @picker="pickerPosition" @close="closePopupLocation" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getWellType } from '@/api/well/well'
import { getWellListScope, getWellInfo, getAlarmsNowScope, getWellAlarms } from '@/api/overview/wellOverview'
import { toPixel, toLngLat, toSize } from '@/components/Amap/utils/convert-helper'
import DeptSelect from '../../components/DeptSelect/index'
import AMapContainer from '@/components/Amap/AMapContainer'
import AlarmInfoWindow from './components/infoWindowAlarm'
import WellInfoWindow from './components/infoWindowWell'
import AMapMarker from '@/components/Amap/AMapMarker'
import AlarmList from './components/alarmList'
import Vue from 'vue'
import ToolBox from '@/views/overview/components/toolBox'
import PopupDataFilter from '@/views/overview/components/popupDataFilter'
import PopupLocation from '@/views/overview/components/popupLocation'
import MapSearchComp from '@/views/overview/components/mapSearchComp'

export default {
  name: 'Overview',
  components: { MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList, AMapMarker, AMapContainer, DeptSelect },
  data() {
    return {
      map: null, // 地图对象
      baseLayer: 'gaode_vec', // 底图图层
      layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表
      checkedLayer: [], // 选中的图层
      center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
      zoom: 12, // 地图缩放比例
      type: this.baseConfig.showPointType, // 加载数据方式：massMarkers海量点或cluster聚合点
      refreshType: this.baseConfig.refreshType, // 刷新数据方式：clock定时器或websocket推送
      alarmIcon: require('@/assets/icons/icon-alarm1.png'), // 报警图标
      alarmIconSize: [30, 30], // 报警图标大小
      alarmOffset: [-15, -30], // 报警图标偏移量
      wellIcon: require('@/assets/overview/icon-location-small.png'), // 井图标
      wellIconSize: [16, 16], // 井图标大小
      wellOffset: [-8, -16], // 井偏移量
      massMarkerUrl: './static/overview/icon-location-small.png',
      massMarkerSize: [15, 15],
      massMarkerOffset: [8, 15],
      massMarkerWindowOffset: [0, -15],
      searchResultSize: [24, 30],
      searchResultOffset: [-12, -30],
      searchResultWindowOffset: [0, -30],
      searchResultIcon: require('@/assets/overview/pure-position-icon.png'), // 报警图标
      showAlarm: true, // 是否显示报警
      toolShow: false, // 工具栏是否显示
      menus: {
        menuList: [{ icon: 'search', menu: 'dataFilter', name: '数据筛选' }, { icon: 'coordinate', menu: 'location', name: '坐标定位' }],
        dataFilterWindowShow: false, // 数据筛选窗口是否显示
        locationWindowShow: false // 坐标定位窗口是否显示
      }, // 工具栏菜单
      listQuery: {
        keywords: '', // 关键字
        wellType: '', // 点位类型
        deptid: '' // 组织机构
      }, // 筛选条件
      count: 30, // 倒计时显示时间
      clock: null, // 计时器
      showWellType: false, // 是否显示点位类型下拉,默认边上
      wellTypeList: [], // 点位类型列表
      commonIcon: 'well-common-green', // 通用图标 绿
      commonIconAlarm: 'well-common-red', // 通用图标 红
      alarmListOri: [], // 原始报警列表
      alarmList: [], // 显示报警列表
      alarmWells: [], // 报警井列表
      resultList: [], // 搜索结果列表
      searchMarkers: [], // 当前搜索页展示marker集合
      latestAlarmTime: '', // 列表中最新报警事件
      alarmFirstAmount: true, // 是否初次加载报警
      firstAmount: true, // 是否第一次加载井数据
      loading: true, // 加载图标是否显示
      markers: [], // 所有井的点原始数据
      massMarks: null, // 海量点对象
      mapMarkers: [], // 查询结果列表
      clusters: [], // 聚合
      tempMarker: null,
      showClearBtn: false // 是否显示清除查询按钮
    }
  },
  computed: {
    ...mapGetters([
      'needRefresh',
      'bodyHeight'
    ])
  },
  watch: {
    needRefresh(val) { // 需要刷新报警
      if (val) {
        if (this.baseConfig.refreshType == 'websocket') {
          this.playAudio()
        }
        this.refreshAlarm()
      }
    },
    'menus.locationWindowShow'(val) { // 打开弹窗设置默认中心，关闭弹窗清空屏幕
      if (val) {
        this.$refs.popupLocation.setQuery(this.center)
      } else {
        this.map.remove(this.tempMarker)
      }
    }
  },
  created() {
    this.fetchWellType()
  },
  mounted() {
    this.resultList = []
  },
  beforeDestroy() {
    if (this.clock) {
      clearInterval(this.clock)
      this.clock = null
    }
  },
  methods: {
    // 初始化放这里
    mapReady(map) {
      this.map = map
      this.fetchWellList() // 加载全部井
      this.firstAmount = true
      this.toolShow = true
      this.refreshAlarm()
      if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
        setTimeout(() => { this.countDown() }, 1000)
      }
    },
    // 切换底图
    changeBaseMap(type) {
      this.baseLayer = type
    },
    // 倒计时函数
    countDown() {
      this.clock = setInterval(() => {
        this.count--
        if (this.count < 0) { // 当倒计时小于0时清除定时器
          this.refreshAlarm()
          this.count = this.baseConfig.refreshTime
        }
      }, 1000)
    },
    // 获取点位类型，显示点位类型下拉
    fetchWellType() {
      getWellType().then(response => {
        this.wellTypeList = []
        // 如果该用户支持的点位类型只有一个，则不显示该筛选框
        const supportWellTypes = this.$store.getters.wellTypes
        this.wellTypeList = response.data.filter(wellType => {
          return supportWellTypes.findIndex(item => item == wellType.value) > -1
        })
        const wellLayer = {
          id: 'well',
          name: '井图层',
          children: this.wellTypeList.map(item => {
            return {
              id: 'well-' + item.value,
              name: item.name
            }
          })
        }
        this.layers.splice(0, 1, wellLayer)
        if (this.baseConfig.showAllWell) {
          this.checkedLayer = [...this.checkedLayer, 'well', this.wellTypeList.map(item => 'well-' + item.value)]
        } else {
          this.checkedLayer = [...this.checkedLayer]
        }
        if (this.wellTypeList.length <= 1) {
          this.showWellType = false
        }
      })
    },
    /**
     * 数据筛选
     * @param listQuery 筛选条件
     * @param showMessage 是否告知筛选结果
     */
    dataFilter(listQuery, showMessage = true) {
      if (this.type === 'massMarkers') { // 过滤海量点
        this.filterMassMarker(listQuery, showMessage)
        this.filterAlarm(listQuery, showMessage)
      } else if (this.type === 'cluster') { // 过滤聚合点
        this.filterClusters(listQuery, showMessage)
        this.filterAlarm(listQuery, showMessage)
      }
    },
    // 清空查询
    clearSearch() {
      this.searchMarkers = []
      this.resultList = []
    },
    // 数据查询
    search(args) {
      const keywords = args[0]
      const clear = args[1]
      if (keywords === '' && !clear) {
        this.$message.warning('搜索条件不能为空')
      } else {
        this.resultList = this.markers.filter(item => {
          if (item.wellCode.includes(keywords) || item.wellName.includes(keywords) || item.position.includes(keywords)) {
            return true
          } else {
            return false
          }
        })
      }
    },
    // 搜索结果页面变化，触发地图展示列表中所有
    searchPageChange(currentMarkers) {
      // 增加查询展示图层
      this.searchMarkers = currentMarkers
    },
    // 点击搜索结果项居中，弹窗
    searchItemClick(marker) {
      this.center = marker.lnglat
      this.openInfoWindow(marker.id, marker.lnglat, this.searchResultWindowOffset)
    },
    // 过滤海量点，给markers赋visible值
    filterMassMarker(listQuery, showMessage = false) {
      const hideWellIds = []// 要隐藏的点位编号
      let center = [] // 待移动到的地图中心
      // 2. 整理查询条件
      const keywords = listQuery.keywords // 关键字
      const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : listQuery.wellType ? [listQuery.wellType] : [] // 点位类型
      let deptids = [] // 所有权属
      if (listQuery.deptid) {
        deptids = this.fetchDeptList(listQuery.deptid) // 获取所有下级
      }
      // 3.查询全部井，是否匹配，只要有一项不匹配则show为false
      for (const marker of this.markers) {
        let show = true
        // 关键字不为空，且没有匹配成功，不显示， 关键字匹配点位编号和位置
        if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.position.indexOf(keywords) !== -1)) {
          show = false
        }
        // 部门不为空， 且没有匹配成功，多部门匹配
        if (deptids.length > 0 && deptids.indexOf(marker.deptid) === -1) {
          show = false
        }
        // 点位类型不为空，且没有匹配成功
        if (wellTypes && wellTypes.length > 0 && wellTypes.indexOf(marker.wellType) === -1) {
          show = false
        }
        // 如果show为false，放入需要隐藏的井id列表
        if (show === false) {
          hideWellIds.push(marker.wellId)
        } else {
          center = marker.lnglat
        }
        marker.visible = show
      }
      this.resetMassMarker()
    },
    // 过滤报警
    filterAlarm(listQuery, showMessage = false) {
      const hideWellIds = []// 要隐藏的点位编号
      // 整理筛选条件
      const keywords = listQuery.keywords
      const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : listQuery.wellType ? [listQuery.wellType] : [] // 点位类型
      let deptids = [] // 所有权属
      if (listQuery.deptid) {
        deptids = this.fetchDeptList(listQuery.deptid) // 获取所有下级
      }
      // 查询报警的井
      for (const marker of this.alarmWells) {
        let show = true
        // 关键字不为空，且没有匹配成功，不显示， 关键字匹配点位编号和位置
        if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.position.indexOf(keywords) !== -1)) {
          show = false
        }
        // 部门不为空， 且没有匹配成功，多部门匹配
        if (deptids.length > 0 && deptids.indexOf(marker.deptid) === -1) {
          show = false
        }
        // 点位类型不为空，且没有匹配成功
        if (wellTypes && wellTypes.length > 0 && wellTypes.indexOf(marker.wellType) === -1) {
          show = false
        }
        // 如果show为false，放入需要隐藏的井id列表
        if (show === false) {
          hideWellIds.push(marker.wellId)
        }
        marker.visible = show
      }
      // 4.过滤报警marker：alarmWells  如果没有找到符合要求的井，直接将全部查询结果隐藏，并将所有报警隐藏，否则按照查询结果筛选需要隐藏的报警
      if (hideWellIds.length === this.alarmWells.length) {
        for (const alarmWell of this.alarmWells) {
          alarmWell.visible = false
        }
      } else {
        // 将报警隐藏
        for (const alarmWell of this.alarmWells) {
          if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
            alarmWell.visible = false
          } else {
            alarmWell.visible = true
          }
        }
      }
      // 5.过滤显示列表：alarmList
      this.alarmList = []
      if (hideWellIds.length > 0) { // 如果有要隐藏的井，过滤
        for (const alarm of this.alarmListOri) {
          const findFlag = hideWellIds.findIndex(code => code === alarm.wellId)
          if (findFlag === -1) {
            this.alarmList.push(alarm)
          }
        }
      } else { // 如果没有直接等于alarmListOri
        this.alarmList = this.alarmListOri
      }
    },
    // 初始化海量点，并不复制
    initMassMarker() {
      const { map, massMarkerUrl, massMarkerSize, massMarkerOffset, massMarkerWindowOffset } = this
      this.firstAmount = false
      // 海量点样式
      const style = { url: massMarkerUrl, anchor: toPixel(massMarkerOffset), size: toSize(massMarkerSize) }
      // 海量点初始化
      this.massMarks = new window.AMap.MassMarks([], {
        zIndex: 5, // 海量点图层叠加的顺序
        zooms: [3, 18], // 在指定地图缩放级别范围内展示海量点图层
        cursor: 'pointer',
        style: style // 设置样式对象
      })
      // this.massMarks.setData(this.markers)
      this.massMarks.setMap(map)
      // 点击弹窗
      this.massMarks.on('click', e => {
        this.openInfoWindow(e.data.id, e.data.lnglat, massMarkerWindowOffset)
      })
      console.log('初始化海量点完毕')
    },
    // 重置海量点，根据marker的visible属性，重置海量点图层数据
    resetMassMarker() {
      const { map } = this
      const markers = this.markers.filter(item => item.visible) // 过滤全部visible为true的显示
      if (markers.length == 0) {
        this.massMarks.clear()
      } else {
        this.massMarks.setData(markers)
      }
      // 将海量点添加至地图实例
      this.massMarks.setMap(map)
    },
    // 过滤图层
    filterLayer(checkedLayer) {
      // 1.过滤井图层
      if (this.type === 'massMarkers') {
        const wellTypes = checkedLayer.filter(item => item.indexOf('well-') > -1).map(item => item.substring(5))
        if (wellTypes && wellTypes.length > 0) this.filterMassMarker({ wellTypes: wellTypes }) // 加载海量点
      } else if (this.type === 'cluster') {
        this.filterClusters() // 加载聚合点
      }
      // 2.选中or没选中报警图层
      if (checkedLayer.indexOf('alarm') !== -1) {
        this.showAlarm = true
      } else {
        this.showAlarm = false
      }
    },
    // 加载聚合点
    mountClusters() {
      const self = this
      // 聚合点数据应该是一组包含经纬度信息的数组。lnglat 为经纬度信息字段，weight 字段为可选数据，表示权重值，以权重高的点为中心进行聚合。
      var points = this.markers
      const markers = []
      var icon = new window.AMap.Icon({
        size: toSize(20, 20), // 图标尺寸
        image: 'static/images/well/pin.svg', // Icon的图像
        imageSize: toSize(20, 20) // 根据所设置的大小拉伸或压缩图片
      })
      for (var i = 0; i < points.length; i += 1) {
        markers.push(new window.AMap.Marker({
          position: points[i]['lnglat'],
          icon: icon, // 添加 Icon 实例
          offset: toPixel(-10, 0)
        }))
      }
      // 添加聚合组件
      const map = aMapManager.getMap()
      const cluster = new window.AMap.MarkerClusterer(map, markers, {
        gridSize: 80,
        renderCluserMarker: self._renderCluserMarker,
        maxZoom: 16 })
    },
    // 清除聚合点
    clearClusters() {

    },
    _renderCluserMarker(context) {
      const count = this.markers.length
      const factor = Math.pow(context.count / count, 1 / 18)
      const div = document.createElement('div')
      const Hue = 180 - factor * 180
      const bgColor = 'hsla(' + Hue + ',100%,50%,0.9)'
      const fontColor = '#ffffff'
      const borderColor = 'hsla(' + Hue + ',100%,40%,1)'
      const shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
      div.style.backgroundColor = bgColor
      const size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
      div.style.width = div.style.height = size + 'px'
      div.style.border = 'solid 1px ' + borderColor
      div.style.borderRadius = size / 2 + 'px'
      div.style.boxShadow = '0 0 1px ' + shadowColor
      div.innerHTML = context.count
      div.style.lineHeight = size + 'px'
      div.style.color = fontColor
      div.style.fontSize = '14px'
      div.style.textAlign = 'center'
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
      context.marker.setContent(div)
    },
    // 获取全部井列表
    fetchWellList() {
      this.loading = true
      getWellListScope().then(response => {
        this.loading = false
        if (response.code === 200) {
          const wells = response.data
          if (wells.length > 0) {
            this.markers = []
            for (const well of wells) {
              const marker = {
                ...well,
                lnglat: [parseFloat(well.lngGaode), parseFloat(well.latGaode)],
                icon: this.commonIcon,
                visible: true,
                wellStatus: 'normal'
              }
              this.markers.push(marker)
            }
            if (this.type === 'massMarkers') {
              this.initMassMarker() // 加载海量点
            } else if (this.type === 'cluster' && this.checkedLayer.indexOf('well') > -1) {
              this.mountClusters() // 加载聚合点
            }
          }
        }
      })
    },
    // 刷新报警列表
    refreshAlarm() {
      console.log('refreshAlarm')
      this.count = this.baseConfig.refreshTime
      this.loading = true
      // 如果showAlarm为ture, 确保选中图层报警
      if (this.showAlarm && this.checkedLayer.indexOf('alarm') == -1) {
        this.checkedLayer.push('alarm')
      }
      getAlarmsNowScope().then(response => {
        if (response.code === 200) {
          this.loading = false
          // 判断最新报警时间，若和旧的最新时间不一样，则判断是否需要产生声音
          if (this.baseConfig.refreshType != 'websocket') {
            if (response.data.length > 0) {
              const latestTime = response.data[0].alarmTime
              console.log(latestTime, 'vs', this.latestAlarmTime)
              if (this.latestAlarmTime < latestTime) {
                // 如果不是初次加载并且声音开关开启状态
                if ((!this.alarmFirstAmount) && this.baseConfig.alarmSound) {
                  console.log('playAudio')
                  this.playAudio()
                }
                this.latestAlarmTime = latestTime
              }
            }
          }
          this.alarmFirstAmount = false // 初次加载完毕
          // 获取当前报警列表
          this.alarmListOri = response.data // 列表原始
          this.alarmList = response.data // 要显示的报警列表
          this.alarmWells = [] // 报警的井列表
          for (const alarm of response.data) {
            if (this.alarmWells.findIndex(item => item.wellCode === alarm.wellCode) == -1) {
              this.alarmWells.push({
                wellCode: alarm.wellCode,
                wellId: alarm.wellId,
                wellType: alarm.wellType,
                lngGaode: alarm.lngGaode,
                latGaode: alarm.latGaode,
                coordinates: [alarm.lngGaode, alarm.latGaode],
                position: alarm.position,
                visible: true
              })
            }
          }
          console.log('alarmWells Length', this.alarmWells.length)
        }
      })
    },
    /**
     * 打开报警弹窗
     * @param wellId 井id
     * @param coordinates 弹窗位置： [经度，纬度]
     * @param needCenter 是否需要将点居中
     */
    openAlarmWindow(wellId, coordinates, needCenter = false) {
      console.log('openAlarmWindow:' + wellId)
      if (this.needCenter) { // 如果需要居中
        this.center = coordinates
      }
      // 获取报警详情
      getWellAlarms(wellId).then(response => {
        if (response.code === 200) {
          const wellInfo = response.data
          const alarmInfo = {
            wellCode: response.data.wellCode,
            position: response.data.position,
            deptName: response.data.deptName,
            wellTypeName: response.data.wellTypeName,
            alarms: response.data.alarmList,
            deep: response.data.deep
          }
          const AlarmWindow = Vue.extend({
            render: h => h(AlarmInfoWindow, { props: { alarmInfo: alarmInfo }})
          })
          const alarmWindow = new AlarmWindow().$mount()
          const infoWindow = new window.AMap.InfoWindow({
            content: alarmWindow.$el, // 显示内容
            offset: [0, this.alarmOffset[1]], // 偏移
            autoMove: true // 是否自动调整窗体到视野内
          })
          infoWindow.open(this.map, new toLngLat(coordinates))
        }
      })
    },
    /**
     * 打开井详情弹窗
     * @param wellId 井id
     * @param coordinates 弹窗位置： [经度，纬度]
     * @param offsetY 弹窗Y轴偏移，为负值
     */
    openInfoWindow(wellId, coordinates, offset) {
      this.clearInfoWindow()
      // 首先获取井详情
      getWellInfo(wellId).then(response => {
        if (response.code === 200) {
          const wellInfo = { ...response.data }
          // 加载弹窗组件
          const WellInfo = Vue.extend({
            render: h => h(WellInfoWindow, { props: { wellInfo: wellInfo }})
          })
          const wellWindow = new WellInfo().$mount()
          const infoWindow = new window.AMap.InfoWindow({
            content: wellWindow.$el, // 显示内容
            offset: offset, // 偏移
            autoMove: true // 是否自动调整窗体到视野内
          })
          infoWindow.open(this.map, new toLngLat(coordinates))
        }
      })
    },
    // 关闭所有弹窗
    clearInfoWindow() {
      const { map } = this
      map.clearInfoWindow()
    },
    // 点击报警列表
    alarmRowClick(row) {
      console.log('alarmRowClick')
      const wellId = row.wellId
      for (const alarmWell of this.alarmWells) {
        if (alarmWell.wellId === wellId) {
          // this.center = alarmWell.coordinates
          if (this.zoom < 16) {
            this.zoom = 16
          }
          this.center = alarmWell.coordinates
          this.openAlarmWindow(alarmWell.wellId, alarmWell.coordinates, true)
        }
      }
    },
    // 点击工具箱菜单, menu:{menu:'xxx', name:''}, 建议菜单menu属性的命名与自定义弹窗的show属性名称保持同一规则
    clickMenu(menu) {
      this.closeAllPopup()
      const key = menu.menu + 'WindowShow'
      const obj = {}
      obj[key] = true // 将该值置为false, 需要借助obj中转
      Object.assign(this.menus, obj)
    },
    // 关闭所有菜单点出的弹窗
    closeAllPopup() {
      for (const key in this.menus) {
        if (key.indexOf('WindowShow') > -1) {
          // 将该值置为false, 需要借助obj中转
          const obj = {}
          obj[key] = false
          Object.assign(this.menus, obj)
        }
      }
    },
    // 关闭数据筛选弹窗
    closePopupDataFilter() {
      Object.assign(this.menus, { dataFilterWindowShow: false })
    },
    // 坐标定位，居中，绘点
    setCenter(position) {
      const { searchResultOffset, searchResultIcon, searchResultSize } = this
      this.center = position
      const icon = new window.AMap.Icon({
        size: toSize(searchResultSize), // 图标尺寸
        image: searchResultIcon, // Icon的图像
        imageSize: toSize(searchResultSize) // 根据所设置的大小拉伸或压缩图片
      })
      const marker = new window.AMap.Marker({
        icon: icon,
        position: position,
        offset: toPixel(searchResultOffset)
      })
      marker.setMap(this.map)
      this.tempMarker = marker
    },
    // 坐标拾取， 在地图上绘点
    pickerPosition() {
      const { searchResultOffset, searchResultIcon, searchResultSize, center } = this
      const icon = new window.AMap.Icon({
        size: toSize(searchResultSize), // 图标尺寸
        image: searchResultIcon, // Icon的图像
        imageSize: toSize(searchResultSize) // 根据所设置的大小拉伸或压缩图片
      })
      const marker = new window.AMap.Marker({
        icon: icon,
        position: center,
        offset: toPixel(searchResultOffset),
        draggable: true
      })
      marker.on('dragend', e => {
        const position = [e.lnglat.lng, e.lnglat.lat]
        this.$refs.popupLocation.setQuery(position)
      })
      marker.setMap(this.map)
      this.tempMarker = marker
    },
    // TODO: 关闭坐标定位窗口， 清除地图上的标注
    closePopupLocation() {
      Object.assign(this.menus, { locationWindowShow: false })
    },
    // 获取当前deptid的所有下级id,仅最多支持3级
    fetchDeptList(deptid) {
      console.log('fetchDeptList')
      const deptids = [deptid] // 储存了该pid和其子集
      const deptlist = this.$refs.deptSelect.fetchDeptTree()
      for (const dept of deptlist) {
        if (dept.pid === deptid) {
          deptids.push(dept.id)
        }
      }
      const result = []
      // 查找所有列表中有没有deptids里面的本人或子集
      if (deptlist.length > 0) {
        for (const dept of deptlist) {
          if (deptids.indexOf(dept.id) !== -1) {
            result.push(dept.id)
          } else if (deptids.indexOf(dept.pid) !== -1) {
            result.push(dept.id)
          }
        }
      }
      console.log(result)
      return result
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
// 查询框
.map-search-div{
  position: absolute;
  z-index: 100;
  padding: 5px 20px;
  background-color: rgba(244, 244, 244, 0.9);
  /*left: 90px;*/
  .el-form-item{
    margin-bottom: 0px;
  }
}
// 刷新框
.function-div{
  position: absolute;
  right: 10px;
  top: 7px;
  z-index: 1100;
  padding: 10px;
  color: #ce8b74;
  font-size: 14px;
  /*background-color: rgba(244, 233, 230, 1.0);*/
  .font-red{
    color: red;
    font-weight: bold;
  }
  .el-icon-refresh:hover{
    color: red;
    font-weight: bold;
    cursor: pointer;
  }
}
// 刷新框
.refresh-div{
  position: absolute;
  right: 10px;
  top: 7px;
  z-index: 100;
  padding: 10px;
  color: #ce8b74;
  font-size: 14px;
  background-color: rgba(244, 233, 230, 1.0);
  .font-red{
    color: red;
    font-weight: bold;
  }
  .el-icon-refresh:hover{
    color: red;
    font-weight: bold;
    cursor: pointer;
  }
}
// 地图
.overview-map-container{
  width: 100%;
  .map-demo{
    width: 100%;
    .svg-icon{
      width: 20px;
      height: 20px;
    }
    .alarm-icon{
      width: 29px;
      height: 30px;
    }
    .nomal-info-window{
      background-color: pink;
    }

  }
}

.search-marker{
  position: relative;
  .search-marker-image{
    width: 100%;
    height: 100%;
  }
  .search-marker-label{
    position:absolute;
    font-size: 14px;
    font-weight: 600;
    color:#FFF;
    z-index:50;
    top: 4px;
    left: 50%;
    transform: translateX(-50%)
  }
}
</style>