<template>
    <div>
        <Module
            class="layer-contrl-mod"
            :error="error"
            :info="bsMeta && bsMeta['utilities']"
        >
            <div class="layer-contrl">
                <div class="group-content" ref="groupContent">
                    <div v-for="(layer, index) in layersData" :key="layer.code">
                        <div
                            class="group-item"
                            @click="onItemClick(layer)"
                            :class="{ active: layer.isShow }"
                        >
                            <div class="item-icon">
                                <img v-if="layer.isShow" :src="layer.srcAc" />
                                <img v-else :src="layer.src" />
                            </div>
                            <div class="inlayertext">{{ layer.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </Module>
        <div id="mine-map">
            <div
                style="
                    z-index: 9;
                    position: absolute;
                    left: 10px;
                    bottom: 35px;
                    font-size: 12px;
                    color: rgb(148, 168, 198);
                "
            >
                世纪高通 - GS(2020)1186号 - 甲测资质11111333 - Data NavInfo
            </div>
            <div class="road">
                <div class="roadContanier">
                    <div class="btn">
                        <el-switch
                            style="display: block"
                            v-model="trafficInfo"
                            :active-text="`${
                                trafficInfo ? '隐藏' : '显示'
                            }当前路况(双向)`"
                        ></el-switch>
                    </div>
                    <div class="detail" v-if="trafficInfo">
                        <div class="detail-item">
                            <div class="name">
                                <div
                                    class="icon"
                                    style="background: rgb(63, 255, 0)"
                                ></div>
                                <span>畅通</span>
                            </div>
                            <span class="val">
                                {{
                                    Number(
                                        trafficInfoNum.patencyMileage / 1000
                                    )
                                }}km
                            </span>
                        </div>
                        <div class="detail-item">
                            <div class="name">
                                <div
                                    class="icon"
                                    style="background: rgb(255, 247, 0)"
                                ></div>
                                <span>轻度拥堵</span>
                            </div>
                            <span class="val">
                                {{
                                    Number(
                                        trafficInfoNum.mildCongestionMileage /
                                            1000
                                    )
                                }}km
                            </span>
                        </div>
                        <div class="detail-item">
                            <div class="name">
                                <div
                                    class="icon"
                                    style="background: rgb(255, 165, 0)"
                                ></div>
                                <span>中度拥堵</span>
                            </div>
                            <span class="val">
                                {{
                                    Number(
                                        trafficInfoNum.moderateCongestionMileage /
                                            1000
                                    )
                                }}km
                            </span>
                        </div>
                        <div class="detail-item">
                            <div class="name">
                                <div
                                    class="icon"
                                    style="background: rgb(255, 0, 0)"
                                ></div>
                                <span>重度拥堵</span>
                            </div>
                            <span class="val">
                                {{
                                    Number(
                                        trafficInfoNum.heavyCongestionMileage /
                                            1000
                                    )
                                }}km
                            </span>
                        </div>
                        <div class="detail-item">
                            <div class="name">
                                <div
                                    class="icon"
                                    style="background: rgb(113, 5, 5)"
                                ></div>
                                <span>禁止通行</span>
                            </div>
                            <span class="val">
                                {{
                                    Number(
                                        trafficInfoNum.closedTrafficMileage /
                                            1000
                                    )
                                }}km
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="jsx">
import { defineComponent } from 'vue'
import { findOtherhKey, mapConfig } from './mapConfig'
import { mapState } from 'vuex'

import tunnelMarker from '@/views/electromechanicalMange/assets/qiximg.png'
import wbMarker from '@/views/electromechanicalMange/assets/weiboimg.png'
import qbbMarker from '@/views/electromechanicalMange/assets/qbbimg.png'
import lmMarker from '@/views/electromechanicalMange/assets/longmen.png'
import { getLinke } from '@/api/chargeInfo'
import { generateKey } from '@/api/operation'
import mapicon2 from '../assets/mapicon2.png'
import mapicon2Ac from '../assets/mapicon2Ac.png'
import mapicon4 from '../assets/mapicon4.png'
import mapicon4Ac from '../assets/mapicon4Ac.png'
import mapicon3 from '../assets/mapicon3.png'
import mapicon3Ac from '../assets/mapicon3Ac.png'
import mapicon5 from '../assets/mapicon5.png'
import mapicon5AC from '../assets/mapicon5AC.png'
import markBottom from '@/views/electromechanicalMange/assets/markBottom.png'
import { getMapConfig } from '@/api/gis'
import markerbg from '@/assets/images/roadtitbg.png'

import {
  setEqInfoList,
  sectionPoints,
  getPathList,
  getDrivingList,
} from '@/api/ele-control-cabin.js'
export default defineComponent({
  data() {
    return {
      layersData: [
        {
          name: '情报板',
          mapid: 'jdMapResource2',
          isShow: false,
          type: '1',
          src: mapicon2,
          srcAc: mapicon2Ac,
        },
        {
          name: '微波车检',
          mapid: 'jdMapResource3',
          isShow: false,
          type: '2',
          src: mapicon4,
          srcAc: mapicon4Ac,
        },
        {
          name: '气象检测仪',
          mapid: 'jdMapResource4',
          isShow: false,
          type: '3',
          src: mapicon3,
          srcAc: mapicon3Ac,
        },
        {
          name: '门架',
          mapid: 'jdMapResource5',
          isShow: false,
          type: '5',
          src: mapicon5,
          srcAc: mapicon5AC,
        },
      ],
      markers: {
        // proty-{iconType}-1 格式 iconType 自己取的名字 最好别重名
        'proty-jdTunnel-1': tunnelMarker,
        'proty-jdSlope-1': wbMarker,
        'proty-qbb-1': qbbMarker,
        'proty-lm-1': lmMarker,
      },
      // 设施类型图标类型
      iconTtypes: {
        气象检测仪: 'jdTunnel', // 隧道图标
        隧道: 'jdSlope', // 边坡
        车辆检测器: 'jdSlope', // 边坡
        情报板: 'qbb', // 边坡
        门架: 'lm',
      },
      mapResourceId: 'jdMapResource', // 地图资源标识// 地图资源标识
      jdLayer: 'jdLayer', // 地图绘制数据图层
      Map: null,
      mapCenter: [107.56729485494566, 30.189132450003157],
      mapZoom: 3.26,
      // 地图绘制数据图层
      mapLineResourceId: 'MapLineResource', // 地图资源标识// 地图资源标识
      jdLineLayer: 'jdLineLayer', // 地图绘制数据图层
      trafficInfoNum: {
        closedTrafficMileage: 0, //禁止通行里程
        patencyMileage: 0, //通畅里程 1
        mildCongestionMileage: 0, //中度拥堵里程
        heavyCongestionMileage: 0, //重度
        moderateCongestionMileage: 0, //中度拥堵里程 3
      },
      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',
        },
      ],
      highWayMark: [],
      mapIsLoad: false,
      markLocationList: {},
      trafficInfo: false,
      trafficPointList: [],
      sourceLayerList: [],
      trafficInfoNum: {
        closedTrafficMileage: 0, //禁止通行里程
        patencyMileage: 0, //通畅里程 1
        mildCongestionMileage: 0, //中度拥堵里程
        heavyCongestionMileage: 0, //重度
        moderateCongestionMileage: 0, //中度拥堵里程 3
      },
      clickPopUps: [],
      hoverPopUps: [],
      loading: false,
      markerDomListID: [],
    }
  },
  computed: {
    ...mapState({
      orgCode: (state) => state.ele.orgCode,
      ysId: (state) => state.ele.ysId,
      refresh: (state) => state.ele.refresh,
      orgType: (state) => state.ele.ysId,
      OrgId: (state) => state.ele.OrgId,
    }),
  },
  watch: {
    refresh() {
      if (!this.mapIsLoad) {
        return
      }
      if (!this.orgType) {
        const matchItem = mineDataMapCenter_zt.find(
          ({ id }) => id == this.orgCode.groupIds[0],
        )
        if (matchItem) {
          console.log(matchItem)
          this.mapCenter = matchItem.point
          this.mapZoom = matchItem.zoom
        }
      }
      if (this.OrgId.length !== 0) {
        this.setGisProperty(this.OrgId[0])
      }
      this.getSectionPoints()
      this.getSetEqInfoList()
    },
    mapIsLoad() {
      this.mapIsLoad && this.getSectionPoints()
    },
    trafficInfo() {
      this.sourceLayerList.forEach((el) => {
        this.setLayer(el.msgCont, el.sourceId, el.layerId)
      })
    },
  },
  mounted() {
    this.initMap()
  },

  methods: {
    // 边界线
    setGisProperty(type) {
      this.boundaryLineFace.forEach((el) => {
        this.Map.setLayoutProperty(el.layerIdl, 'visibility', 'none')
        this.Map.setLayoutProperty(el.layerIdf, 'visibility', 'none')
      })
      this.boundaryLineFace.forEach((el) => {
        if (type == el.code) {
          this.Map.setLayoutProperty(el.layerIdl, 'visibility', 'visible')
          this.Map.setLayoutProperty(el.layerIdf, 'visibility', 'visible')
        }
      })
    },
    // 地图视图迁移
    moveMapCenter(type) {
      if (type.length === 0) {
        this.setCenterWidthZoom(
          'easeTo',
          { lng: 107.85585, lat: 28.465908 },
          4.8,
        )
        this.boundaryLineFace.forEach((el) => {
          this.Map.setLayoutProperty(el.layerIdl, 'visibility', 'visible')
          this.Map.setLayoutProperty(el.layerIdf, 'visibility', 'visible')
        })
        return
      }
      let zoomC = ''
      if (type.length === 3) {
        zoomC = type[2]
      } else if (type.length === 2) {
        zoomC = type[1]
      } else if (type.length === 1) {
        zoomC = type[0]
      }
      const { center, zoom } = mapConfig[zoomC]
      this.setCenterWidthZoom('easeTo', center, zoom)
    },
    // 地图视图迁移 没有路线回到最省
    moveMapCenterPo(type) {
      type = type === 'all' ? 'CQ' : type
      const { center, zoom } = mapConfig[type]
      this.setCenterWidthZoom('easeTo', center, zoom)
    },
    setCenterWidthZoom(
      type = 'easeTo',
      center,
      zoom,
      pitch = 0,
      duration = 2000,
    ) {
      this.Map[type]({
        center: center,
        zoom,
        bearing: 0,
        pitch,
        duration,
      })
    },
    initMap() {
      getMapConfig().then((res) => {
        const { code, msg, data } = res
        if (code === 1) {
          const { map, layers } = data
          // let map = {
          //     key: '5f5e74f74f8046f7899b038de1df2a3d',
          //     solution: 16958,
          //     domainUrl: '//minedata.cn',
          //     dataDomainUrl: '//datahive.minedata.cn',
          //     serverDomainUrl: '//datahive.minedata.cn',
          //     serviceUrl: '//mineservice.minedata.cn/service/',
          //     style: '//mineservice.minedata.cn/service/solu/style/id/16958'
          // }
          const {
            domainUrl,
            dataDomainUrl,
            serverDomainUrl,
            serviceUrl,
            key,
            style,
            solution,
            spriteUrl,
          } = map
          // console.log('spriteUrl',spriteUrl)
          // const spriteUrls = (spriteUrl || []).map(it => `http:${it}`)
          // console.log('spriteUrls',spriteUrls)
          //千米桩图层Id
          const milestoneKmLayerId = findOtherhKey(
            layers || [],
            'code',
            'MILESTONE_KM',
            'layerId',
          )
          // //  百米桩图层Id
          const milestoneHmLayerId = findOtherhKey(
            layers || [],
            'code',
            'MILESTONE_HM',
            'layerId',
          )
          window.minemap.domainUrl = `https://map.hope.cmet1965.com:58000`
          window.minemap.dataDomainUrl = `https://map.hope.cmet1965.com:58000`
          window.minemap.serverDomainUrl = `https://map.hope.cmet1965.com:58000`
          // window.minemap.spriteUrl = spriteUrls
          // window.minemap.spriteUrl = spriteUrl

          window.minemap.spriteUrl =
            //[
            //     'https://map.hope.cmet1965.com:58000/minemapapi/zsxz/zsxz',
            //     "./mapresource/sprite/sprite",
            //   ];
            'https://map.hope.cmet1965.com:58000/minemapapi/zsxz/zsxz'
          window.minemap.serviceUrl = `https://map.hope.cmet1965.com:58000/service/`
          window.minemap.key = key
          window.minemap.solution = solution

          this.Map = new window.minemap.Map({
            container: 'mine-map',
            center: this.mapCenter,
            zoom: this.mapZoom,
            pitch: 0,
            style,
            logoControl: false,
            maxZoom: 20,
            minZoom: 3,
            projection: 'MERCATOR',
            sphereRender: false, // 三维球体模式
          })
          this.$nextTick(() => {
            setTimeout(() => {
              this.boundaryLineFace.forEach((el) => {
                this.Map.setLayoutProperty(el.layerIdl, 'visibility', 'visible')
                this.Map.setLayoutProperty(el.layerIdf, 'visibility', 'visible')
              })
            }, 300)
          })

          //    this.boundaryLineFace.forEach(el => {
          //   this.Map.setLayoutProperty(el.layerIdl, "visibility", "visible");
          //   this.Map.setLayoutProperty(el.layerIdf, "visibility", "visible");
          // });
          // const qmz = JSON.parse(localStorage.getItem('mapCLkmz'))
          // this.Map.setLayoutProperty(
          //   qmz.ROUTE,
          //   "visibility",
          //   "none"
          // );
          // 设置一个布尔值，用于指示地图是否将持续重绘。true-定时重绘地图展示动态效果（比较占系统性能），false-关闭定时刷新动态效果（粒子效果不会在动）
          this.Map.repaint = true
          //  深色地图控件 引入minemap-dark.css
          this.Map.addControl(new window.minemap.Navigation(), 'bottom-right')
          //  this.Map.addControl(new window.minemap.Fullscreen(), 'top-right')
          this.Map.addControl(new window.minemap.Attribution(), 'bottom-left')
          this.Map.addControl(new window.minemap.Scale(), 'bottom-left')

          this.Map.on('load', () => {
            //console.log( this.Map.getSource("upload_1081")); // 用户数据图层的数据源
            //addLayers();
            //数据源名称 upload_1081
            const qmz = JSON.parse(localStorage.getItem('mapCLkmz'))
            this.Map.setLayoutProperty(qmz.ROUTE, 'visibility', 'none')
            // if (this.Map.getLayer(milestoneKmLayerId)) {
            //   // 判断用户数据图层是否存在，milestoneKmLayerId - 是图层id,需要从 https://mineservice.minedata.cn/service/solu/style/id/14480 返回的json文件里按数据源名称去查找。在配图时用户数据生成的图层里点“样式信息”-“JSON查看”后显示的信息里“source:”属性后的值就是数据源名称
            //   this.Map.setLayoutProperty(milestoneKmLayerId, 'visibility', 'visible') // 设置隐藏"visibility": "none"
            // }
            /**
             * 创建地图对象后，开始加载地图资源，地图资源加载完成后触发load事件
             * 百米桩
             */

            // 地图加载初始化完成
            this.$emit('loaded', this.Map)
            this.mapIsLoad = true
            //初始化 图标
            for (let k in this.markers) {
              this.Map.loadImage(this.markers[k], (error, image) => {
                if (error) {
                  throw error
                }
                if (!this.Map.hasImage(k)) {
                  this.Map.addImage(k, image)
                }
              })
            }
            //  this.Map.on('moveend', () => {
            //     console.log('缩放层级：',  this.Map.getZoom())
            // })
            //  this.Map.on('zoomend', () => {
            //     console.log('地图中心点：',  this.Map.getCenter())
            // })
            this.Map.on('mousemove', (e) => this.onMouseMove(e))
            this.Map.on('click', (e) => this.onMapClick(e))
            //监听层级显示隐藏路段浮出来的路段名marker
            this.Map.on('zoom', (e) => {
              const zoomnum = this.Map.getZoom()
              if (this.markerDomListID.length > 0) {
                this.markerDomListID.forEach((ele) => {
                  const idv = ele
                    .getAttribute('class')
                    .indexOf('rodeMarkerDiv1') //筛选出小图标
                  if (zoomnum < 8) {
                    let isshow = 'none'
                    if (zoomnum <= 6) {
                      // 6~8级显示大图标 小于等于6级显示小图标
                      if (idv > -1) {
                        isshow = 'block'
                      } else {
                        isshow = 'none'
                      }
                    } else {
                      if (idv > -1) {
                        isshow = 'none'
                      } else {
                        isshow = 'block'
                      }
                    }
                    ele.style.display = isshow
                  } else {
                    ele.style.display = 'none'
                  }
                })
              }
            })
          })
        } else {
          this.$message.error(msg)
        }
      })
    },

    onMapClick(e) {
      var contfeatures1 = this.Map.queryRenderedFeatures(e.point, {
        layers: ['point-cluster-0', 'point-cluster-1', 'point-cluster-2'],
      })
      if (contfeatures1.length > 0) {
        this.Map.flyTo({
          center: contfeatures1[0].geometry.coordinates,
          zoom: 11,
        })
      }
    },
    onMouseMove(e) {
      var that = this
      var hoverLayer = ['jdLayer', 'unclustered-points']
      let layers = []
      // 注：如果某个图层不存在则点击不会返回覆盖物参数
      hoverLayer.forEach(function (it) {
        that.Map.getLayer(it) && layers.push(it)
      })
      const features = this.Map.queryRenderedFeatures(e.point, {
        layers,
      })
      this.Map.getCanvas().style.cursor = features.length ? 'pointer' : ''
      if (!features.length) {
        this.deletePopUps('hover')
        return
      }
      this.toHoverMapStruct(features[0])
    },
    //组织机构切换，对应的点也要变化
    roadChange() {
      if (this.selectedLayers.length > 0) {
        this.selectedLayers.forEach((ele) => {
          this.Map.removeSource('yhpointSource' + ele)
          this.Map.removeLayer('yhpagepoint' + ele)
          this.getDataPoint(ele)
        })
      }
    },
    onItemClick(item) {
      if (this.loading) {
        this.$message.warning('数据加载中请稍后...')
        return
      }
      item.isShow = !item.isShow
      this.getSetEqInfoList()
    },
    // 获取情报板数据
    getSetEqInfoList() {
      let typeList = []
      this.layersData.filter((item) => {
        if (item.isShow) {
          typeList.push(item.type)
        }
      })
      if (typeList.length !== 0) {
        this.loading = true
        setEqInfoList({
          deviceTypes: typeList.toString(),
          ...this.orgCode,
        }).then(({ code, msg, data }) => {
          if (code === 0 && !!data) {
            let arr = data.filter((item) => {
              return item.lat !== null
            })
            this.setMapMarkers(arr)
            this.loading = false
          }
        })
      } else {
        this.clearAll()
      }
    },
    toHoverMapStruct({ properties }) {
      console.log(properties)
      const {
        lng,
        lat,
        name,
        deviceCode,
        deviceType,
        displayInfo,
        deviceStatus,
        orgName,
        sectionName,
        systemType,
        detail,
      } = properties
      console.log(properties)
      const jsonDetail = JSON.parse(detail)
      const propUp = document.createElement('div')
      propUp.className = 'prop-up-inspect'

      const propHeader = document.createElement('div')
      const propspan1 = document.createElement('div')
      const propspan2 = document.createElement('div')
      const propspan3 = document.createElement('div')
      const propspan4 = document.createElement('div')
      const propspan5 = document.createElement('div')
      const propspan6 = document.createElement('div')
      propspan1.innerText = '路线名称:' + sectionName || ''
      propspan2.innerText = '所属组织:' + orgName || ''
      propspan3.innerText = '设备编码:' + deviceCode || ''
      propspan4.innerText = '设备名称: ' + name || ''
      propspan5.innerText = '设备状态:' + deviceStatus || ''
      deviceType === '门架' &&
        (propspan5.innerText = '数据传输状态: ' + deviceStatus || '')
      deviceType !== '门架' &&
        (propspan6.innerText = '设备类型: ' + systemType || '')
      propHeader.className = 'prop-up-header'
      propUp.appendChild(propHeader)
      if (sectionName) {
        propHeader.appendChild(propspan1)
      }
      if (orgName) {
        propHeader.appendChild(propspan2)
      }
      if (deviceCode) {
        propHeader.appendChild(propspan3)
      }
      if (name) {
        propHeader.appendChild(propspan4)
      }

      deviceType === '门架' && deviceStatus && propHeader.appendChild(propspan5)
      deviceType !== '门架' && propHeader.appendChild(propspan6)
      if (deviceType === '车辆检测器') {
        const propspan7 = document.createElement('div')
        const propspan8 = document.createElement('div')
        const propspan9 = document.createElement('div')
        const propspan10 = document.createElement('div')
        const propspan11 = document.createElement('div')
        const propspan12 = document.createElement('div')
        let LaneDatas = []
        if (jsonDetail) {
          LaneDatas = jsonDetail.displayObj.LaneDatas
        }
        let AvgSpeedAll = 0
        let SmallCarCountAll = 0
        let MidCarCountAll = 0
        let BigCarCountAll = 0
        let ContainerCarCountAll = 0
        let TotalCountAll = 0
        let AvgPossessAll = 0
        LaneDatas.forEach((el) => {
          AvgSpeedAll += el.AvgSpeed
          SmallCarCountAll += el.SmallCarCount
          MidCarCountAll += el.MidCarCount
          BigCarCountAll += el.BigCarCount
          ContainerCarCountAll += el.ContainerCarCount
          TotalCountAll += el.TotalCount
          AvgPossessAll += el.AvgPossess
        })
        // console.log(
        //     'AvgPossessAll' + LaneDatas.length !== 0 ? AvgSpeedAll / LaneDatas.length : 0
        // )
        const propspan13 = document.createElement('div')
        let speed = LaneDatas.length !== 0 ? AvgSpeedAll / LaneDatas.length : 0

        propspan7.innerText = '平均车速:' + speed
        propspan8.innerText = '小车数量: ' + SmallCarCountAll
        propspan9.innerText = '中型车数量: ' + MidCarCountAll
        propspan10.innerText = '大型车数量:' + BigCarCountAll
        propspan11.innerText = '集装箱车数量: ' + ContainerCarCountAll
        propspan12.innerText = '总流量: ' + TotalCountAll
        let rate =
          LaneDatas.length !== 0
            ? (AvgPossessAll / LaneDatas.length).toFixed(0)
            : '0'
        propspan13.innerText = '车道平均占有率: ' + rate + '%'

        speed && propHeader.appendChild(propspan7) //平均车速

        SmallCarCountAll && propHeader.appendChild(propspan8) //小车数量
        MidCarCountAll && propHeader.appendChild(propspan9) //中型车数量
        BigCarCountAll && propHeader.appendChild(propspan10) //大型车数量
        ContainerCarCountAll && propHeader.appendChild(propspan11) //集装箱车数量
        TotalCountAll && propHeader.appendChild(propspan12) //总流量
        rate && rate !== '0' && propHeader.appendChild(propspan13) //车道平均占有率
      }
      if (deviceType.indexOf('气象仪') !== -1 || deviceType === '气象检测仪') {
        const propspan7 = document.createElement('div')
        const propspan8 = document.createElement('div')
        const propspan9 = document.createElement('div')
        const propspan10 = document.createElement('div')

        let airTemperature1 = ''
        let windSpeed1 = ''
        let relativeHumidity1 = ''
        let visibility = ''
        if (jsonDetail) {
          airTemperature1 = jsonDetail.displayObj.airTemperature || ''
          windSpeed1 = jsonDetail.displayObj.windSpeed || ''
          relativeHumidity1 = jsonDetail.displayObj.relativeHumidity || ''
          visibility = jsonDetail.displayObj.visibility || ''
        }
        propspan7.innerText = '空气温度:' + airTemperature1
        propspan8.innerText = '风速: ' + windSpeed1
        propspan9.innerText = '湿度: ' + relativeHumidity1
        propspan10.innerText = '能见度: ' + visibility

        airTemperature1 && propHeader.appendChild(propspan7) //空气温度
        windSpeed1 && propHeader.appendChild(propspan8) //风速
        relativeHumidity1 && propHeader.appendChild(propspan9) //湿度
        visibility && propHeader.appendChild(propspan10) //能见度
      }
      if (deviceType.indexOf('情报板') !== -1) {
        const propspan7 = document.createElement('div')
        propspan7.innerHTML = '显示内容:'
        if (jsonDetail) {
          propHeader.appendChild(propspan7)
        }
        jsonDetail &&
          jsonDetail.displayObj.forEach((el, index) => {
            const text = el.map((item) => item.showText).toString()
            const propspan7 = document.createElement('div')
            propspan7.innerHTML = `${index + 1}:${text}`
            propHeader.appendChild(propspan7)
          })
      }
      console.log(propUp)
      this.setPopup('hover', propUp, [lng, lat], {
        closeOnClick: false,
        closeButton: false,
        anchor: 'bottom',
        offset: [-15, -33],
      })
    },
    setPopup(type = 'click', el, position, popupConfig) {
      this.deletePopUps(type)
      const popUp = new window.minemap.Popup(popupConfig)
        .setLngLat(position)
        .setDOMContent(el)
        .addTo(this.Map)
      if (type === 'hover') {
        // hover弹窗
        this.hoverPopUps.push(popUp)
      } else {
        // 默认是点击弹窗
        this.clickPopUps.push(popUp)
      }
    },
    deletePopUps(type) {
      if (!this.Map) {
        return
      }
      const delClickPopUps = () => {
        this.clickPopUps.forEach((it) => it.remove())
        this.clickPopUps = []
      }
      const delHoverPopUps = () => {
        this.hoverPopUps.forEach((it) => it.remove())
        this.hoverPopUps = []
      }
      switch (type) {
        case 'click':
          delClickPopUps()
          break
        case 'hover':
          delHoverPopUps()
          break
        default:
          delClickPopUps()
          delHoverPopUps()
          break
      }
    },
    // 传入点标记
    setMapMarkers(arr) {
      // 数据筛选
      let filterList = []
      //模糊化处理
      const markerMap = (deviceType) => {
        if (deviceType.indexOf('气象仪') !== -1) {
          return this.iconTtypes['气象检测仪']
        }
        if (deviceType.indexOf('情报板') !== -1) {
          return this.iconTtypes['情报板']
        }
        return this.iconTtypes[deviceType]
      }
      arr.forEach(
        ({
          lng,
          lat,
          deviceType,
          deviceName,
          deviceCode,
          deviceStatus,
          orgName,
          sectionName,
          displayInfo,
          systemType,
          detail,
        }) => {
          if (lng && lat) {
            // 需要什么参数就传进去
            filterList.push({
              deviceCode,
              deviceStatus,
              orgName,
              sectionName,
              systemType,
              deviceType,
              displayInfo,
              lng,
              lat,
              name: deviceName,
              iconType: markerMap(deviceType),
              detail,
            })
          }
        },
      )
      if (filterList.length > 0) {
        //  this.MapResourceId ：资源标识id， this.jdLayer： 绘制地图数据的图层, filterList: 数据
        this.setIconSelf(this.MapResourceId, this.jdLayer, filterList)
      }
    },
    clearDataLayer(sourceId, layerId) {
      this.Map.getLayer(layerId) && this.Map.removeLayer(layerId)
      this.Map.getSource(sourceId) && this.Map.removeSource(sourceId)
    },
    clearAll() {
      new Array(3).fill(1).forEach((item, i) => {
        console.log(i)
        this.Map.getLayer(`point-cluster-${i}`) &&
          this.Map.removeLayer(`point-cluster-${i}`)
      })
      this.Map.getLayer(`point-cluster-count`) &&
        this.Map.removeLayer(`point-cluster-count`)
      this.clearDataLayer('poiPointCluster', 'unclustered-points')
    },
    setIconSelf(sourceId, layerId, list) {
      let south = null
      let west = null
      let north = null
      let east = null
      let mapIconList = {
        type: 'FeatureCollection',
        features: [],
      }
      this.clearAll()
      list.forEach((it) => {
        mapIconList.features.push({
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [it.lng, it.lat],
          },
          properties: it,
        })
        if ((east && it.lng > east) || !east) {
          east = it.lng + 0.6
        }
        if ((north && it.lat > north) || !north) {
          north = it.lat + 0.6
        }
        if ((west && it.lng < west) || !west) {
          west = it.lng - 0.6
        }
        if ((south && it.lat < south) || !south) {
          south = it.lat - 0.6
        }
      })
      // 添加数据源，数据类型为geojson和vector
      this.Map.addSource('poiPointCluster', {
        type: 'geojson',
        data: mapIconList,
        cluster: true,
      })

      //添加非聚合图层
      this.Map.addLayer({
        id: 'unclustered-points',
        source: 'poiPointCluster',
        type: 'symbol',
        layout: {
          'icon-image': 'proty-{iconType}-1',
          'icon-allow-overlap': true, //图标允许压盖
          'icon-size': 1,
          'icon-offset': [-15, -15],
        },
        minzoom: 3,
        filter: ['!has', 'point_count'],
      })

      //添加聚合图层
      var clusterColors = [
        [1000, 'rgba(241, 128, 23, 0.6)', 'rgba(253, 156, 115, 0.6)'],
        [100, 'rgba(240, 194, 12, 0.6)', 'rgba(241, 211, 87, 0.6)'],
        [0, 'rgba(110, 204, 57, 0.6)', 'rgba(181, 226, 140, 0.6)'],
      ]

      var that = this
      clusterColors.forEach(function (color, i) {
        that.Map.addLayer({
          id: 'point-cluster-' + i,
          type: 'circle',
          source: 'poiPointCluster',
          paint: {
            'circle-color': color[1],
            'circle-radius': 15,
            'circle-stroke-width': 5, // 圆的边框宽度，值为数值，默认为0
            'circle-stroke-color': color[2], // 圆的边框颜色，默认值为"#000000"
          },
          filter:
            i === 0
              ? ['>=', 'point_count', color[0]]
              : [
                  'all',
                  ['>=', 'point_count', color[0]],
                  ['<', 'point_count', clusterColors[i - 1][0]],
                ],
        })
      })

      //添加数量图层
      this.Map.addLayer({
        id: 'point-cluster-count',
        type: 'symbol', // 标识图层
        source: 'poiPointCluster',
        layout: {
          'text-field': '{point_count}', // 文本内容，值是字符串，可加“{}”显示数据properties中对应字段
          'text-size': 10, // 文字大小，值为数值，单位为像素（px），默认值为10
        },
        paint: {
          'text-color': 'rgba(0,0,0,.75)', // 文本颜色，默认值为"#000000"，"text-field"必须有值才有效
        },
        filter: ['has', 'point_count'],
      })
    },
    setlinesBySingleLayer(
      sourceId,
      layerId,
      list,
      stops = [[1, '#00A0E9']],
      lineWidth = 5,
      defaultColor,
    ) {
      let south = null
      let west = null
      let north = null
      let east = null
      // 如果有同名的图层和数据源则移除
      this.clearDataLayer(sourceId, layerId)
      const linesList = {
        type: 'FeatureCollection',
        features: [],
      }
      list.forEach((it) => {
        if (it.paths && it.paths.length > 0) {
          linesList.features.push({
            type: 'Feature',
            geometry: {
              type: 'LineString',
              coordinates: it.paths,
            },
            properties: {
              title: it.sectionName,
              kind: it.sectionId,
            },
          })
          it.paths.forEach((pt) => {
            if ((east && pt[0] > east) || !east) {
              east = pt[0] + 0.8
            }
            if ((north && pt[1] > north) || !north) {
              north = pt[1] + 0.8
            }
            if ((west && pt[0] < west) || !west) {
              west = pt[0] - 0.8
            }
            if ((south && pt[1] < south) || !south) {
              south = pt[1] - 0.8
            }
          })
        }
      })
      setTimeout(() => {
        this.Map.addSource(sourceId, {
          type: 'geojson',
          data: linesList,
        })
        this.Map.addLayer({
          id: layerId,
          type: 'line',
          source: sourceId,
          layout: {
            'line-join': 'round',
            'line-cap': 'round',
          },
          paint: {
            'line-width': lineWidth,
            'line-color': {
              type: 'categorical',
              property: 'lineType',
              stops,
              default: !defaultColor ? '#00A0E9' : defaultColor,
            },
            'line-border-width': 1,
            'line-border-opacity': 0.5,
            'line-border-color': '#fff',
          },
          minzoom: 3,
          maxzoom: 20,
        })
        const qmz = JSON.parse(localStorage.getItem('mapCLkmz'))
        this.Map.moveLayer(layerId, qmz.MILESTONE_KM)
      }, 500)
      this.Map.fitBounds([
        [west, south],
        [east, north],
      ])
      this.Map.resize()
    },
    async getSectionPoints() {
      this.getHighWays()
      let listArr = await this.setSectionPoints()
      if (listArr.length !== 0) {
        this.clearDataLayer(this.mapLineResourceId, this.jdLineLayer)
        this.setlinesBySingleLayer(
          this.mapLineResourceId,
          this.jdLineLayer,
          listArr,
          [
            [1, '#7FAFFD'],
            [2, '#7FAFFD'],
          ],
          8,
          '#7FAFFD',
        )
        this.moveMapCenter(this.OrgId)
      } else {
        this.clearDataLayer(this.mapLineResourceId, this.jdLineLayer)
        this.moveMapCenterPo(this.OrgId[0] || 'CQ')
        this.clearAll()
      }
    },
    //获取高速路信息
    getHighWays() {
      Object.values(this.markLocationList).forEach((el) => {
        el.remove()
      })
      console.log(this.ysId)
      const rquestList = this.ysId.map((item) => {
        return getPathList(item)
      })
      Promise.all(rquestList).then((res) => {
        console.log(res)
        let dataList = []
        let markLocationList = []
        res.forEach((item) => {
          if (!item.data) {
            // this.$store.dispatch('user/logout')
            // //this.$router.push(`/login?redirect=${this.$route.fullPath}`)
            // // 退出登录如果是本地环境跳转到模块登录页，如果是正式环境跳转到平台登录首页
            // function delCookie() {
            //     let keys = document.cookie.match(/[^ =;]+(?==)/g)
            //     if (keys) {
            //         for (let i = keys.length; i--; ) {
            //             document.cookie = keys[i] + '=0;path=/;expires=' + new Date(0).toUTCString() // 清除当前域名下的,例如：m.ratingdog.cn
            //         }
            //     }
            // }
            // delCookie()
            // if (process.env.VUE_APP_ENV === 'production') {
            //     self.location = 'http://183.64.175.153:28880/#/'
            // } else {
            //     this.$router.push('/login')
            // }

            return
          }
          const {
            code,
            data: { msgContent, msgState },
          } = item
          console.log(code, msgContent, msgState)
          if (
            code === 0 &&
            msgState === 'SUCCESS' &&
            Array.isArray(msgContent) &&
            msgContent.length > 0
          ) {
            for (let i = 0; i < msgContent.length; i++) {
              const markList = JSON.parse(`[${msgContent[i].linePoints}]`)
              console.log(markList[Math.ceil(markList.length / 2)])
              ;['40015', '40016'].indexOf(msgContent[i].id) === -1 &&
                dataList.push({
                  ...msgContent[i],
                  linePoints: markList,
                  markPoint: markList[Math.ceil(markList.length / 2)],
                })
              i === 0 &&
                markLocationList.push({
                  ...msgContent[i],
                  linePoints: markList,
                  markPoint: markList[Math.ceil(markList.length / 2)],
                })
            }
          }
        })
        console.log(dataList)
        //获取起始坐标
        this.trafficPointList = dataList.map((el) => {
          return {
            startIndex: el.startPoint,
            endIndex: el.endPoint,
            mileage: el.mileage,
          }
        })
        this.getTrafficInfo()
        let zoom = this.Map.getZoom().toFixed(2)
        // if (zoom <= 8) {

        // } else {
        //   Object.values(this.markLocationList).forEach(el => {
        //     el.remove()
        //   })
        // }
        this.drawHighWayMark(markLocationList)
      })
    },
    getTrafficInfo() {
      //初始化数据
      const trafficInfoNum = {
        closedTrafficMileage: 0, //禁止通行里程
        patencyMileage: 0, //通畅里程 1
        mildCongestionMileage: 0, //中度拥堵里程
        heavyCongestionMileage: 0, //重度
        moderateCongestionMileage: 0, //中度拥堵里程 3
      }
      this.sourceLayerList.forEach((el) => {
        this.clearDataLayer(el.sourceId, el.layerId)
      })
      this.sourceLayerList = []
      const totalMileage = this.trafficPointList.map((el) => el.mileage)
      const y = totalMileage.reduce((a, b) => a + parseFloat(b), 0)
      console.log(y)
      const rquestList = this.trafficPointList.map((el) => {
        return getDrivingList(el.startIndex, el.endIndex)
      })
      function calculationResult(pre, cur) {
        let options = { units: 'kilometers' } //units的参数为kilometers或miles，默认为kilometers
        if (!window.turf) {
          return 0
        }
        let distance = window.turf.distance(
          window.turf.point(pre),
          window.turf.point(cur),
          options,
        )
        return distance * 1000
      }
      Promise.all(rquestList).then((res) => {
        this.sourceLayerList = res
          .map((item, index) => {
            const { code, data } = item
            if (code === 0) {
              return {
                sourceId: 'trafficSource' + index,
                layerId: 'trafficLayer' + index,
                msgCont: data,
              }
            }
          })
          .filter((el) => el !== undefined)
        this.sourceLayerList.forEach((el) => {
          el.msgCont.features.forEach((item) => {
            let distance = 0
            //获取距离
            for (let i = 1; i < item.geometry.coordinates.length; i++) {
              const per = item.geometry.coordinates[i - 1]
              const cur = item.geometry.coordinates[i]
              distance = distance + calculationResult(per, cur)
            }
            //畅通[1,-1]
            if ([1, -1].indexOf(item.properties.kind) !== -1) {
              trafficInfoNum.patencyMileage =
                trafficInfoNum.patencyMileage + distance
            }
            //禁止
            if (item.properties.kind === 0) {
              trafficInfoNum.closedTrafficMileage =
                trafficInfoNum.closedTrafficMileage + distance
            }
            //缓行
            if (item.properties.kind === 2) {
              trafficInfoNum.mildCongestionMileage =
                trafficInfoNum.mildCongestionMileage + distance
            }
            //拥堵
            if (item.properties.kind === 3) {
              trafficInfoNum.moderateCongestionMileage =
                trafficInfoNum.moderateCongestionMileage + distance
            }
            //严重
            if (item.properties.kind === 4) {
              trafficInfoNum.heavyCongestionMileage =
                trafficInfoNum.heavyCongestionMileage + distance
            }
          })
          this.setLayer(el.msgCont, el.sourceId, el.layerId)
        })
        this.trafficInfoNum = {
          closedTrafficMileage: parseFloat(
            trafficInfoNum.closedTrafficMileage,
          ).toFixed(0), //禁止通行里程
          patencyMileage: (
            parseFloat(y) * 1000 -
            parseFloat(trafficInfoNum.mildCongestionMileage).toFixed(0) -
            parseFloat(trafficInfoNum.heavyCongestionMileage).toFixed(0) -
            parseFloat(trafficInfoNum.moderateCongestionMileage).toFixed(0)
          ).toFixed(2), //通畅里程 1
          mildCongestionMileage: parseFloat(
            trafficInfoNum.mildCongestionMileage,
          ).toFixed(0), //中度拥堵里程
          heavyCongestionMileage: parseFloat(
            trafficInfoNum.heavyCongestionMileage,
          ).toFixed(0), //重度
          moderateCongestionMileage: parseFloat(
            trafficInfoNum.moderateCongestionMileage,
          ).toFixed(0), //中度拥堵里程 3
        }
      })
    },
    setTrafficLayer() {},
    //绘制图层
    setLayer(msgCont, sourceId, layerId) {
      this.clearDataLayer(sourceId, layerId)
      this.Map.addSource(sourceId, {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: msgCont.features,
        },
      })
      this.Map.addLayer({
        id: layerId,
        type: 'line',
        source: sourceId,
        layout: {
          'line-join': 'round',
          'line-cap': 'round',
          'border-visibility': 'visible',
          visibility: this.trafficInfo ? 'visible' : 'none',
        },
        paint: {
          'line-width': 4,
          'line-color': {
            type: 'categorical',
            property: 'kind',
            stops: [
              [0, '#710505'],
              [1, '#3fff00'],
              [2, '#fff700'],
              [3, '#ffa500'],
              [4, '#ff0000'],
            ],
            default: '#3fff00',
          },
        },
        // fitBounds
      })
      const qmz = JSON.parse(localStorage.getItem('mapCLkmz'))
      this.Map.moveLayer(layerId, qmz.MILESTONE_KM)
    },
    //绘制展示路标展示
    drawHighWayMark(dataList) {
      Object.values(this.markLocationList).forEach((el) => {
        console.log(el)
        el && el.remove()
      })
      console.log(dataList)
      this.markLocationList = []
      this.markerDomListID = []
      dataList.forEach((item) => {
        //大的marker
        var el = document.createElement('div')
        const w = item.sectionName.length * 16
        el.id = 'marker' + item.sectionId
        // el.addClass("rodeMarkerDiv")
        el.className = 'rodeMarkerDiv'
        el.style['background-image'] = `url(${markerbg})`
        el.style['background-size'] = `100% 100%`
        el.style['padding'] = '6px 0'
        el.style['height'] = '74px'
        el.style['width'] = w + 'px'
        el.style['text-align'] = 'center'
        el.style['font-size'] = '16px'

        var spn = document.createElement('span')
        spn.innerHTML = item.sectionName
        spn.style['color'] = '#fff'
        spn.style['font-style'] = 'italic'
        el.appendChild(spn)

        //小的marker
        var el1 = document.createElement('div')
        const w1 = item.sectionName.length * 12
        el1.id = 'marker' + item.sectionId
        // el.addClass("rodeMarkerDiv")
        el1.className = 'rodeMarkerDiv1'
        el1.style['background-image'] = `url(${markerbg})`
        el1.style['background-size'] = `100% 100%`
        el1.style['padding'] = '0'
        el1.style['height'] = '45px'
        el1.style['width'] = w1 + 'px'
        el1.style['text-align'] = 'center'
        el1.style['font-size'] = '12px'

        var spn1 = document.createElement('span')
        spn1.innerHTML = item.sectionName
        spn1.style['color'] = '#fff'
        spn1.style['font-style'] = 'italic'

        el1.appendChild(spn1)

        //全国显示小图标 否则显示大图标
        if (this.OrgId.length) {
          el.style.display = 'none'
          el1.style.display = 'block'
        } else {
          el.style.display = 'block'
          el1.style.display = 'none'
        }

        const halfw = 0 - w / 2
        const halfw1 = 0 - w1 / 2
        var marker = new minemap.Marker(el, { offset: [halfw, -70] })
          .setLngLat(item.markPoint)
          .addTo(this.Map)
        var marker1 = new minemap.Marker(el1, { offset: [halfw1, -40] })
          .setLngLat(item.markPoint)
          .addTo(this.Map)
        this.markLocationList['marker' + item.sectionId] = marker
        this.markLocationList['marker1' + item.sectionId] = marker1
        this.markerDomListID.push(el)
        this.markerDomListID.push(el1)
      })
    },
    // 路线api
    setSectionPoints() {
      return new Promise((resolve, reject) => {
        sectionPoints(this.ysId).then(({ code, msg, data }) => {
          if (code === 0) {
            if (!data) {
              // this.$store.dispatch('user/logout')
              // //this.$router.push(`/login?redirect=${this.$route.fullPath}`)
              // // 退出登录如果是本地环境跳转到模块登录页，如果是正式环境跳转到平台登录首页
              // function delCookie() {
              //     let keys = document.cookie.match(/[^ =;]+(?==)/g)
              //     if (keys) {
              //         for (let i = keys.length; i--; ) {
              //             document.cookie = keys[i] + '=0;path=/;expires=' + new Date(0).toUTCString() // 清除当前域名下的,例如：m.ratingdog.cn
              //         }
              //     }
              // }
              // delCookie()
              // if (process.env.VUE_APP_ENV === 'production') {
              //     self.location = 'http://183.64.175.153:28880/#/'
              // } else {
              //     this.$router.push('/login')
              // }
              return
            }
            let listArr = []
            data.forEach((item) => {
              if (item.linePoints.length !== 0) {
                listArr.push({
                  paths: JSON.parse(`[${item.linePoints}]`),
                  sectionName: item.sectionName,
                  sectionId: item.sectionId,
                })
              }
            })
            resolve(listArr)
          } else {
            this.$message.error(msg)
          }
        })
      })
    },
  },
})
</script>
<style lang="scss" scoped>
::v-deep(.el-switch__core) {
  background: #5c6476;
  border-color: #868b97;
}

::v-deep(.el-switch__label) {
  color: #fff;
}

::v-deep(.highWay) {
  display: flex;
  flex-direction: column;
  width: fit-content;

  .markHight {
    display: inline;
    padding: 5px 10px;
    font-size: 16px;
    font-style: italic;
    font-weight: 500;
    color: #fff;
    color: rgb(255, 255, 255);
    background: url('@/views/electromechanicalMange/assets/markTop.png')
      no-repeat;
    background-size: 100% 100%;
  }

  .markbuttom {
    display: inline;
    margin: 0 auto;

    img {
      width: 20px;
    }
  }
}

#mine-map {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.road {
  position: absolute;
  top: 140px;
  left: 30px;
  z-index: 1;

  .roadContanier {
    width: 180px;

    .btn {
      font-family: SourceHanSansCNRegular, sans-serif;
    }

    .detail {
      margin-top: 10px;

      .detail-item {
        display: flex;
        color: #fff;
        align-items: center;
        justify-content: space-between;

        .name {
          display: flex;
          align-items: center;

          .icon {
            width: 5px;
            height: 5px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}

.layer-contrl-mod {
  height: auto;
  /* width: 350px;
  height: 200px;
  position: absolute;
  bottom: 20px;
  left: 0; */
}

.layer-contrl {
  width: 100%;
  /* background: rgba(5, 15, 45, 0.5);
  border: 1px solid #00d0fd;
  border-radius: 8px; */
  overflow: auto;
  background: rgba(0, 0, 0, 0.3);
}

.group-content {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0 10px;
}

.group-item {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  line-height: 18px;
  color: #fff;
  box-sizing: border-box;

  &.active {
    color: #07ffed;
  }
}

.item-icon {
  width: 50px;
  height: 41px;
  margin: auto;
  /* background: red; */
}

.active .inlayertext {
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 192, 0, 0.45),
    transparent
  );
  color: rgba(255, 206, 90, 1);
}
</style>
<style lang="scss">
#mine-map {
  width: 100%;
  height: 100%;

  .minemap-popup {
    .minemap-popup-content {
      max-width: 500px !important;
      overflow: visible !important;
      background: transparent;
    }
  }

  .minemap-popup-anchor-left {
    .minemap-popup-tip {
      border-right-color: rgba(12, 57, 89, 0.85);
    }

    .minemap-popup-content {
      padding: 10px;
      background: rgba(12, 57, 89, 0.85);
    }

    .struct-popup {
      min-width: 120px;

      .struct-item {
        font-size: 14px;
        color: #fff;
        text-align: center;
      }
    }
  }

  .minemap-popup-anchor-bottom {
    .minemap-popup-tip {
      border-top-color: transparent;
      margin-top: -10px;
    }

    .prop-up-inspect {
      z-index: -1;
      width: 220px;
      height: 100%;
      border: solid transparent;
      border-width: 5px 10px;
      content: '';
      box-sizing: border-box;

      .prop-up-header {
        width: 100%;
        height: 100%;
        color: #fff;
        box-sizing: border-box;
      }

      .prop-up-header > div:first-child {
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: bold;
      }

      .prop-up-header > div {
        width: 100%;
        margin: 2px 0;
        font-size: 12px;
      }
    }
  }
}
</style>
