<template>
  <div class="svg-box">
    <div class="svg-main">
      <img src="@/assets/map.png" alt="" />
      <div class="spot-box">
        <div
          v-for="(spot, index) in spots"
          :key="index"
          class="spot"
          :class="[{ active: activeSpot === index }, `status-${spot.status}`]"
          @mouseenter="handleSpotHover(index)"
          @mouseleave="handleSpotLeave"
          @click="handleSpotClick(spot)"
          :style="{
            left: spot.x + '%',
            top: spot.y + '%',
          }"
        >
          <div class="pulse"></div>
          <!-- 连接线和详情窗 -->
          <transition name="line">
            <div class="connector-line" v-if="activeSpot === index"></div>
          </transition>
          <transition
            name="detail"
            @before-enter="beforeEnter"
            @enter="enter"
            @leave="leave"
          >
            <div
              class="detail-window"
              v-if="activeSpot === index && showDetail"
            >
              <div class="detail-title">{{ spot.name }}</div>
              <div class="detail-content">
                <div class="detail-item">
                  <span class="label">状态：</span>
                  <span class="value" :class="`text-status-${spot.status}`">{{
                    getStatusText(spot.status)
                  }}</span>
                </div>
                <!-- <div class="detail-item">
                                <span class="label">数值：</span>
                                <span class="value">{{ spot.value }}</span>
                            </div> -->
                <div class="detail-item">
                  <span class="label">描述：</span>
                  <div class="value">
                    <span class="value-item" v-for="(item, index) in spot.description" :key="index">{{ item }}</span>
                   <span class="value-item" v-if="spot.description.length === 0">暂无</span>
                  </div>
                 
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  mapList: {
    type: Array,
    default: () => [],
  },
});


watch(
  () => props.mapList,
  () => {
    initMap();
  },
  { deep: true }
);


// 定义坐标点位数据
const spots = ref([
  // {
  //   id:1,
  //   no: "wp001",
  //   x: 41,
  //   y: 22,
  //   name: "4#除尘器",
  //   status: 0,
  //   description: ["无异常"],
  // },
  // {
  //   id:2,
  //   no: "wp001",
  //   x: 45,
  //   y: 70,
  //   name: "站点B",
  //   status: 0,
  //   description: ["运行正常"],
  // },
  // {
  //   id:3,
  //   no: "wp001",
  //   x: 77,
  //   y: 36,
  //   name: "3#除尘器",
  //   status: 1,
  //   description: ["三仓室存在轻微泄漏", "三仓室存在轻微泄漏", "三仓室存在轻微泄漏"],
  // },
  // {
  //   id:4,
  //   no: "wp001",
  //   x: 50,
  //   y: 65,
  //   name: "2#除尘器",
  //   status: 1,
  //   description: ["除尘器脉冲阀故障或者提升阀故障"],
  // },
]);

const activeSpot = ref(null);
const showDetail = ref(false);
const hoverTimer = ref(null);

const handleSpotClick = (spot) => {
  router.push({
    path: "/monitor",
    query: {
      dusterNo: spot.no,
    },
  });
}

const clearTimer = () => {
  if (hoverTimer.value) {
    clearTimeout(hoverTimer.value);
    hoverTimer.value = null;
  }
};

const handleSpotHover = (index) => {
  clearTimer();
  activeSpot.value = index;
  hoverTimer.value = setTimeout(() => {
    showDetail.value = true;
    hoverTimer.value = null;
  }, 300);
};

const handleSpotLeave = () => {
  clearTimer();
  showDetail.value = false;
  hoverTimer.value = setTimeout(() => {
    activeSpot.value = null;
    hoverTimer.value = null;
  }, 300);
};

// 详情窗动画钩子
const beforeEnter = (el) => {
  el.style.opacity = 0;
  el.style.transform = "translateX(-20px)";
};

const enter = (el, done) => {
  el.style.transition = "all 0.3s ease-out";
  setTimeout(() => {
    el.style.opacity = 1;
    el.style.transform = "translateX(0)";
  }, 0);
};

const leave = (el) => {
  el.style.transition = "all 0.3s ease-in";
  el.style.opacity = 0;
  el.style.transform = "translateX(-20px)";
};

const getStatusText = (status) => {
  const statusMap = {
    1: "故障",
    0: "正常",
  };
  return statusMap[status] || status;
};

const initMap = () => {
  spots.value = props.mapList || [];
}

onMounted(() => {
  initMap();
});

onBeforeUnmount(() => {
  clearTimer();
});
</script>

<style scoped lang="scss">
.svg-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .svg-main {
    position: relative;
    display: inline-block;
    height: 100%;
  }
  img {
    display: block;
    width: auto;
    height: 100%;
  }
}

.spot-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.spot {
  position: absolute;
  width: 15px;
  height: 15px;
  background: rgb(253, 48, 2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;

  // 状态颜色
  &.status-0 {
    background: #08c733;
    .pulse {
      background: #08c733;
    }
    &.active .pulse {
      background: #08c733;
    }
  }

  &.status-warning {
    background: #f5c701;
    .pulse {
      background: #f5c701;
    }
    &.active .pulse {
      background: #f5c701;
    }
  }

  &.status-1 {
    background: #ff6a6a;
    .pulse {
      background: #ff6a6a;
    }
    &.active .pulse {
      background: #ff6a6a;
    }
  }

  &.active {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    z-index: 100;
  }

  .pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(253, 48, 2);
    border-radius: 50%;
    animation: pulse 1.5s ease-out infinite;
  }

  .connector-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px; // 缩短连接线长度
    height: 2px;
    background: linear-gradient(90deg, currentColor, rgba(89, 93, 89, 0.4));
    transform-origin: left center;
    transform: rotate(-45deg);
    z-index: -1;
  }

  // 连接线动画
  .line-enter-active {
    transition: all 0.3s ease-out;
    transform-origin: left center;
  }
  .line-leave-active {
    transition: all 0.3s ease-in;
    transform-origin: left center;
  }
  .line-enter-from,
  .line-leave-to {
    opacity: 0;
    width: 0;
  }

  .detail-window {
    position: absolute;
    left: calc(100% + 35px); // 减小与连接线的距离
    top: -40px; // 调整垂直位置
    width: 300px;
    background: rgba(0, 22, 40, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 12px;
    color: #fff;
    pointer-events: none;
    z-index: 999;

    .text-status-0 {
      color: #00ff9d !important;
    }
    .text-status-warning {
      color: #ffa500 !important;
    }
    .text-status-1 {
      color: #ff3b3b !important;
    }

    &::before {
      content: "";
      position: absolute;
      left: -6px;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-right: 6px solid rgba(255, 255, 255, 0.3);
    }

    .detail-title {
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      // color: #00ff9d;
      margin-bottom: 8px;
    }

    .detail-content {
      font-size: 14px;

      .detail-item {
        display: flex;
        margin-bottom: 4px;

        .label {
          width: 50px;
          color: rgba(255, 255, 255, 0.7);
        }

        .value {
          display: block;
          width: calc(100% - 55px);
          color: #fff;
        }
        .value-item {
          display: block;
          width: 100%;
          color: #fff;
        }
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
</style>
