<template>
  <Transition name="location-panel">
    <section
      v-if="expanded"
      :id="panelId"
      class="location-panel"
      role="region"
      :aria-labelledby="labelId || undefined"
      :aria-label="!labelId ? '地理位置信息' : undefined"
    >
      <div class="location-grid">
        <article
          v-for="item in locationInfo"
          :key="item.label"
          class="info-card"
        >
          <img class="info-icon" :src="item.icon" alt="" aria-hidden="true" />
          <div class="info-content">
            <p class="info-label">{{ item.label }}</p>
            <p class="info-value" :title="item.value">{{ item.value }}</p>
          </div>
        </article>
      </div>
    </section>
  </Transition>
</template>

<script setup>
import lineCodeIcon from "../../assets/images/LocationPanel/线路编号icon.png";
import classNumberIcon from "../../assets/images/LocationPanel/路线桩号icon.png";
import inspectorIcon from "../../assets/images/LocationPanel/路段巡查员icon.png";
import phoneIcon from "../../assets/images/LocationPanel/联系电话icon.png";
import dateIcon from "../../assets/images/LocationPanel/日期icon.png";

defineProps({
  expanded: {
    type: Boolean,
    default: true,
  },
  panelId: {
    type: String,
    default: "location-panel",
  },
  labelId: {
    type: String,
    default: "",
  },
});

// 地理位置信息数据
const locationInfo = [
  { label: "线路编号", value: "S204", icon: lineCodeIcon },
  { label: "灾害桩号", value: "K130 + 800", icon: classNumberIcon },
  { label: "路段巡路员", value: "张强", icon: inspectorIcon },
  { label: "联系电话", value: "13987657892", icon: phoneIcon },
  { label: "演练日期", value: "2025-11-19", icon: dateIcon },
];
</script>

<style scoped lang="scss">
@use "@/styles/mixins.scss" as *;
@use "../../assets/styles/common.scss" as *;

.location-panel {
  width: 100%;
  padding: clamp(16px, vh(16), 18px) clamp(6px, vw(6), 6px);
  background: url("../../assets/images/LocationPanel/地理位置展出1.png")
    no-repeat center center;
  background-size: 100% 100%;
  border-radius: vw(8);
  box-shadow: 0 0 vw(12) rgba(0, 0, 0, 0.35);
  overflow: hidden;
  min-width: 248px;
  max-width: 100%;
  // min-height: 160px;
  // &:hover {
  //   cursor: pointer;
  //   // border: 2px solid rgba(255, 80, 80, 0.8);
  //   animation: glowPulse 1.6s ease-in-out infinite;

  //   box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5),
  //     0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8),
  //     inset 0 0 35px rgba(255, 30, 30, 0.55),
  //     inset 0 0 55px rgba(255, 0, 0, 0.4);
  // }

  // /* 闪动动画 */
  // @keyframes glowPulse {
  //   0% {
  //     box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5),
  //       0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8),
  //       inset 0 0 35px rgba(255, 30, 30, 0.55),
  //       inset 0 0 55px rgba(255, 0, 0, 0.4);
  //   }

  //   50% {
  //     box-shadow: 0 0 18px rgba(255, 120, 120, 1),
  //       0 0 35px rgba(255, 40, 40, 0.7), 0 0 65px rgba(255, 0, 0, 0.45),
  //       inset 0 0 25px rgba(255, 80, 80, 1),
  //       inset 0 0 45px rgba(255, 40, 40, 0.7),
  //       inset 0 0 75px rgba(255, 0, 0, 0.5);
  //   }

  //   100% {
  //     box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5),
  //       0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8),
  //       inset 0 0 35px rgba(255, 30, 30, 0.55),
  //       inset 0 0 55px rgba(255, 0, 0, 0.4);
  //   }
  // }
}

// 2x2 网格布局
.location-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(2px, vh(10), 6px) 0px;
  width: 100%;
  height: 100%;
}

// 信息卡片
.info-card {
  display: flex;
  align-items: center;
  gap: 3px;
  // padding: clamp(10px, vh(12), 16px) clamp(12px, vw(14), 18px);
  // background: rgba(10, 95, 165, 0.15);
  border-radius: clamp(6px, vw(8), 10px);
  // border: 1px solid rgba(135, 206, 250, 0.12);
  min-width: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;

  &:hover {
    background: rgba(10, 95, 165, 0.22);
    border-color: rgba(135, 206, 250, 0.2);
  }
}

// 图标样式
.info-icon {
  width: clamp(24px, vw(32), 40px);
  height: clamp(24px, vw(32), 40px);
  flex-shrink: 0;
  object-fit: contain;
}

// 文本内容区域
.info-content {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, vh(4), 6px);
  flex: 1;
  min-width: 0;
}

// 标签样式
.info-label {
  margin: 0;
  font-size: clamp(12px, vw(14), 16px);
  color: #87ceeb;
  line-height: 1.3;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 值样式
.info-value {
  margin: 0;
  font-size: 12px;
  color: #e8f4ff;
  // font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
}

// 过渡动画
.location-panel-enter-active,
.location-panel-leave-active {
  transition: all 0.3s ease;
}

.location-panel-enter-from,
.location-panel-leave-to {
  opacity: 0;
  transform: translateY(vh(-10));
}
</style>
