<template>
  <div class="center-container">
    <div class="statistics-panel">
      <div v-for="(stat, index) in statistics" :key="index" class="stat-card" style="position: relative;">
  <div
    class="box"
    @mouseenter="stat.label=='服务区'?showDropdown = true:stat.label==='收费站'?showDropdown1 = true:stat.label==='桥梁（座）'?showDropdown2 = true:stat.label==='枢纽互通（座）'?showDropdown3 = true:''"
    @mouseleave="stat.label=='服务区'?showDropdown = false:stat.label==='收费站'?showDropdown1 = false:stat.label==='桥梁（座）'?showDropdown2 = false:stat.label==='枢纽互通（座）'?showDropdown3 = false:''"
    style="position: relative;"
  >
    <div class="icon-wrapper">
      <img :src="stat.image" :alt="stat.label" />
    </div>
    <div class="stat-content">
      <div class="stat-label">
        {{ stat.label }}
      </div>
      <div class="stat-value">
        <span class="number">{{ stat.value }}</span>
      </div>
    </div>
    <!-- 只在服务区显示下拉选择 -->
    <template v-if="stat.label === '服务区'">
      <div
        v-show="showDropdown"
        class="dropdown large-dropdown"
        @mouseenter="showDropdown = true"
        @mouseleave="showDropdown = false"
      >
        <div
          class="dropdown-item"
          v-for="area in serviceAreas"
          :key="area"
          @click="selectServiceArea(area)"
        >
          {{ area.name }}
        </div>
      </div>
    </template>
    <!-- 收费站 -->
      <template v-if="stat.label === '收费站'">
      <div
        v-show="showDropdown1"
        class="dropdown large-dropdown"
        @mouseenter="showDropdown1 = true"
        @mouseleave="showDropdown1 = false"
      >
        <div
          class="dropdown-item"
          v-for="area in tollStationList"
          :key="area"
          @click="selectServiceArea(area)"
        >
          {{ area.name }}
        </div>
      </div>
    </template>
 <!-- 桥梁 -->
     <template v-if="stat.label === '桥梁（座）'">
      <div
        v-show="showDropdown2"
        class="dropdown large-dropdown"
        @mouseenter="showDropdown2 = true"
        @mouseleave="showDropdown2 = false"
      >
        <div
          class="dropdown-item"
          v-for="area in bridgeList"
          :key="area"
          @click="selectServiceArea(area)"
        >
          {{ area.name }}
        </div>
      </div>
    </template>
 <!-- 枢纽互通（座） -->
     <template v-if="stat.label === '枢纽互通（座）'">
      <div
        v-show="showDropdown3"
        class="dropdown large-dropdown"
        @mouseenter="showDropdown3 = true"
        @mouseleave="showDropdown3 = false"
      >
        <div
          class="dropdown-item"
          v-for="area in hubIntercommunicationList"
          :key="area"
          @click="selectServiceArea(area)"
        >
          {{ area.name }}
        </div>
      </div>
    </template>
  </div>
</div>
    </div>
    <!-- 下面弹框标题用当前选中的服务区 -->
    <!-- <div v-if="showServiceArea" class="map-container">
      <div class="map-title">
        <div class="title-content">
          <span class="title-text">{{ selectedServiceArea }}</span>
        </div>
        <div class="close-btn" @click="closeDialog">×</div>
      </div>
      <div class="map-con">
        <RealTimeImageCenter />
      </div>
    </div> -->
    <div v-if="showServiceArea" style="width: 5664px;" class="map-container RealTimeImage">
      <div class="map-title">
        <div class="title-content">
          <span class="title-text">{{selectedServiceArea}}</span>
        </div>
        <div class="close-btn" @click="closeDialog">×</div>
      </div>
      <div class="map-con">
        <RealTimeImageCenter  :popUpContent="popUpContent"/>
      </div>
    </div>
    <div class="map-container bg-header bg-header-one" style="width: 1800px;" v-if="showDeviceInfo">
      <div class="map-title">
        <div class="title-content">
          <span class="title-text">设备信息（NO：{{ deviceInfo.deviceId }}）</span>
        </div>
        <div class="close-btn" @click="closeDeviceInfo">×</div>
      </div>
      <div class="map-con">
        <DeviceInfoComponent :deviceInfo="deviceInfo" />
      </div>
    </div>
    <div class="map-container bg-header bg-header-two" style="width: 1800px;height: 1000px;" v-if="showDeviceInfoTwo">
      <div class="map-title">
        <div class="title-content">
          <span class="title-text">设备信息（NO：{{ deviceInfo.deviceId }}）</span>
        </div>
        <div class="close-btn" @click="closeDeviceInfo">×</div>
      </div>
      <div class="map-con">
        <DeviceInfoComponentTwo :deviceInfo="deviceInfoTwo" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { onMounted } from 'vue';
import fee from "@/assets/img/fee.png";
import fwq from "@/assets/img/fwq2.png";
import km from "@/assets/img/km.png";
import toll from "@/assets/img/toll.png";
import RealTimeImageCenter from "./RealTimeImageCenter.vue";
import DeviceInfoComponent from "./DeviceInfoComponent.vue";
import bridge from "@/assets/img/bridge.png";
import hub from "@/assets/img/hub.png";
import { getDeviceList } from "@/api/modules/index";
import DeviceInfoComponentTwo from "./DeviceInfoComponentTwo.vue";
import Map from "./map.vue"
import { emitter } from '@/utils/eventBus';
import fwqImage from "@/assets/img/fwq.png";
import ql from "@/assets/img/ql.png";
import sfz from "@/assets/img/sfz.png";
import snht from "@/assets/img/snht.png";
const showServiceArea = ref(false);
const showMap = ref(true);
const showDeviceInfo = ref(false);
const showDeviceInfoTwo = ref(false);
const closeDialog = () => {
  showServiceArea.value = false;
};
const showDropdown = ref(false);
const showDropdown1 = ref(false);
const showDropdown2 = ref(false);
const showDropdown3 = ref(false);
//服务区
const serviceAreas =[{
    name:"南皮服务区",
    type:'服务区',
    fwqImage:fwqImage,
    areaData:{
    value: 6000,
    unit: "m²",
    name1:'占地面积(m²)'
    },
llist:[
  { label: "充电车位", value: 1888 },
  { label: "大型车位", value: 60 },
  { label: "小型车位", value: 200 },
  { label: "危险品车位", value: 20 },
]},{
   name:"东光服务区",
   type:'服务区',
   fwqImage:fwqImage,
   areaData:{
    value: 6000,
    unit: "m²",
    name1:'占地面积(m²)'
    },
    llist:[
  { label: "充电车位", value: 1888 },
  { label: "大型车位", value: 60 },
  { label: "小型车位", value: 200 },
  { label: "危险品车位", value: 20 }] 
}]
const popUpContent= ref([])
const selectedServiceArea = ref({});
//收费站
// const tollStationList = ["连镇", "找王", "寨子", "盐山", "盐山东"];

const tollStationList = [{
    name:"连镇",
    type:'收费站',
    fwqImage:sfz,
    areaData:{
    value: 1200,
    unit: "m²",
    name1:'建筑面积(m²)'
    },
llist:[
  { label: "入口ETC车道", value: 2 },
  { label: "出口ETC车道", value: 2 },
  { label: "入口混合车道", value: 2 },
  { label: "出口混合车道", value: 2 },
]},{
   name:"找王",
   type:'收费站',
   fwqImage:sfz,
    areaData:{
    value: 1200,
    unit: "m²",
    name1:'建筑面积(m²)'
    },
llist:[
  { label: "入口ETC车道", value: 2 },
  { label: "出口ETC车道", value: 2 },
  { label: "入口混合车道", value: 2 },
  { label: "出口混合车道", value: 2 },
]
},{
   name:"寨子",
   type:'收费站',
   fwqImage:sfz,
    areaData:{
    value: 1200,
    unit: "m²",
    name1:'建筑面积(m²)'
    },
llist:[
  { label: "入口ETC车道", value: 2 },
  { label: "出口ETC车道", value: 2 },
  { label: "入口混合车道", value: 2 },
  { label: "出口混合车道", value: 2 },
]
},{
   name:"盐山",
   type:'收费站',
   fwqImage:sfz,
    areaData:{
    value: 1200,
    unit: "m²",
    name1:'建筑面积(m²)'
    },
llist:[
  { label: "入口ETC车道", value: 1 },
  { label: "出口ETC车道", value: 1 },
  { label: "入口混合车道", value: 2 },
  { label: "出口混合车道", value: 2 },
]
},{
   name:"盐山东",
   type:'收费站',
   fwqImage:sfz,
    areaData:{
    value: 1200,
    unit: "m²",
    name1:'建筑面积(m²)'
    },
llist:[
  { label: "入口ETC车道", value: 2 },
  { label: "出口ETC车道", value: 2 },
  { label: "入口混合车道", value: 2 },
  { label: "出口混合车道", value: 2 },
]
}];
const tollStation = ref("连镇");
//桥梁
// const bridgeList = ["南运河特大桥", "秦庄村大桥", "宣惠河大桥", "沙河大桥", "龙王河大桥", "大单沟大桥", "大商平底渠大桥"];
const bridgeList = [{
   name:"南运河特大桥",
   type:'桥梁（座）',
   fwqImage:ql,
    areaData:{
    value: 1003.838,
    unit: "m²",
    name1:'长度(m)（沧州境内）'
    },
llist:[
  { label: "中心桩号", value: 'K61+407' },
]
},{
   name:"秦庄村大桥",
   type:'桥梁（座）',
   fwqImage:ql,
    areaData:{
    value:577.543,
    unit: "m²",
    name1:'长度(m)'
    },
llist:[
  { label: "中心桩号", value: 'K62+401' },
]
},{
   name:"宣惠河大桥",
   type:'桥梁（座）',
   fwqImage:ql,
    areaData:{
    value:702,
    unit: "m²",
    name1:'长度(m)'
    },
llist:[
  { label: "中心桩号", value: 'K65+716' },
]
},{
   name:"沙河大桥",
   type:'桥梁（座）',
   fwqImage:ql,
    areaData:{
    value:131,
    unit: "m²",
    name1:'长度(m)'
    },
llist:[
  { label: "中心桩号", value: 'K76+079' },
]
},{
   name:"龙王河大桥",
   type:'桥梁（座）',
   fwqImage:ql,
    areaData:{
    value:156,
    unit: "m²",
    name1:'长度(m)'
    },
llist:[
  { label: "中心桩号", value: 'K90+280' },
]
},{
   name:"大单沟大桥",
   type:'桥梁（座）',
   fwqImage:ql,
    areaData:{
    value:127,
    unit: "m²",
    name1:'长度(m)'
    },
llist:[
  { label: "中心桩号", value: 'K96+099' },
]
},{
   name:"大商平底渠大桥",
   type:'桥梁（座）',
   fwqImage:ql,
    areaData:{
    value:106,
    unit: "m²",
    name1:'长度(m)'
    },
llist:[
  { label: "中心桩号", value: 'K114+265' },
]
}];
const bridge1 = ref("南运河特大桥");
//枢纽互通
// const hubIntercommunicationList = ["连镇互通", "大屯枢纽", "找王互通", "寨子互通", "小庄枢纽", "盐山互通", "盐山东互通"];
const hubIntercommunicationList = [{
   name:"连镇互通",
   type:'枢纽互通',
   fwqImage:snht,
    areaData:{
    value:'K64+776',
    unit: "m²",
    name1:'桩号'
    },
llist:[
  { label: "被交路名称", value: 'G105(京澳线)' },
  { label: "被交路等级", value: '一级公路' },
]
},{
   name:"大屯枢纽",
   type:'枢纽互通',
   fwqImage:snht,
    areaData:{
    value:'K69+454',
    unit: "m²",
    name1:'桩号'
    },
llist:[
  { label: "被交路名称", value: '京台高速' },
  { label: "被交路等级", value: '高速公路' },
]
},{
   name:"找王互通",
   type:'枢纽互通',
   fwqImage:snht,
    areaData:{
    value:'K80+359',
    unit: "m²",
    name1:'桩号'
    },
llist:[
  { label: "被交路名称", value: 'S337(辛平线)' },
  { label: "被交路等级", value: '一级公路' },
]
},{
   name:"寨子互通",
   type:'枢纽互通',
   fwqImage:snht,
    areaData:{
    value:'K80+359',
    unit: "m²",
    name1:'桩号'
    },
llist:[
  { label: "被交路名称", value: 'G104(京平线)' },
  { label: "被交路等级", value: '二级公路' },
]
},{
   name:"小庄枢纽",
   type:'枢纽互通',
   fwqImage:snht,
    areaData:{
    value:'K119+655',
    unit: "m²",
    name1:'桩号'
    },
llist:[
  { label: "被交路名称", value: '京沪高速' },
  { label: "被交路等级", value: '高速公路' },
]
},{
   name:"盐山互通",
   type:'枢纽互通',
   fwqImage:snht,
    areaData:{
    value:'S216(吕千线)',
    unit: "m²",
    name1:'桩号'
    },
llist:[
  { label: "被交路名称", value: 'S216(吕千线)' },
  { label: "被交路等级", value: '一级公路' },
]
},{
   name:"盐山东互通",
   type:'枢纽互通',
   fwqImage:snht,
    areaData:{
    value:'K139+358',
    unit: "m²",
    name1:'桩号'
    },
llist:[
  { label: "被交路名称", value: 'G205(山深线)' },
  { label: "被交路等级", value: '一级公路' },
]
}];
const hubIntercommunication = ref("连镇互通");

function selectServiceArea(area) {
     console.log(area, 'tttttttttt')
  selectedServiceArea.value = area.name;
popUpContent.value = area
  tollStation.value = area;
    bridge1.value = area;
      hubIntercommunication.value = area;
  showServiceArea.value = true;
  showDropdown.value = false;
   showDropdown1.value = false;
   showDropdown2.value = false;
   showDropdown3.value = false;
}
// 统计数据配置
const statistics = ref([
  {
    image: km,
    value: "78.338",
    label: "全里程（公里）",
  },
  {
    image: toll,
    value: "5",
    label: "收费站",
  },
  {
    image: fwq,
    value: "2",
    label: "服务区",
  },
  {
    image: bridge,
    value: "7",
    label: "桥梁（座）",
  },
  {
    image: hub,
    value: "7",
    label: "枢纽互通（座）",
  },
]);

// 设备信息数据
const deviceInfo = ref({
  deviceType: '视频监控',
  cameraType: '枪机',
  deviceCode: '3_CAM1_0',
  roadSection: '路段名称',
  direction: '邯郸方向',
  stakeNumber: 'K18+324',
  longitude: '44.230145',
  latitude: '45.65412',
  ipAddress: '13.106.2.10'
});

const deviceInfoTwo = ref({
  deviceType: '视频监控',
  cameraType: '枪机',
  deviceCode: '3_CAM1_0',
  roadSection: '路段名称',
  direction: '邯郸方向',
  stakeNumber: 'K18+324',
  longitude: '44.230145',
  latitude: '45.65412',
  ipAddress: '13.106.2.10'
});

// const deviceInfo = ref({});
function handleShowDeviceInfo(data) {
  console.log("接收到设备信息:", data);

  // 关闭其他面板
  showDeviceInfo.value = false;
  showDeviceInfoTwo.value = false;

  if (data.deviceTypeId === "22" || data.deviceTypeId === "44") {
    showDeviceInfo.value = true;
  } else if (data.deviceTypeId === "15" || data.deviceTypeId === "53") {
    showDeviceInfoTwo.value = true;
  }
  deviceInfoTwo.value = data;
  deviceInfo.value = data;
}
const closeDeviceInfo = () => {
  showDeviceInfo.value = false;
  showDeviceInfoTwo.value = false;
  showMap.value = true;
};
const mapFlag = ref(true);
onMounted(() => {
  emitter.on("show-device-info", handleShowDeviceInfo);
});
</script>

<style scoped lang="scss">
.center-container {
  width: 100%;
  // height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .RealTimeImage{
    background-image: url("@/assets/img/eqm/fuwuqu.png");
    background-size: 100% 100%;
  }
  .map-container.bg-header {
    position: absolute;
    top: 500px;
    left: 42.5%;
    // transform: translate(-50%, -50%);
    z-index: 2000;
    // box-shadow: 0 8px 40px rgba(0,0,0,0.3);
  }

  .bg-header-one {
    background-image: url("@/assets/img/eqm/eqminfo.png");
    background-size: 100% 100%;
  }

  .bg-header-two {
    background-image: url("@/assets/img/eqm/eqminfo2.png");
    background-size: 100% 100%;
  }
}

.statistics-panel {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 40%;
  padding: 20px;
  gap: 30px;
  padding-top: 200px;
  padding-bottom: 50px;
  .box{
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}

.stat-card {
  position: relative;
  display: flex;
  align-items: center;
  padding: 15px 20px;
}

.card-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(0, 170, 255, 0.1) 0%,
      transparent 100%);
  border-radius: 8px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.icon-wrapper {
  position: relative;
  margin-right: 15px;

  img {
    width: 160px;
    height: 160px;
  }
}

.stat-content {
  display: flex;
  flex-direction: column;
  position: relative;
}

.stat-value {
  .number {
    font-size: 64px !important;
    font-weight: bold;
    color: #1ae9ee;
  }
}

.stat-label {
  font-size: 32px !important;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 8px;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.map-container {
  width: 78%;
  margin-top: 30px;
  // background: linear-gradient(360deg,
  //     rgba(15, 43, 89, 0.3) 0%,
  //     rgba(15, 43, 89, 0) 100%),
  //   rgba(15, 43, 89, 0.85);
  // box-shadow: inset 0px 0px 57px 0px rgba(0, 149, 255, 0.41),
  //   inset 0px 0px 21px 0px rgba(49, 176, 255, 0.47);
  // border-radius: 8px;
  // border: 1px solid;
  // border-image: linear-gradient(180deg,
  //     rgba(186, 213, 255, 0.3),
  //     rgba(186, 213, 255, 0)) 1 1;
  // padding: 20px;
  // box-sizing: border-box;
  height: 1700px;
}

.map-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 15px 40px;
  position: relative;
  // border-bottom: 1px solid rgba(26, 233, 238, 0.2);
  height: 150px;
  background: repeating-linear-gradient(-65deg,
      rgba(15, 43, 89, 0.3) 0px,
      rgba(15, 43, 89, 0.3) 50px,
      rgba(26, 233, 238, 0.05) 50px,
      rgba(26, 233, 238, 0.05) 100px);

  .title-content {
    display: flex;
    align-items: center;
  }

  .title-text {
    font-size: 52px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
  }

  .close-btn {
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 20px;
      height: 2px;
      background-color: #fff;
      top: 50%;
      left: 50%;
    }

    &::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    &::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    &:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.3);
      transform: scale(1.05);
    }
  }
}

.map-con {
  width: 100%;
  height: 90%;
  /* background-color: #1ae9ee; */
  // 用户可以在这里添加地图相关的内容
}

.eqm-info {
  width: 1788px;
  margin-top: 30px;
  background: linear-gradient(360deg,
      rgba(15, 43, 89, 0.3) 0%,
      rgba(15, 43, 89, 0) 100%),
    rgba(15, 43, 89, 0.85);
  box-shadow: inset 0px 0px 57px 0px rgba(0, 149, 255, 0.41),
    inset 0px 0px 21px 0px rgba(49, 176, 255, 0.47);
  border-radius: 8px;
  border: 1px solid;
  border-image: linear-gradient(180deg,
      rgba(186, 213, 255, 0.3),
      rgba(186, 213, 255, 0)) 1 1;
  padding: 20px;
  box-sizing: border-box;
  height: 1700px;

  .eqm-title {
    width: 100%;
    height: 56px;
    background-image: url("../../assets/img/eqm/eqmtitle.png");
  }
}

.dropdown {
  position: absolute;
  right: 0;
  bottom: -190px;
  background: #112a44;
  border: 1px solid #1ae9ee;
  border-radius: 6px;
  z-index: 100;
  min-width: 220px;
  min-height: 120px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  padding: 16px 0;

  .dropdown-item {
    padding: 20px 32px;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    text-align: left;

    &:hover {
      background: #1ae9ee;
      color: #112a44;
    }
  }
}
</style>
