<!--suppress ALL -->
<template>
  <div style="overflow: hidden;height: 100%" class="map-gz">
    <mars3d-map v-loading="mapLoading" :basemap="basemap" map-key="gz" @onload="onMapload" />
    <div class="cover">
      <div v-for="(item,index) in layerName" :key="item" class="cover-item" :style="index>7&&index<10?{'width':'100%'}:{}">
        <span v-if="index<=6" :style="{color: colors[index],fontWeight: 600}">—</span>
        <span v-else><img :src="'/../../../static/images/'+ layerName[index] +'.png'" style="width: 17px;height:17px"/></span>
          {{item}}
      </div>
    </div>
    <div class="overview-map-container">
      <!--搜索框-->
      <map-search-comp :list="resultList" placeholder="点位编号/名称/位置" style="background: #00000000" @search="search" @change-page="searchPageChange" @click-item="searchItemClick" @clear="clearSearch" />
      <div style="width: 230px; position: absolute;top:0px; right: 10px;display: flex">
        <i class="el-icon-map-location circle_btn" @click="setCenter(center)" />
        <el-slider v-model="alpha" style="width: 180px;margin-left: 10px" />
      </div>
      <!--报警列表-->
      <alarm-list :show="showAlarm" :data="alarmList" @row-click="alarmRowClick" />
      <!--工具箱-->
      <tool-box style="position: absolute; width:300px;top:25px;right: 0px" :is3-d="true" :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-location :is3-d="true" 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 { getWellList, getWellInfo, getAlarmsNow, getWellAlarms } from '@/api/overview/wellOverview'
import { getDeviceAllList, getDeviceType } from '@/api/device/device'
import { toPixel, toLngLat, toSize } from '@/components/Amap/utils/convert-helper'
import AlarmInfoWindow from './components/infoWindowAlarm'
import WellInfoWindow from './components/infoWindowWell'
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'
import axios from 'axios'

import * as Cesium from 'mars3d-cesium'
import 'mars3d/dist/mars3d.css'
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
import * as mars3d from 'mars3d'
import Mars3dMap from '@/components/Mars3D/Mars3dMap'

import store from '@/store'
import { breadcrumb } from '@/settings'
import { RSAencrypt } from '@/utils/security'
import {polylineC, polylineVolumeP} from "@/components/Mars3D/utils/ArcGisWfsLayer";
import {
  createPointModelLayer,
  createModelLayer,
  createPointLayer, createModelLayerAsync
} from "@/components/Mars3D/utils/GeoJsonLayer";
import {Tetrahedron} from "@/components/Mars3D/utils/GraphicLayer";

const line_layer = []
const line_layer_3D = []
let point_layer_3D = []
let dev_layer = []
const wellLoc = {}
let underground = null
let alarm_layer = null
export default {
  name: 'Overview3D',
  components: { Mars3dMap, MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList },
  data() {
    return {
      showAllWells: false,
      initWell: false, // 是否初始化井信息
      showLine: true,
      basemap: 1113,
      colors: ['#7f0000', '#804000', '#ff7fe9', '#ff7fe9', '#00bfff', '#00ff00', '#ff0000', '#00ff00', '#ff0000'],
      layerName:
        ['雨水管线', '污水管线', '燃气管线','路灯管线', '给水管线', '电信管线', '电力管线',
          '井盖状态监测仪', '燃气智能监测终端', '消防栓防盗水监测仪', '液位监测仪', '噪声记录仪'],
      baseLayer: 'gaode_vec', // 底图图层
      layers: [{ id: 'line', name: '管线图层', children: [] }, { id: 'dev', name: '设备图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表
      checkedLayer: [], // 选中的图层
      center: ['114.88', '25.68'], // 地图中心
      showLine: false,
      showModel: false,
      // center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
      type: this.baseConfig.showPointType, // 加载数据方式：massMarkers海量点或cluster聚合点
      refreshType: this.baseConfig.refreshType, // 刷新数据方式：clock定时器或websocket推送
      searchResultSize: [24, 30],
      searchResultOffset: [-12, -30],
      mapLoading: true,
      searchResultIcon: require('@/assets/overview/pure-position-icon.png'), // 报警图标
      showAlarm: true, // 是否显示报警
      alpha: 80,
      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: [], // 点位类型列表
      alarmList: [], // 显示报警列表
      alarmWells: [], // 报警井列表
      resultList: [], // 搜索结果列表
      searchMarkers: [], // 当前搜索页展示marker集合
      latestAlarmTime: '', // 列表中最新报警事件
      alarmFirstAmount: true, // 是否初次加载报警
      firstAmount: true, // 是否第一次加载井数据
      loading: true, // 加载图标是否显示
      markers: [], // 所有井的点原始数据
      tempMarker: null,
      bloomEffect: null,
      loadToken: false,
      isAll: true
    }
  },
  computed: {
    ...mapGetters([
      'needRefresh',
      'bodyHeight'
    ])
  },
  watch: {
    alpha(val) {
      window.map.basemap.opacity = val / 100
      underground.alpha = val / 100
      this.cameraChange()
    },
    needRefresh(val) { // 需要刷新报警
      if (val) this.refreshAlarm()
    },
    'menus.locationWindowShow'(val) { // 打开弹窗设置默认中心，关闭弹窗清空屏幕
      if (val) {
        this.$refs.popupLocation.setQuery(this.center)
      } else {
        // window.map.remove(this.tempMarker)
      }
    }
  },
  beforeCreate() {
    this.$store.dispatch('settings/changeSetting', {
      key: 'breadcrumb',
      value: false
    })
    this.$store.dispatch('settings/changeSetting', {
      key: 'tagsView',
      value: false
    })
  },
  created() {
    this.fetchWellType()
    this.resultList = []
    console.log('create', ' 时间(s):', new Date().getSeconds())
  },
  mounted() {
    this.$nextTick(() => {
      this.windowResize(window.innerHeight, window.innerWidth)
    })
  },
  beforeDestroy() {
    this.$store.dispatch('settings/changeSetting', {
      key: 'breadcrumb',
      value: true
    })
    this.$store.dispatch('settings/changeSetting', {
      key: 'tagsView',
      value: true
    })
    if (this.clock) {
      clearInterval(this.clock)
      this.clock = null
    }
  },
  methods: {
    windowResize(height, width) {
      // 查找header高度
      const el_header = document.getElementById('app-header')
      let bodyHeight = height - (el_header ? el_header.clientHeight : 56)
      if (store.getters.tagsView) {
        const el_tagsView = document.getElementById('tags-view-container')
        bodyHeight -= el_tagsView ? el_tagsView.clientHeight : 34
      }
      if (breadcrumb) {
        const el_navbar = document.getElementsByClassName('navbar')
        bodyHeight -= el_navbar ? el_navbar[0].clientHeight : 48
      }
      // 减去2个padding
      bodyHeight -= 5
      store.dispatch('settings/ChangeHeight', bodyHeight)
    },
    // 初始化放这里
    onMapload(map, center) {
      window.map = map
      this.center = center
      underground = new mars3d.thing.Underground({ alpha: this.alpha / 100 })
      window.map.addThing(underground)
      alarm_layer = new mars3d.layer.GraphicLayer({ name: '报警图层' })
      window.map.addLayer(alarm_layer)
      // this.initLine()
      this.initPoint()
      window.map.on(mars3d.EventType.cameraChanged, this.cameraChange, this)
    },
    async initLine() {
      for (let i = 1; i <= 6; i++) {
        // 三维管线
        line_layer_3D.push(polylineVolumeP(i + 6, this.colors[i], this.layerName[i], 0.1, -1.5))
        // 二维管线
        line_layer.push(polylineC(i + 6, this.colors[i], this.layerName[i], 3))
      }
    },
    async initPoint(condition = '', isDev = false) {
      const layerName = ['雨水附属物', '污水附属物', '燃气附属物', '给水附属物', '电信附属物', '电力附属物']
      // 删原有的
      if (point_layer_3D.length !== 0) {
        point_layer_3D.forEach(item => window.map.removeLayer(item))
      }
      point_layer_3D = []

      if (dev_layer.length !== 0) {
        dev_layer.forEach(item => window.map.removeLayer(item))
      }
      dev_layer = []

      // 筛选条件
      const str = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 附属物名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
      const bsq = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 对象名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
      for (let i = 0; i <= 5; i++) {
        point_layer_3D.push(await createModelLayerAsync(i, layerName[i], '../static/model/ys.gltf', 1.5, str))
      }
      // if(isDev){
      //   dev_layer.push(createPointLayer('标识器', 7,  '../static/images/标识器.png', bsq))
      // }
      this.mapReady()
      // const that = this
      // setTimeout(function(){
      //   that.mapReady()
      // }, 1000)
    },
    async initLineLayer(name){
      let i = this.layerName.indexOf(name)
      // 三维管线
      line_layer_3D.push(polylineVolumeP(i + 6, this.colors[i], name, 0.1, -1.5))
      // 二维管线
      line_layer.push(polylineC(i + 6, this.colors[i], name, 3))

    },
    async initDevLayer(name){
      dev_layer.push(createPointLayer(name, this.layerName.indexOf(name) + 6,  '../static/images/'+ name + '.png', '1<>1'))
    },
    cameraChange() {
      // console.log('map-level:' + window.map.level)
      // console.log('alpha:' + this.alpha)
      if (!this.showModel) {
        if(this.alpha <= 80 && window.map.level > 19){
          const lineTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
          const wellTypes = lineTypes.map(item => item.replace('管线','附属物'))
          wellTypes.splice(3,1)
          // 显示三维井
          point_layer_3D.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 })
          // 显示三维管线
          line_layer_3D.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
          // 隐藏二维管线
          //line_layer.forEach(layer => { layer.show = false })
          this.showModel = true
        }
      }else{
        if(this.alpha >80 || window.map.level <= 19){
          const lineTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
          // 隐藏三维
          point_layer_3D.forEach(layer => { layer.show = false })
          line_layer_3D.forEach(layer => { layer.show = false })
          // 显示二维管线
          //line_layer.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
          this.showModel = false
        }
      }
    },
    // 初始化放这里
    mapReady() {
      this.refreshAlarm()
      this.fetchWellList() // 加载全部井
      this.firstAmount = true
      this.toolShow = true
      this.mapLoading = false
      // if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
        setTimeout(() => { this.countDown() }, 1000)
      // }
    },
    // 获取全部井列表
    fetchWellList() {
      this.loading = true
      getWellList().then(response => {
        this.loading = false
        if (response.code === 200) {
          const wells = response.data
          if (wells.length > 0) {
            this.markers = []
            for (const well of wells) {
              this.markers.push(well)
            }
          }
        }
        this.loading = false
      })
    },
    // 过滤图层
    filterLayer(checkedLayer) {
      this.checkedLayer = checkedLayer
      // 1.过滤井图层

      const lineTypes = checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
      const wellTypes = lineTypes.map(item => item.replace('管线','附属物'))
      const devTypes = checkedLayer.filter(item => item.indexOf('dev-') > -1).map(item => item.substring(4))

      // 点
      point_layer_3D.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 })

      // 线
      line_layer.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })
      line_layer_3D.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 })

      let line_layer_name = line_layer.map( item => item.options.name )
      lineTypes.forEach(type => {
        if(line_layer_name.indexOf(type) <= -1){
          this.initLineLayer(type)
        }
      })

      // 2.选中or没选中设备图层
      dev_layer.forEach(layer => { layer.show = devTypes.indexOf(layer.options.name) > -1 })
      let dev_layer_name = dev_layer.map( item => item.options.name )
      devTypes.forEach(type => {
        if(dev_layer_name.indexOf(type) <= -1){
          this.initDevLayer(type)
        }
      })

      // 3.选中or没选中报警图层
      checkedLayer.indexOf('alarm') !== -1 ? alarm_layer.show = true : alarm_layer.show = false

    },
    // 切换底图
    changeBaseMap(type) {
      this.baseLayer = type
      if (type === 'dark') {
        this.basemap = 1112
      } else if (type === 'gaode_vec') {
        this.basemap = 1111
      } else {
        this.basemap = 1113
      }
    },
    // 倒计时函数
    countDown() {
      this.clock = setInterval(() => {
        this.count--
        if (this.count < 0) { // 当倒计时小于0时清除定时器
          this.refreshAlarm()
          this.count = this.baseConfig.refreshTime
        }
      }, 1000)
    },
    // 获取点位类型，显示点位类型下拉
    fetchWellType() {
      const lineLayer = {
        id: 'line',
        name: '管线图层',
        children: this.layerName.map(item => {
          return {
            id: 'line-' + item,
            name: item
          }
        }).splice(0, 7)
      }
      const devLayer = {
        id: 'dev',
        name: '设备图层',
        children: this.layerName.map(item => {
          return {
            id: 'dev-' + item,
            name: item
          }
        }).splice(7, 5)
      }
      this.layers.splice(0, 1, lineLayer)
      this.layers.splice(1, 1, devLayer)

      if (this.showAllWells) {
        this.checkedLayer = ['line', 'dev']
        lineLayer.children.forEach(item => this.checkedLayer.push('line-' + item.name))
        lineLayer.children.forEach(item => this.checkedLayer.push('dev-' + item.name))
      } else {
        this.checkedLayer = [...this.checkedLayer]
      }
      if (this.wellTypeList.length <= 1) {
        this.showWellType = false
      }
      // getDeviceType(this.listQuery).then(response => {
      //   this.deviceTypeList = []
      //   // 过滤掉该单位不支持的设备类型
      //   const deviceTypes = this.$store.getters.deviceTypes
      //   for (const deviceType of response.data) {
      //     if (deviceTypes.indexOf(deviceType.value) !== -1) {
      //       this.deviceTypeList.push(deviceType)
      //     }
      //   }
      //   const devLayer = {
      //     id: 'dev',
      //     name: '设备图层',
      //     children: this.deviceTypeList.map(item => {
      //       return {
      //         id: 'dev-' + item.value,
      //         name: item.name
      //       }
      //     })
      //   }
      //   this.layers.splice(2, 1, devLayer)
      // })
    },
    // 清空查询
    clearSearch() {
      this.searchMarkers = []
      this.resultList = []
    },
    // 数据查询
    search(keywords) {
      if (keywords === '') {
        this.initPoint('')
      } 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
          }
        })
        this.initPoint(keywords)
      }
    },
    // 搜索结果页面变化，触发地图展示列表中所有
    searchPageChange(currentMarkers) {
      // 增加查询展示图层
      this.searchMarkers = currentMarkers
    },
    // 点击搜索结果项居中，弹窗
    searchItemClick(marker) {
      // this.center = marker.lnglat
      // this.openInfoWindow(marker.wellId, marker.lnglat, this.searchResultOffset[1])
    },
    // 在附属物图层里查设备
    searchWellLayer(wellCode){
      // *********************************测试wellCode*********************************
      wellCode = 'GX_YSD_4001_BJNDD_104'
      let point = undefined
      for (let i = 0; i < point_layer_3D.length; i++)
      {
        point = point_layer_3D[i].graphics[0].options.instances.filter(well => {
          return well.attr.编号 === wellCode
        })[0]
        if (point !== undefined) {
          return point
        }
      }
      console.log(point)
      return undefined
    },
    // 刷新报警列表
    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')
      }
      alarm_layer.closePopup().clear()
      getAlarmsNow().then(response => {
        if (response.code === 200) {
          this.loading = false
          // 判断最新报警时间，若和旧的最新时间不一样，则判断是否需要产生声音
          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.alarmList = response.data // 要显示的报警列表
          this.alarmWells = [] // 报警的井列表
          for (const alarm of response.data) {
            if (this.alarmWells.findIndex(item => item.wellCode === alarm.wellCode) == -1) {
              this.alarmWells.push(alarm)
            }
          }
          console.log('alarmWells Length', this.alarmWells.length)
          this.alarmWells.forEach(item => {
            const point = this.searchWellLayer(item.wellCode)
            if (point !== undefined) {
              const attr = point.attr || {}
              attr['报警内容'] = item.alarmContent
              attr['报警数值'] = item.alarmValue
              attr['报警时间'] = item.alarmTime

              var str = `<div style="font-size: 14px;color: #7ff5ff;font-weight: 500;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;">`
              for (const j in attr) {
                if (j === 'FID') continue
                str += ` <div style="padding: 2px;padding-left: 8px">
                         <label style="padding-right: 5px;font-weight: 700">${j}: </label>
                        ${attr[j]}</div>`
              }
              str += `</div>`

              const primitive = new mars3d.graphic.BillboardPrimitive({
                allowDrillPick: true,
                attr: attr,
                id: "alarm-" + attr.编号,
                position: [attr.经度,attr.纬度],
                style: {
                  image: '../static/images/alarm.png',
                  scale: 0.6,
                  hasPixelOffset: true,
                  pixelOffsetY: -10,
                  scaleByDistance: true,
                  scaleByDistance_far: 20000,
                  scaleByDistance_farValue: 0.6,
                  scaleByDistance_near: 0,
                  scaleByDistance_nearValue: 1.4
                },
                flyTo: true
              })
              primitive.bindPopup(str)
              alarm_layer.addGraphic(primitive)




              //Tetrahedron(alarm_layer, [attr.经度,attr.纬度], attr)
              // point.setStyle({
              //   image: '../static/images/alarm.png',
              //   scale: 0.8,
              //   hasPixelOffset: true,
              //   pixelOffsetY: -20,
              //   scaleByDistance: true,
              //   scaleByDistance_far: 20000,
              //   scaleByDistance_farValue: 0.8,
              //   scaleByDistance_near: 0,
              //   scaleByDistance_nearValue: 1.6,
              //   visibleDepth: false
              // }).unbindHighlight()
              // point.unbindPopup()
              // point.bindPopup(str)
              // this.initAlarmPoint(point, item)
            }
          })
        }
      })
    },
    /**
     * 打开报警弹窗
     * @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(window.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.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) {
      var center = { lat: position[1], lng: position[0], alt: 10000, heading: 360, pitch: -45 }
      window.map.setCameraView(center)
    },
    // 坐标拾取， 在地图上绘点
    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(window.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">
// 地图
.overview-map-container{
  width: 100%;
  overflow: hidden;
  padding: 0px;
  .map-demo{
    width: 100%;
    .svg-icon{
      width: 20px;
      height: 20px;
    }
    .alarm-icon{
      width: 29px;
      height: 30px;
    }
  }
}
.cover{
  position: absolute;
  bottom: 6px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(to top left, #48617c, #619bd4);
  border-radius: 5px;
  width: 300px;
  height: 200px;
  padding: 10px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);
  .cover-item{
    width: 50%;
    width: 50%;
    font-size: 16px;
    color: white;
  }
}
.map-gz {
  .el-loading-mask {
    background-color: rgba(255, 255, 255, .3) !important;
  }
  .el-loading-spinner .circular {
    height: 70px;
    width: 70px;
    font-weight: bold;
    font-size: 18px;
    border-radius: 2px;
  }
  .circle_btn{
    background: #419efe;
    margin-top: 5px;
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 50%;
    color: white;
    padding-top: 4px;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.no-head-scrollbar .el-scrollbar__wrap, has-head-scrollbar .el-scrollbar__wrap {
  padding: 0px 10px;
}
</style>