<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)"
    @mouseleave="stat.label === '服务区' && (showDropdown = 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 }}
        </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 />
      </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 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';
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 serviceAreas = ["南皮服务区", "东光服务区"];
const selectedServiceArea = ref("南皮服务区");

function selectServiceArea(area) {
  selectedServiceArea.value = area;
  showServiceArea.value = true;
  showDropdown.value = false;
}
// 统计数据配置
const statistics = ref([
  {
    image: km,
    value: "78.338",
    label: "全里程（公里）",
  },
  {
    image: toll,
    value: "5",
    label: "收费站",
  },
  {
    image: fee,
    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>
