<template>
  <Module
    class="layer-contrl-mod"
    :loading="loading"
    :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"
            v-if="layer.show"
            :class="{
              active: selectedLayers.includes(layer.code.split('&')[0]),
            }"
            @click="onItemClick(layer.code, layer)"
            @mouseenter="openMask(layer.name, index)"
            @mouseleave="closeMask"
          >
            <div class="item-icon">
              <img
                v-if="selectedLayers.includes(layer.code.split('&')[0])"
                :src="iconlist[layer.code + 'Act']"
              />
              <img v-else :src="iconlist[layer.code]" />
            </div>
            <!-- {{ item }}
            <div class="inlayertext">{{ layer.name }}</div>-->
            <el-tooltip
              class="box-item"
              effect="dark"
              content="跳转明细"
              placement="bottom"
              hide-after="500"
              effect:srting="dark"
            >
              <template #content>
                <div @click="detail(index)" class="boxitem">跳转明细</div>
              </template>
              <div class="inlayertext">{{ layer.name }}</div>
            </el-tooltip>
          </div>
        </div>
      </div>
      <div v-show="custimgpupShow" class="cust-img-pup" ref="custimgpup">
        <div class="cust-img-pup-tit">
          <div class="cust-img-pup-tit-l">
            <img src="~@/assets/images/module-header-icon4.png" />
            <span>{{ popInfoData.name }}</span>
            <div class="pup-start-icon">
              <!-- <i class="el-icon-star-on"></i><i class="el-icon-star-on"></i
              ><i class="el-icon-star-on"></i><i class="el-icon-star-on"></i>-->
            </div>
          </div>
          <div class="cust-img-pup-tit-r" @click="colsePupwin">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="cust-img-pup-cont">
          <div style="margin-top: 5px">所在位置：{{ popInfoData.locationmaintenancearea }}</div>
          <div style="margin-top: 5px">养护人员数量：{{ popInfoData.personnelquantity }}</div>
          <div style="margin-top: 5px ;display: flex; justify-content:space-between;">养护车辆数量：{{ popInfoData.personnelquantity }}  <div style="display: inline-block;  height: 14px; font-size: 14px; color: #3caeff; cursor: pointer;" @click="YhDetail">跳转明细</div></div>
        
          <!-- <div>
            {{ pupShowText }}
            <span class="cust-img-pup-fold" v-if="isOver" @click="changeStatus"
              >{{ statusText }}{{ statusText == "展开" ? ">>" : "<<" }}</span
            >
          </div>-->
        </div>
        <div class="cust-img-pup-imgs">
          <img
            v-if="popInfoData.picture1"
            :src="popInfoData.picture1"
            style="width: 49%; border: 1px solid #00b9ff"
          />
          <img
            v-if="popInfoData.picture2"
            :src="popInfoData.picture2"
            style="width: 49%; border: 1px solid #00b9ff"
          />
        </div>
      </div>
    </div>
    <!-- <div v-if="showMask" class="mask" :style="{ left: left + 'px' }">
      {{ name }}
    </div>-->
  </Module>
</template>
<script lang="jsx">
import { defineComponent } from "vue";
import { mapState, mapMutations } from "vuex";

import brg from "@/assets/images/baseStruct/brg.png";
import brgAct from "@/assets/images/baseStruct/brg-active.png";
import tunnel from "@/assets/images/baseStruct/tunnel.png";
import tunnelAct from "@/assets/images/baseStruct/tunnel-active.png";
import route from "@/assets/images/baseStruct/route.png";
import routeAct from "@/assets/images/baseStruct/route-active.png";
import bp from "@/assets/images/baseStruct/bp.png";
import bpAct from "@/assets/images/baseStruct/bp-active.png";
import hd from "@/assets/images/baseStruct/hd.png";
import hdAct from "@/assets/images/baseStruct/hd-active.png";





import YHCL from "@/assets/images/baseStruct/yhcl.png";
import YHCLAct from "@/assets/images/baseStruct/yhcl-active.png";
import YHGQ from "@/assets/images/baseStruct/conserve.png";
import YHGQAct from "@/assets/images/baseStruct/conserve-active.png";
import YJWZ from "@/assets/images/baseStruct/emergency.png";
import YJWZAct from "@/assets/images/baseStruct/emergency-active.png";
import JYD from "@/assets/images/baseStruct/rescue.png";
import JYDAct from "@/assets/images/baseStruct/rescue-active.png";

import YLSSpng from "@/assets/images/chargeManage/ylsspinticon.png";
import YHCLpng from "@/assets/images/chargeManage/yhclpinticon.png";
import YHGQpng from "@/assets/images/chargeManage/yhgqpinticon.png";
import YJWZpng from "@/assets/images/chargeManage/yjwzpointicon.png";
import JYDpng from "@/assets/images/chargeManage/jydpointicon.png";

import SFZpng from "./Map/images/收费站.png";
import FWQpng from "./Map/images/服务区.png";
import HTpng from "./Map/images/互通.png";
import BPpng from "@/assets/images/chargeManage/pbpinticon.png";
import QLpng from "./Map/images/桥梁.png";
import SDpng from "./Map/images/隧道.png";
import HDpng from "./Map/images/涵洞.png";

import {
  mtWorkAreaInfo,
  emergencySupplyInfo,
  rescuePointInfo,
  roadsideInfo,
  sideslopeInfo,
  tollstationInfo,
  serviceareaInfo,
  hutongInfo,
  bridgeInfo,
  tunnelInfo,
  culvertInfo,
  workareaBaseInfo,
} from "@/api/curingManage";
import { getVideoCameraResourceCar } from "@/api/operationMonitor"; //养护车辆
import { getLinke } from "@/api/chargeInfo";
import { generateKey } from "@/api/operation";
export default defineComponent({
  data() {
    return {
      name: null,
      left: null,
      showMask: false,
      iconlist: {
        YHCL: YHCL,
        YHCLAct: YHCLAct,
        YHGQ: YHGQ,
        YHGQAct: YHGQAct,
        YJWZ: YJWZ,
        YJWZAct: YJWZAct,
        JYD: JYD,
        JYDAct: JYDAct,
      },
      hasEquipmentInfo: ["BOARD", "EP_T", "P_LJQ", "MTL"],
      equipmentDialogObj: {
        equipmentInfoVisible: false,
        data: {},
      },
      layersData: [
        {
          name: "养护车辆",
          code: "YHCL",
          show: true,
        },
        {
          name: "养护工区",
          code: "YHGQ",
          show: true,
        },
        {
          name: "应急物资",
          code: "YJWZ",
          show: true,
        },
        {
          name: "救援点",
          code: "JYD",
          show: true,
        },
        // {
        //   name: "路段",
        //   code: "LD",
        //   show: false,
        // },
        {
          name: "收费站",
          code: "SFZ",
          baseCode: 'stat', //左侧基础设施的code
          show: false,
        },
        {
          name: "服务区",
          code: "FWQ",
          baseCode: 'area',
          show: false,
        },
        {
          name: "互通",
          code: "HT",
          baseCode: 'huTong',
          show: false,
        },
        {
          name: "边坡",
          code: "BP",
          baseCode: 'sideslope',
          show: false,
        },
        {
          name: "桥梁",
          code: "QL",
          baseCode: 'bridge',
          show: false,
        },
        {
          name: "隧道",
          code: "SD",
          baseCode: 'tunnel',
          show: false,
        },
        {
          name: "涵洞",
          code: "HD",
          baseCode: 'culvert',
          show: false,
        },
        // {
        //   name: "沿路设施",
        //   code: "YLSS",
        //   show: false,
        // }
      ],
      isfirstClk: true,
      selectedLayers: [], //选中的类别
      query: {
        level: 0,
        dimension: ''
      },
      baseStuctCode: '', //上次选择的左侧基础设施
      popup: null,
      popInfoData: {},
      isOver: false, // pup弹窗上的简介是否需要展开收起
      pupShowText: '', //展示在pup弹窗上的简介文字，根据展开/收起变化
      statusText: '展开',
      custimgpupShow: false
    };
  },
  computed: {
    ...mapState({
      selectRoad: (state) => state.road.selectRoadId,
      map: (state) => state.map.map,
      activeCuringBaseStruct: (state) => state.activeCuringBaseStruct,
    }),
  },
  watch: {
    map(val) {
      this.popup = new minemap.Popup({ closeButton: false, offset: [0, 0] })
      // const str = this.$refs.custimgpup
      // this.popup.setDOMContent(str).setLngLat([0, 0]).addTo(this.map);
      // this.getDataPoint();
    },
    selectRoad(newVal) {
      this.custimgpupShow = false
      const level = this.$store.state.road.selectLevel;
      const roadId = newVal ? newVal[level - 1] : "";
      this.query.level = level;
      this.query.dimension = roadId || '';
      this.roadChange();
    },
    activeCuringBaseStruct(newVal) {
      if(this.baseStuctCode) {
        this.onItemClick(this.baseStuctCode) //因为左侧的基础设施是单选，所有切换时，需要删除上次选中的
      }
      this.layersData.forEach(ele => {
        if(ele.baseCode == newVal){
          this.baseStuctCode = ele.code
          this.selectedLayers.push(ele.code);
          this.getDataPoint(ele.code)
        }
      });
    }
  },
  
  
  methods: {
     async detail(index){ 
      let ResData = await getLinke()
      const arr = ResData.msgContent.filter(item => item.sysCode == 'HY')
      const link = arr[0].url
       generateKey().then((res) => {
      if(index===0){return window.open(`http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=carManagement`);}//养护出辆
      if(index===1){return window.open(`http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=maintenanceWorkArea`);}//养护工区
      if(index===2){return window.open(`http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=emergencySupplies`);}//应急物资
      if(index===3){return window.open(`http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=rescuePoint`);}//救援点
     });
   },
    YhDetail(){
    generateKey().then((res) => {
     window.open(`http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=maintenanceWorkArea`)
     });
   },
    
    openMask(name, index) {
      this.name = name;
      this.showMask = true;
      this.left = this.$refs["groupContent"].childNodes[index + 1].offsetLeft;
    },
    closeMask() {
      this.showMask = false;
    },

    //组织机构切换，对应的点也要变化
    roadChange(){
      if(this.selectedLayers.length > 0) {
        this.selectedLayers.forEach(ele => {
          this.map.removeSource('yhpointSource' + ele)
          this.map.removeLayer('yhpagepoint' + ele)
          this.map.removeImage('yhpage' + ele)
          this.getDataPoint(ele)
        });
      }
    },
    onItemClick(code) {
      const idx = this.selectedLayers.indexOf(code);
      if (idx > -1) {
        //  已有此类别，则删除图层
        this.selectedLayers.splice(idx, 1);
        this.map.removeSource('yhpointSource' + code)
        this.map.removeLayer('yhpagepoint' + code)
      } else {
        //  没有此类别，则添加图层
        this.selectedLayers.push(code);
        this.getDataPoint(code)
      }
    },
    //获取点的经纬度
    async getDataPoint(code) {
      let data, imgurl;
      let dataArr = []
      switch (code) {
        case "YHCL":  //养护车辆
          data = await getVideoCameraResourceCar(this.query)
          data.data.forEach(val => {
            val.children.forEach(ele => {
              if(ele.status === 1) {
                dataArr.push({
                  id: ele.value,
                  name: ele.lable,
                  pegk: ele.name,
                  type: '养护车辆',
                  longitude: ele.longitude,
                  latitude: ele.latitude,
                })
              }
            });
          });
          imgurl = YHCLpng
          break;
        case "YHGQ":  //养护工区
          data = await workareaBaseInfo(this.query)
          data.msgContent.forEach(ele => {
            dataArr.push({
              id: ele.id,
              name: ele.name,
              pegk: ele.centpegk,
              type: '养护工区',
              longitude: ele.lng,
              latitude: ele.lat,
            })
          });
          imgurl = YHGQpng
          break;
        case "YJWZ":  //应急物资
          data = await emergencySupplyInfo(this.query)
          data.msgContent.forEach(ele => {
            dataArr.push({
              id: ele.id,
              name: ele.storeName,
              pegk: ele.centerStake,
              type: '应急物资',
              longitude: ele.longitude,
              latitude: ele.latitude,
            })
          });
          imgurl = YJWZpng
          break;
        case "JYD":  //救援点
          data = await rescuePointInfo(this.query)
          data.msgContent.forEach(ele => {
            dataArr.push({
              id: ele.id,
              name: ele.pointName,
              pegk: ele.centerStake,
              type: '救援点',
              longitude: ele.longitude,
              latitude: ele.latitude,
              carCount:ele.carCount
            })
          });
          imgurl = JYDpng
          break;
        case "SFZ":  //收费站
          data = await tollstationInfo(this.query)
          data.msgContent.forEach(ele => {
            dataArr.push({
              id: ele.id,
              name: ele.stationName,
              pegk: ele.pegk,
              type: '收费站',
              longitude: ele.lng,
              latitude: ele.lat,
            })
          });
          imgurl = SFZpng
          break;
        case "FWQ":  //服务区
          data = await serviceareaInfo(this.query)
          data.msgContent.forEach(ele => {
            dataArr.push({
              id: ele.id,
              name: ele.areaName,
              pegk: ele.pegk,
              type: '服务区',
              longitude: ele.lng,
              latitude: ele.lat,
            })
          });
          imgurl = FWQpng
          break;
        case "HT":  //互通
          data = await hutongInfo(this.query)
          data.msgContent.forEach(ele => {
            dataArr.push({
              id: ele.id,
              name: ele.faciName,
              pegk: ele.pegk,
              type: '互通',
              longitude: ele.longitude,
              latitude: ele.latitude,
            })
          });
          imgurl = HTpng
          break;
        case "BP":  //边坡
          data = await sideslopeInfo(this.query)
          data.msgContent.forEach(ele => {
            dataArr.push({
              id: ele.id,
              name: ele.geology,
              pegk: ele.startpegk + '  ' +ele.endpegk,
              type: '边坡',
              longitude: ele.longitude,
              latitude: ele.latitude,
            })
          });
          imgurl = BPpng
          break;
        case "QL":  //桥梁
          data = await bridgeInfo(this.query) // bridgeName finishDate bridgeLength  longitude latitude
          data.msgContent.forEach(ele => {
            dataArr.push({
              id: ele.id,
              name: ele.bridgeName,
              pegk: '',
              type: '桥梁',
              eqlength: '长度：'+ ele.bridgeLength + '米',
              time: '建设时间：' + ele.finishDate,
              longitude: ele.longitude,
              latitude: ele.latitude,
            })
          });
          imgurl = QLpng
          break;
        case "SD":  //隧道
          data = await tunnelInfo(this.query)
          data.msgContent.forEach(ele => {
            dataArr.push({
              id: ele.id,
              name: ele.tunnelName,
              pegk: ele.centpegk,
              type: '隧道',
              eqlength: '长度：'+ ele.tunnelLength + '米',
              time: '建设时间：' + ele.finishDate,
              longitude: ele.longitude,
              latitude: ele.latitude,
            })
          });
          imgurl = SDpng
          break;
        case "HD":  //涵洞
          data = await culvertInfo(this.query)
          data.msgContent.forEach(ele => {
            dataArr.push({
              id: ele.id,
              name: ele.culvertName,
              pegk: ele.centpegk,
              type: '涵洞',
              eqlength: '长度：'+ ele.culvertLength + '米',
              time: '建设时间：' + ele.finishDate,
              longitude: ele.longitude,
              latitude: ele.latitude,
            })
          });
          imgurl = HDpng
          break;
        default:
          break;
      }
      this.reorgData(dataArr, code, imgurl)
      
    },
    // 将数据重组为地图需要的格式
    reorgData(arr, type, imgurl) {
      const pres = {
        type: "FeatureCollection",
        features: [],
      };
      arr.forEach((item, index) => {
        if (item.longitude && item.latitude) {
          const itemtext = JSON.stringify(item)
          let nametext = item.areaName || item.supplyName || item.pointName;
          pres.features.push({
            geometry: {
              type: "Point",
              coordinates: [item.longitude, item.latitude],
            },
            properties: {
              title: item.type,
              kind: item.id,
              itemcont: itemtext
            },
            type: "Feature",
          });
        }
      });
      this.addSource(pres, type, imgurl);
      // this.addSourcestest()
    },
  
    addSource(arr, type, imgurl) {
      let { map } = this;
      const _that = this
      this.map.addSource("yhpointSource" + type, {
        type: "geojson",
        data: arr,
      });
      map.loadImage(imgurl, function (error, image) {
        if (error) throw error;
        // 添加自定义图标
        map.addImage("yhpage" + type, image);
        map.addLayer({
          id: "yhpagepoint" + type,
          type: "symbol",
          source: "yhpointSource" + type,
          filter: ["!has", "point_count"],
          layout: {
            "icon-image": "yhpage" + type,
            "icon-size": 1,
            // "symbol-avoid-edges": true,
            // "icon-allow-overlap": true,
            // "icon-ignore-placement": true,
            // "symbol-spacing": 20
            "icon-padding": 0,
            // visibility: "none",
          },
        });
      });
      map.on('mouseenter', "yhpagepoint" + type, function (e) {
        var features = map.queryRenderedFeatures(e.point, { layers: ["yhpagepoint" + type] });
        if(features.length > 0) {
          const obj = JSON.parse(features[0].properties.itemcont)
          if(features[0].properties.title == '养护工区') {
            _that.getPointInfo(obj)
          } 
          if(features[0].properties.title == '救援点'){
            const str = `<div style="padding:5px 8px 10px 0; min-width: 200px;display: flex;">
           <div style="width: 65px;text-align: center;border-right: 1px solid #1767A5;">
             <img src="${imgurl}" style="width: 30px; height: 30px; margin: auto;"><div style="margin-top: 8px">${obj.type}</div>
             <div class='goDetails' style=" color:#3caeff;  cursor: pointer;">跳转明细</div>
           </div>
           <div style="margin-left: 10px;"><div style="font-size: 16px;margin-bottom: 10px">${obj.name}</div>
               <div>${obj.pegk ? obj.pegk : ''}</div><div>${obj.time ? obj.time: ''}</div>
               <div>${obj.eqlength ? obj.eqlength: ''}</div>
               <div>救援车辆: ${obj.carCount}</div>
           </div>
           </div>`
           _that.popup.setHTML(str).setLngLat([obj.longitude, obj.latitude]).addTo(map);
           const cla = document.querySelector('.goDetails')
           cla.onclick = function(){
           generateKey().then((res) => {
           if(features[0].properties.title =='救援点'){return window.open(`http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=rescuePoint`);}
           });
           
}
          }
           if(features[0].properties.title !== '养护工区'&&features[0].properties.title !== '救援点') {
            const str = `<div style="padding:5px 8px 10px 0; min-width: 200px;display: flex;">

                          <div style="width: 65px;text-align: center;border-right: 1px solid #1767A5;">
                            <img src="${imgurl}" style="width: 30px; height: 30px; margin: auto;"><div style="margin-top: 8px">${obj.type}</div>
                            <div class='goDetails' style=" color:#3caeff;  cursor: pointer;">跳转明细</div>
                          </div>
                          <div style="margin-left: 10px;"><div style="font-size: 16px;margin-bottom: 10px">${obj.name}</div>
                              <div>${obj.pegk ? obj.pegk : ''}</div><div>${obj.time ? obj.time: ''}</div>
                              <div>${obj.eqlength ? obj.eqlength: ''}</div>
                          </div>
                      </div>`
            _that.popup.setHTML(str).setLngLat([obj.longitude, obj.latitude]).addTo(map);
            const cla = document.querySelector('.goDetails')
            cla.onclick = function(){
              generateKey().then((res) => {
                if(features[0].properties.title =='养护车辆'){return window.open(`http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=carManagement`);}
                if(features[0].properties.title =='应急物资'){return window.open(`http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=emergencySupplies`);}
                if(features[0].properties.title =='救援点'){return window.open(`http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=rescuePoint`);}
     });

            }
          }
         
          // _that.popup.setLngLat([obj.longitude, obj.latitude]).addTo(map);
        } else {
           _that.popup.setLngLat([0, 0]).addTo(map);
        }
      })
       map.on('mouseleave', "yhpagepoint" + type, function () {
          // _that.popShow = false
          // _that.popup.setLngLat([0, 0]).addTo(map);
          setTimeout(()=>{
            _that.popup.setLngLat([0, 0]).addTo(map);
            _that.custimgpupShow = false
          },2000)
        
        });
    },


 
    async getPointInfo(obj) {
      const datas = await workareaBaseInfo({ workeareaid: obj.id })
      this.popInfoData = datas.msgContent[0]
      // if (this.popInfoData.centpegk && this.popInfoData.centpegk.length > 78) {
      //   this.popInfoData.subBaseinfo = this.popInfoData.centpegk.substring(0, 70) + '...'
      //   this.isOver = true
      //   this.pupShowText = this.popInfoData.subBaseinfo
      //   this.statusText = '展开'
      // } else {
      //   this.isOver = false
      //   this.pupShowText = this.popInfoData.centpegk
      // }
      const str = this.$refs.custimgpup
      this.custimgpupShow = true
      this.popup.setDOMContent(str).setLngLat([obj.longitude, obj.latitude]).addTo(this.map);
    },
    //关闭弹窗
    colsePupwin() {
      this.popup.setLngLat([0, 0]).addTo(this.map);
    },
    // 弹框文字展开收起
    changeStatus() {
      if (this.statusText == '展开') {
        this.pupShowText = this.popInfoData.baseinfo
        this.statusText = '收起'
      } else {
        this.pupShowText = this.popInfoData.subBaseinfo
        this.statusText = '展开'
      }
    },
  },
});
</script>
<style lang="postcss" scoped>
.mask {
  position: absolute;
  bottom: -15px;
  width: 200px;
  height: 30px;
}
.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-title {
  position: relative;
  color: #d5fbff;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  padding-left: 15px;
  &::before {
    position: absolute;
    left: 0;
    content: " ";
    width: 5px;
    height: 18px;
    background: linear-gradient(180deg, #f7ffff, #00d3ff);
    border-radius: 2px;
  }
}
.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;
  }
}
.layerIcon {
  margin: auto;
  width: 10px;
  height: 10px;
  color: #fff;
}
.icon {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ede9e9;
  border-radius: 50%;
  margin-bottom: 5px;
}
.active .inlayertext {
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 192, 0, 0.45),
    transparent
  );
  color: rgba(255, 206, 90, 1);
}
.inlayertext {
  font-weight: bold;
  letter-spacing: 1px;
  width: 100%;
  height: 15px;
  line-height: 15px;
  margin: auto;
  margin-top: 0;
  margin-bottom: 0.1rem;
  text-align: center;
  color: #badeff;
  font-size: 13px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 72, 137, 1),
    transparent
  );
}
.item-icon {
  width: 50px;
  height: 41px;
  margin: auto;
  /* background: red; */
}
.boxitem {
  cursor: pointer;
}
::v-deep(.minemap-popup) {
  z-index: 999;
}

::v-deep(.minemap-popup-content:before) {
  border-image: none !important;
  background-image: url("@/assets/images/expressway/popbg.png");
  background-size: 100% 100%;
  border-width: 0 !important;
  padding: 0;
}
::v-deep(.minemap-popup-content) {
  max-width: 410px !important;
}
::v-deep(.minemap-popup-content) {
  max-width: 410px !important;
  border-image: none !important;
  background-image: url("@/assets/images/expressway/popbg.png");
  background-size: 100% 100%;
  border-width: 0 !important;
  background-color: transparent !important;
}
::v-deep(.minemap-popup-tip) {
  border-top-color: #0c233c;
}
.cust-img-pup {
  width: 400px;
  padding: 20px 24px 24px 14px;
}
.cust-img-pup-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cust-img-pup-tit-l {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  font-style: oblique;
  img {
    width: 14px;
    height: 16px;
    margin-right: 15px;
    position: relative;
    top: -1px;
  }

  .pup-start-icon {
    color: #ffc03c;
    margin-left: 15px;
  }
}
.cust-img-pup-tit-r {
  font-size: 22px;
  cursor: pointer;
}
.cust-img-pup-cont {
  padding-top: 5px;
  font-size: 14px;
}
.cust-img-pup-fold {
  color: #00b9ff;
  cursor: pointer;
}
.cust-img-pup-imgs {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  img {
    width: 49%;
    border: 1px solid #00b9ff;
  }
}

</style>
