<template>
  <div :class="['map', customClass]" ref="map" />
</template>

<script>
import patroIcon from '@/views/bigScreen/patrolRescue/image/patrol-icon.png'
import rescueIcon from '@/views/bigScreen/patrolRescue/image/rescue-icon.png'
import emergerEventIcon from '@/views/bigScreen/patrolRescue/image/emerger-event-icon.png'
import rescueEventIcon from '@/views/bigScreen/patrolRescue/image/rescue-event-icon.png'
import roadIcon from '@/views/bigScreen/patrolRescue/image/cardRroad.png'
import pickupIcon from '@/views/bigScreen/patrolRescue/image/pickup.png'
export default {
  name: 'MineMap', // Main
  props: {
    // 默认地图加载配置
    defaultOptions: {
      default: () => ({}),
      type: Object,
      required: false,
    },
    // 自定义类名
    customClass: {
      default: '',
      type: String,
      required: false,
    },
    // 自定义点位集合
    markers: {
      default: () => [],
      type: Array,
      required: false,
    },
    // 自定义线集合
    lines: {
      default: () => [],
      type: Array,
      required: false,
    },
    // 自定义面集合
    polygons: {
      default: () => [],
      type: Array,
      required: false,
    },
  },
  data() {
    return {
      mapOptions: {
        // style: 'https://service.minedata.cn/map/solu/style/11001' /* 底图样式 */,
        // style: 'miniMap/service/solu/style/id/16932' /* 底图样式 */,
        style:
          'https://map.hope.cmet1965.com:58000/service/solu/style/id/16932' /* 底图样式 */,
        center: [107.85585, 28.465908] /*地图中心点*/,
        zoom: 6 /*地图默认缩放等级*/,
        pitch: 0 /*地图俯仰角度*/,
        maxZoom: 20 /*地图最大缩放等级*/,
        minZoom: 3 /*地图最小缩放等级*/,
      },
      mineMap: Object.freeze(minemap), // mineMap插件
      map: null, // 地图实例对象
      mapLoaded: false,
      boundaryLineFace: [
        {
          // 地图省份边界  layerIdl边界线 layerIdf 边界面
          code: 'SC',
          layerIdl: '20187ac7367e14034b8c19a40a33fe30',
          layerIdf: '4394876460f6c3bd34d0615bf04cff47',
        },
        {
          code: 'AH',
          layerIdl: 'ef01a0169aaec81e77e9f0048ceb9713',
          layerIdf: '3dde510c446230cbd4fdd15c5fb85416',
        },
        {
          code: 'YN',
          layerIdl: '06fc0230dad437e85d24600e06516587',
          layerIdf: '031e5e61df73778bce2c2d82a4fc0a1c',
        },
        {
          code: 'GZ',
          layerIdl: '6c66cdbaddbcf839a529b03bcee23266',
          layerIdf: 'd960ce4f0fe3eafeebf02a908e25910b',
        },
        {
          code: 'CQ',
          layerIdl: 'dfc9779a51de79b2eb40790f613964e2',
          layerIdf: 'b37573d5d73f223aa5cf4293efeda3c0',
        },
        {
          code: 'XJ',
          layerIdl: 'b6f8c73b2d314bd6e091012fd7698e94',
          layerIdf: '238a5e9de56faa7385873aaadf3ad67d',
        },
        {
          code: 'HN',
          layerIdl: '4edbe95e3ec8786276bb39ce7c42453f',
          layerIdf: 'c1c5c040257326352d694528b7e33fac',
        },
      ],
      // 重庆 1766017472697475072
      //云南   1766017976202698752
      //四川 1766019322897244160
      provinceMarker: [
        {
          zb: [107.569855, 30.367095],
          id: '1430049550537723904', //重庆
          zoom: 6.8,
        },
        {
          zb: [102.928995, 30.52487],
          id: '"1551973634565787637"',
          zoom: 5.8, //四川
        },
        {
          zb: [101.593103, 25.353375],
          id: '1551973630102081536', //云南
          zoom: 6,
        },
        {
          zb: [106.641243, 27.10797],
          id: 'GZ',
          zoom: 6.5,
        },
        {
          zb: [117.229929, 32.325398],
          id: 'AH',
          zoom: 6.5,
        },
      ],
      intervalId: null,
      startRescueintervalId: null,
      rescueBlinkIntervals: [],
      idList: [],
      sourceIdList: [],
      rescueIdList: [],
      rescueSourceIdList: [], //图层资源id
      markersRescue: [],
      markerRescueEvent: [],
      markerEmergencies: [],
      markerOnlineCar: [],
      markerOnlyCar: [],
      onlineCarClick: false,
      count: 0,
      patrolClick: false,
      rescueClick: false,
      emergenciesClick: false,
      rescueEventClick: false,
      //-------------------------
      eventMarkers: [], // 事件驻点
      taskMarkers: [], // 任务驻点
      jyPlaceMarkers: [], // 巡查驻点
      xcPlaceMarkers: [], // 救援驻点
    }
  },
  created() {
    // 配置 key、solution
    this.mineMap.key = '30be7831caf84685b94e78727e4ce25f'
    this.mineMap.solution = 16932
    this.mineMap.domainUrl =
      'https://map.hope.cmet1965.com:58000' /* MineMap根域名地址 */
    /* MineMap矢量数据服务根域名地址 */
    this.mineMap.dataDomainUrl = 'https://map.hope.cmet1965.com:58000'
    /* MineMap矢量数据服务新规范根域名地址 */
    this.mineMap.serverDomainUrl = 'https://map.hope.cmet1965.com:58000'
    /* MineMap底图雪碧图地址 */
    this.mineMap.spriteUrl = [
      'https://map.hope.cmet1965.com:58000/minemapapi/zsxz/zsxz',
    ] // "./mapresource/sprite/sprite",
    /* MineMap后台服务根地址 */
    this.mineMap.serviceUrl = 'https://map.hope.cmet1965.com:58000/service/'

    // 合并覆盖默认配置项
    this.mapOptions = {
      ...this.mapOptions,
      ...this.defaultOptions,
    }
  },
  mounted() {
    this.initMineMap()
  },
  methods: {
    // 加载mineMap2D地图
    initMineMap() {
      // 初始化地图实例
      this.map = new this.mineMap.Map({
        container: this.$refs.map,
        ...this.mapOptions,
      })
        .on('load', (_) => {
          this.setHinight() // 确保在地图加载完成后调用 setHinight
          this.mapLoaded = true // 当地图加载完成时，设置标志为 true
        })
        .on('error', (error) => this.$emit('onError', error))
    },
    //设置高亮区域
    setHinight() {
      if (this.map) {
        this.boundaryLineFace.forEach((el) => {
          this.map.setLayoutProperty(el.layerIdl, 'visibility', 'visible')
          this.map.setLayoutProperty(el.layerIdf, 'visibility', 'visible')
        })
        this.$emit('onLoad', this.map)
      }
    },
    //地图中心点切换-test
    changeMapCenter(val) {
      this.provinceMarker.forEach((el) => {
        if (val === el.id) {
          this.$nextTick(() => {
            this.map.flyTo({
              center: el.zb,
              zoom: el.zoom,
            })
          })
        }
      })
    },
    // 重新加载地图
    resetMap(callback) {
      if (this.map && this.mapLoaded) {
        // 移除所有动态添加的标记、线和面
        this.markers.forEach((marker) => marker.remove())
        this.lines.forEach((line) => this.map.removeLayer(line.id))
        this.polygons.forEach((polygon) => this.map.removeLayer(polygon.id))

        // 清空存储的图层引用
        this.markers.length = 0
        this.lines.length = 0
        this.polygons.length = 0

        // 重新应用底图样式
        const {center, zoom} = this.mapOptions
        this.map.setCenter(center)
        this.map.setZoom(zoom)
      }
      callback && callback(this.map)
    },

    //清除巡查驻点图层标记
    clearLayMarker() {
      this.markers.forEach((marker) => marker.remove())
      this.markers.length = 0 // 清空标记数组
      //移除数据源
      this.sourceIdList.forEach((item) => {
        this.map.removeSource(item)
      })
      this.sourceIdList.length = 0
      // 移除路段图层
      this.idList.forEach((item) => {
        if (this.map.getLayer(item)) {
          this.map.removeLayer(item)
        }
      })
      this.idList.length = 0
      // this.stopBlink()
      // this.stopBlinking()
    },
    //清除救援驻点图层标记
    clearLayRescueMaker() {
      this.markersRescue.forEach((marker) => marker.remove())
      this.markersRescue.length = 0 // 清空标记数组
      //移除数据源
      this.rescueSourceIdList.forEach((item) => {
        this.map.removeSource(item)
      })
      this.rescueSourceIdList.length = 0
      // 移除路段图层
      this.rescueIdList.forEach((item) => {
        if (this.map.getLayer(item)) {
          this.map.removeLayer(item)
        }
      })
      this.rescueIdList.length = 0
      this.stopRescueStartBlinking()
    },
    //清除车辆检测标记
    clearCarMarker() {
      this.markerOnlineCar.forEach((marker) => {
        marker.remove()
      })
      this.markerOnlineCar.length = 0
      this.markerOnlyCar.forEach((marker) => {
        marker.remove()
      })

      this.markerOnlyCar.length = 0
    },

    //改变地图中心点
    changeCenter(val) {
      if (this.map) {
        // this.map // 同时传入缩放级别和中心点经纬度
        //   .setZoomAndCenter(8, val) //设置地图层级
        this.map.flyTo({
          center: val,
          zoom: 6.5,
        })
      }
    },

    /**
     * @description:
     * @param {*} type 类型
     * @return {*}
     */
    removeMarker(type) {
      this[`${type}Markers`].forEach((marker) => marker.remove())
    },

    removeAllMarker() {
      this.eventMarkers.forEach((marker) => marker.remove())
      this.taskMarkers.forEach((marker) => marker.remove())
      this.jyPlaceMarkers.forEach((marker) => marker.remove())
      this.xcPlaceMarkers.forEach((marker) => marker.remove())
    },

    /**
     * @description:
     * @param {Array} markers 点位集合
     * @param {String} type 类型
     * @return { void }
     */
    // 地图打点
    minemapMarker(markers, type) {
      markers.forEach((item) => {
        if (item.lng && item.lat) {
          item.lnglat = [item.lng, item.lat]
          // 创建div作为标记点
          let el = document.createElement('div')
          el.className = 'map-point'

          // let p1 = document.createElement('div')
          // p1.className = 'text-box text-box-bg-' + item.state
          // p1.innerHTML = item.bridgeName

          let p2 = document.createElement('div')
          p2.className = 'icon-box icon-point-' + type + 'Point'

          // let p3 = document.createElement('div')
          // p3.className = 'icon-bridge icon-bridge-' + item.type

          // p2.appendChild(p3)
          // el.appendChild(p1)
          el.appendChild(p2)

          // 标记点位
          let marker = new minemap.Marker(el, {offset: [-33, -30]})
            .setLngLat(item.lnglat)
            .addTo(this.map)
          this[`${type}Markers`].push(marker)
          //添加点击事件
          el.addEventListener('click', () => {
            this.$emit('markerClick', {
              data: {...item},
              type: type,
            })
            // this.$refs.infoDialog.open(item)
          })
        } else {
          console.log('该点位无定位数据', item)
        }
      })
    },
    abc() {
      console.log(123, '调用地图方法-----------------------')
    },
    // ---------------------------------------------------------------------

    //滚动组件车载布控球
    addCarVideoMarker(val) {
      this.clearCarMarker()
      if (this.map) {
        let coordinateObjects = []
        if (!val) {
          coordinateObjects = [
            {
              lng: 106.08,
              lat: 29.88,
            },

            {
              lng: 106.1,
              lat: 29.86,
            },
            {
              lng: 105.719017,
              lat: 30.25304,
            },
          ]
          this.count++
          this.changeCenter([106.08, 29.88])
        } else {
          coordinateObjects.push({lng: 106.08, lat: 29.88})
          this.changeCenter([106.08, 29.88])
          this.count = 0
          this.clearCarMarker()
        }

        if (this.count !== 0 && this.count % 2 == 0) {
          this.clearCarMarker()
          return
        }
        // 遍历坐标对象数组，为每个坐标创建一个标注
        coordinateObjects.forEach((coordinateObj, index) => {
          let box = document.createElement('div')
          box.style['position'] = 'relative'
          box.style.width = '75px'
          box.style.width = '128px'
          // 创建标注元素
          let el = document.createElement('div')
          let carMaker = document.createElement('div')
          let carNumber = document.createElement('div')
          let smallbox = document.createElement('div')
          el.id = 'marker'
          carMaker.style.width = '3px'
          carMaker.style.height = '46px'
          carMaker.style.background =
            'linear-gradient( 180deg, #1AB3FF 44%, rgba(26,179,255,0) 100%)'
          carMaker.style.borderRadius = '0 0 2px 2px'
          carNumber.textContent = '渝AYX286'
          carNumber.style.width = '75px'
          carNumber.style.height = '22px'
          carNumber.style.background = '#1ab3ff'
          carNumber.style['border'] = '1px solid #fff'
          carNumber.style['font-size'] = '12px'
          carNumber.style.color = '#fff'
          carNumber.style['box-shadow'] = 'inset 0 0 4px 0'
          carNumber.style.textAlign = 'center'
          el.style['background-image'] = `url(${pickupIcon})`
          el.style['background-size'] = 'cover'
          el.style.width = '60px'
          el.style.height = '60px'
          el.style['border-radius'] = '20%'
          smallbox.style.position = 'absolute'
          smallbox.style.top = '-32px'
          smallbox.style.left = '28px'
          smallbox.appendChild(carNumber)
          smallbox.appendChild(carMaker)
          box.appendChild(smallbox)
          box.appendChild(el)

          if (!val) {
            var _marker = new minemap.Marker(box, {offset: [0, 0]})
              .setLngLat(coordinateObj) // 使用对象的 lng 和 lat 属性
              .addTo(this.map)
            this.markerOnlineCar.push(_marker)
            box.addEventListener('click', () => {
              this.$emit('openVideoDialog', coordinateObj)
            })
          } else {
            //车载视频显示
            var _marker = new minemap.Marker(box, {offset: [0, 0]})
              .setLngLat(coordinateObj) // 使用对象的 lng 和 lat 属性
              .addTo(this.map)
            this.markerOnlyCar.push(_marker)
            this.$emit('openVideoDialog', coordinateObj)
          }
        })
      }
    },
    //路线图层
    addCustomerMarker(val) {
      if (this.map) {
        // this.clearLayMarker()
        var coordinateObjects = [
          {
            lng: 105.89,
            lat: 30.07,
            description: '璧山北收费站',
            id: 1,
            coordinates: [
              [105.96, 29.97],
              [105.89, 30.07],
            ],
            Sections: '渝遂',
            Station: [390, 0],
            type: '收费站',
            managementCompany: '重庆珑钟救援服务有限公司',
            trailerNum: 3, //拖车
            crane: 2, //吊车
            leader: '河东',
            leaderPhone: '15825922716',
            pickup: 2, //皮卡
          },
          {
            lng: 106.1,
            lat: 29.86,
            description: '铜梁北收费站',
            id: 2,
            coordinates: [
              [106.1, 29.86],
              [106.11, 29.85],
            ],
            Sections: '渝遂',
            Station: [363, 0],
            type: '收费站',
            managementCompany: '重庆珑钟救援服务有限公司',
            trailerNum: 3, //拖车
            crane: 2, //吊车
            leader: '河东',
            leaderPhone: '15825922716',
            pickup: 3, //皮卡
          },
          {
            lng: 105.719017,
            lat: 30.25304,
            description: '铜梁东收费站',
            id: 3,
            coordinates: [
              [105.719017, 30.25304],
              [105.721367, 30.246401],
            ],
            Sections: '渝遂',
            Station: [372, 0],
            type: '收费站',
            managementCompany: '重庆珑钟救援服务有限公司',
            trailerNum: 3, //拖车
            crane: 2, //吊车
            leader: '河东',
            leaderPhone: '15825922716',
            pickup: 5, //皮卡
          },
          {
            lng: 105.98,
            lat: 29.95,
            description: '田家收费站',
            id: 4,
            coordinates: [
              [105.98, 29.95],
              [106.01, 29.93],
            ],
            Sections: '渝遂',
            Station: [330, 0],
            type: '收费站',
            managementCompany: '重庆珑钟救援服务有限公司',
            trailerNum: 3, //拖车
            crane: 2, //吊车
            leader: '河东',
            leaderPhone: '15825922716',
            pickup: 2, //皮卡
          },
        ]
        this.changeCenter([106.08, 29.88])
        //判断是否清除标记
        if (val == 'patrol') {
          this.patrolClick = !this.patrolClick
          if (!this.patrolClick) {
            this.clearLayMarker()
            return
          }
        }
        if (val == 'rescue') {
          this.rescueClick = !this.rescueClick
          if (!this.rescueClick) {
            this.clearLayRescueMaker()
            return
          }
        }
        if (val == 'Emergencies') {
          this.emergenciesClick = !this.emergenciesClick
          if (!this.emergenciesClick) {
            this.markerEmergencies.forEach((marker) => marker.remove())
            this.markerEmergencies.length = 0
            return
          }
        }
        if (val == 'rescueEvent') {
          this.rescueEventClick = !this.rescueEventClick
          if (!this.rescueEventClick) {
            this.markerRescueEvent.forEach((marker) => marker.remove())
            this.markerRescueEvent.length = 0
            return
          }
        }
        // 遍历坐标对象数组，为每个坐标创建一个标注
        coordinateObjects.forEach((coordinateObj, index) => {
          //公共容器
          let p = document.createElement('div')
          // 创建标注元素
          let el = document.createElement('div')
          let textEl = document.createElement('div')
          el.id = 'marker'

          //巡查驻点
          if (val == 'patrol') {
            el.style['background-image'] = `url(${patroIcon})`
            textEl.style.border = '2px solid #51fd8a'
            textEl.style.backgroundColor = '#1ea64b' // 可以设置背景色
          }
          //救援驻点
          if (val == 'rescue') {
            el.style['background-image'] = `url(${rescueIcon})`
            textEl.style.backgroundColor = '#43adad'
            textEl.style.border = '2px solid #04fbfb'
          }
          //突发事件
          if (val == 'Emergencies') {
            el.style['background-image'] = `url(${emergerEventIcon})`
            textEl.style.backgroundColor = '#785000'
            textEl.style.border = '2px solid #ffc95a'
          }
          //救援事件
          if (val == 'rescueEvent') {
            el.style['background-image'] = `url(${rescueEventIcon})`
            textEl.style.backgroundColor = '#7c0d2d'
            textEl.style.border = '2px solid #bd4467'
          }
          el.style['background-size'] = 'cover'
          el.style.width = '40px'
          el.style.height = '40px'
          el.style['border-radius'] = '20%'
          // 创建文字描述元素
          textEl.textContent = coordinateObj.description // 设置描述文本
          textEl.style.padding = '2px 5px' // 内边距
          textEl.style.borderRadius = '3px' // 圆角
          textEl.style.fontSize = '12px' // 字体大小
          textEl.style.color = 'white'
          textEl.style.whiteSpace = 'nowrap' // 防止文本换行
          p.appendChild(textEl)
          p.appendChild(el)
          p.style.display = 'flex'
          p.style.flexDirection = 'column'
          p.style.justifyContent = 'center'
          p.style.alignItems = 'center'
          // 创建一个新的标注实例，并设置偏移量
          if (val == 'patrol') {
            var _marker = new minemap.Marker(p, {offset: [0, 0]})
              .setLngLat(coordinateObj) // 使用对象的 lng 和 lat 属性
              .addTo(this.map)
            this.markers.push(_marker)
            this.addSources(coordinateObj.coordinates, coordinateObj.id)
            this.addLayers(coordinateObj.id)
            this.idList.push(`lineLayer-${coordinateObj.id}`)
            this.sourceIdList.push(`lineSource-${coordinateObj.id}`)
            if (this.rescueIdList.length) {
              this.stopRescueStartBlinking()
            }
            p.addEventListener('click', () => {
              this.$emit('patrolStationList', coordinateObj)
            })
          }
          if (val == 'rescue') {
            var _marker = new minemap.Marker(p, {offset: [0, 0]})
              .setLngLat(coordinateObj) // 使用对象的 lng 和 lat 属性
              .addTo(this.map)
            this.markersRescue.push(_marker)
            this.addRescueSources(coordinateObj.coordinates, coordinateObj.id)
            this.addRescueLayers(coordinateObj.id)
            this.rescueIdList.push(`lineRescueLayer-${coordinateObj.id}`)
            this.rescueSourceIdList.push(`lineRescueSource-${coordinateObj.id}`)

            p.addEventListener('click', () => {
              this.$emit('stationList', coordinateObj)
            })
          }
          if (val == 'Emergencies') {
            var _marker = new minemap.Marker(p, {offset: [0, 0]})
              .setLngLat(coordinateObj) // 使用对象的 lng 和 lat 属性
              .addTo(this.map)
            this.markerEmergencies.push(_marker)
            // if (this.idList.length) {
            //   this.stopBlink()
            // }
            if (this.rescueIdList.length) {
              this.stopRescueStartBlinking()
            }
            p.addEventListener('click', () => {
              this.$emit('openEventDialog', coordinateObj)
            })
          }
          if (val == 'rescueEvent') {
            var _marker = new minemap.Marker(p, {offset: [0, 0]})
              .setLngLat(coordinateObj) // 使用对象的 lng 和 lat 属性
              .addTo(this.map)
            this.markerRescueEvent.push(_marker)
            // if (this.idList.length) {
            //   this.stopBlink()
            // }
            if (this.rescueIdList.length) {
              this.stopRescueStartBlinking()
            }
            p.addEventListener('click', () => {
              this.$emit('openEventDialog', coordinateObj)
            })
          } else {
            return
          }
        })
        if (this.rescueIdList.length && val == 'rescue') {
          this.startRescueStartBlinking()
          setTimeout(() => {
            this.stopRescueStartBlinking()
          }, 8000)
        }
      }
    },

    // 为每个标注点设计源--巡查驻点
    addSources(coordinates, id) {
      var jsonData = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'LineString',
              coordinates: coordinates,
            },
            properties: {
              title: '路线一',
              kind: 1,
            },
          },
        ],
      }
      this.map.addSource(`lineSource-${id}`, {
        type: 'geojson',
        data: jsonData,
      })
    },
    // 为每个标注点添加图层--巡查驻点
    addLayers(id) {
      this.map.addLayer({
        id: `lineLayer-${id}`,
        type: 'line',
        source: `lineSource-${id}`,
        layout: {
          'line-join': 'round',
          'line-cap': 'round',
          'border-visibility': 'visible', //是否开启线边框
        },
        paint: {
          'line-width': 8,
          'line-color': {
            type: 'categorical',
            property: 'kind',
            stops: [
              [1, '#FFD48A '],
              [2, '#FFD48A '],
            ],
            default: '#ff0000',
          },
          'line-border-width': 2, //设置线边框宽度
          'line-border-opacity': 1, //设置线边框透明度
          'line-border-color': {
            stops: [
              [1, '#00FFFF'],
              [2, ' #FFFFFF'],
            ],
          }, //设置线边框颜色
        },
        minzoom: 7,
        maxzoom: 17.5,
      })
    },
    // 为每个标注点设计源--救援驻点
    addRescueSources(coordinates, id) {
      var jsonData = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'LineString',
              coordinates: coordinates,
            },
            properties: {
              title: '路线一',
              kind: 1,
            },
          },
        ],
      }
      this.map.addSource(`lineRescueSource-${id}`, {
        type: 'geojson',
        data: jsonData,
      })
    },
    // 为每个标注点添加图层--救援驻点
    addRescueLayers(id) {
      this.map.addLayer({
        id: `lineRescueLayer-${id}`,
        type: 'line',
        source: `lineRescueSource-${id}`,
        layout: {
          'line-join': 'round',
          'line-cap': 'round',
          'border-visibility': 'visible', //是否开启线边框
        },
        paint: {
          'line-width': 8,
          'line-color': {
            type: 'categorical',
            property: 'kind',
            stops: [
              [1, '#FFD48A '],
              [2, '#FFD48A '],
            ],
            default: '#ff0000',
          },
          'line-border-width': 2, //设置线边框宽度
          'line-border-opacity': 1, //设置线边框透明度
          'line-border-color': {
            stops: [
              [1, '#00FFFF'],
              [2, ' #FFFFFF'],
            ],
          }, //设置线边框颜色
        },
        minzoom: 7,
        maxzoom: 17.5,
      })
    },
    // //巡查驻点闪烁
    // startBlinking() {
    //   this.intervalId = setInterval(() => {
    //     this.idList.forEach((item) => {
    //       // this.map.setPaintProperty(item, 'line-opacity', 0)
    //       if (this.map.getLayer) {
    //         this.map.setPaintProperty(
    //           item,
    //           'line-opacity',
    //           this.map.getPaintProperty(item, 'line-opacity') == 0 ? 1 : 0
    //         )
    //       }
    //     })
    //   }, 1000)
    // },
    // //关闭巡查驻点闪烁
    // stopBlink() {
    //   if (this.intervalId) {
    //     clearInterval(this.intervalId)
    //     this.intervalId = null // 清除引用，避免内存泄漏
    //     this.idList.forEach((item) => {
    //       this.map.setPaintProperty(item, 'line-opacity', 1)
    //     })
    //   }
    // },

    //开启救援驻点闪烁
    startRescueStartBlinking() {
      this.startRescueintervalId = setInterval(() => {
        this.rescueIdList.forEach((item) => {
          if (this.map.getLayer) {
            this.map.setPaintProperty(
              item,
              'line-opacity',
              this.map.getPaintProperty(item, 'line-opacity') == 0 ? 1 : 0
            )
          }
        })
      }, 1000)
    },
    //关闭巡查救援闪烁
    stopRescueStartBlinking() {
      if (this.startRescueintervalId) {
        clearInterval(this.startRescueintervalId)
        this.startRescueintervalId = null
        this.rescueIdList.forEach((item) => {
          this.map.setPaintProperty(item, 'line-opacity', 1)
        })
      }
    },
  },
  beforeDestroy() {
    // 注销地图实例,移除地图
    if (this.map) {
      this.map.remove()
    }
  },
}
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;

  /* 通过 CSS 隐藏 logo */
  ::v-deep .minemap-ctrl-bottom-left {
    display: none !important;
  }
}
::v-deep .content {
  display: flex;
  width: 100%;
  a {
    text-decoration: none;
    color: inherit;
  }
}
::v-deep .content-left {
  width: 40%;
  border-right: 2px solid white;
}
::v-deep .content-right {
  margin-left: 20px;
}
::v-deep .minemap-popup-content {
  width: 200px;
  background: #3a66dd; // 示例样式
  color: white; // 示例样式
}
::v-deep .minemap-popup-tip {
  border-bottom-color: #3290d7; // 设置箭头颜色
  display: none;
}

::v-deep .minemap-popup-anchor-bottom .minemap-popup-tip {
  border-top-color: #3290d7; // 如果箭头在底部，则设置顶部边框颜色
  display: none;
}


</style>


<style lang="scss">
    /* 地图点位样式 */
    .map-point {
        // width: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    .text-box {
        line-height: 20px;
        height: 20px;
        padding: 3px 5px;
    }
    .icon-box {
        height: 66px;
        width: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: cover;
        // background-position-x: -6.5px;
        // background-position-y: -7px;
        position: relative;
        // margin-top: -5px;
    }
    
    .icon-point-eventPoint {
        background-image: url('~@/assets/img/bigScreen/map/eventPoint.png');
    }
    .icon-point-taskPoint {
        background-image: url('~@/assets/img/bigScreen/map/taskPoint.png');
    }
    .icon-point-jyPlacePoint {
        background-image: url('~@/assets/img/bigScreen/map/jyPlacePoint.png');
    }
    .icon-point-xcPlacePoint {
        background-image: url('~@/assets/img/bigScreen/map/xcPlacePoint.png');
    }
    .text-box-bg-1 {
        background: #004a59;
        box-shadow: inset 0px 0px 4px 0px #1affd9;
        border: 1px solid #1affd9;
    }
    .text-box-bg-2 {
        background: #59522d;
        box-shadow: inset 0px 0px 4px 0px #ffea80;
        border: 1px solid #ffea80;
    }
    .text-box-bg-3 {
        background: #59301b;
        box-shadow: inset 0px 0px 4px 0px #ff884d;
        border: 1px solid #ff884d;
    }
    .text-box-bg-4 {
        background: #59202b;
        box-shadow: inset 0px 0px 4px 0px #f35675;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #f35675;
    }
}
</style>