<template>
  <div class="screen-container">
    <!-- 标题 -->
    <div class="title" ref="title">2号柜</div>

    <!-- 柜体容器 -->
    <div class="cabinet-body">
      <div class="cabinet" ref="cabinetContainer">
        <div
          v-for="(layer, index) in layers"
          :key="layer.name"
          class="layer"
          :style="getLayerStyle(index)"
          :class="['layer-depth', `layer-${index}`]"
        >
          {{ layer.name }}
        </div>
      </div>

      <!-- 新增：竖直连线容器 -->
      <div class="vertical-line-container" ref="verticalLineContainer">
        <div
          v-for="(_, index) in layers"
          :key="'vline'+index"
          class="vertical-connector-line"
          :ref="el => setVerticalLineRef(el, index)"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AgingLayer",
  data() {
    return {
      layers: Array.from({ length: 10 }, (_, i) => ({
        name: `第${i + 1}层`,
      })),
      verticalLineRefs: [],
    };
  },
  mounted() {
    this.updateVerticalLines();
    window.addEventListener('resize', this.updateVerticalLines);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateVerticalLines);
  },
  methods: {
    getLayerStyle(index) {
      const verticalSpacing = 70;
      return {
        bottom: `${index * verticalSpacing}px`,
        width: '180px',
        height: '60px',
        zIndex: 10 - index,
      };
    },
    setVerticalLineRef(el, index) {
      this.verticalLineRefs[index] = el;
    },
    updateVerticalLines() {
      const titleEl = this.$refs.title;
      const cabinetEl = this.$refs.cabinetContainer;

      if (!titleEl || !cabinetEl) return;

      const titleRect = titleEl.getBoundingClientRect();

      // 标题中心右侧点
      const startX = titleRect.right;
      const startY = titleRect.top + titleRect.height / 2;

      for (let i = 0; i < this.layers.length; i++) {
        const layerEl = cabinetEl.children[i];
        if (!layerEl) continue;

        const layerRect = layerEl.getBoundingClientRect();

        // 层左侧中点
        const endX = layerRect.left;
        const endY = layerRect.top + layerRect.height / 2;

        const deltaX = endX - startX;
        const deltaY = endY - startY;
        const length = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
        const angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);

        const line = this.verticalLineRefs[i];
        if (!line) continue;

        line.style.width = `${length}px`;
        line.style.height = '2px';
        line.style.backgroundColor = 'rgba(100, 200, 255, 0.9)';
        line.style.position = 'absolute';
        line.style.left = `${startX}px`;
        line.style.top = `${startY}px`;
        line.style.transformOrigin = 'left center';
        line.style.transform = `rotate(${angle}deg)`;
      }
    }
  }
};
</script>

<style scoped>
.screen-container {
  background-color: #030b2a;
  color: white;
  font-family: Arial, sans-serif;
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  padding-left: 100px;
  overflow: hidden;
  transform-origin: center center;
}

/* 标题样式：增加边框+背景 */
.title {
  font-size: 24px;
  font-weight: bold;
  margin-right: 50px;
  z-index: 20;
  position: relative;
  padding: 10px 20px;
  border-radius: 8px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0.2));
  border: 1px solid rgba(100, 180, 255, 0.6);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.6),
    inset 0 0 8px rgba(100, 200, 255, 0.3);
}

/* 新增：柜体容器 */
.cabinet-body {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.cabinet {
  position: relative;
  width: 180px;
  height: 80vh;
  margin-left: 20px;
}

.layer {
  position: absolute;
  left: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(0,0,0,0.2));
  border: 1px solid rgba(100, 180, 255, 0.6);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.6),
    inset 0 0 8px rgba(100, 200, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.layer-depth {
  border-width: 1px 3px 3px 1px;
  border-color:
    rgba(100, 180, 255, 0.4)
    rgba(100, 180, 255, 0.8)
    rgba(100, 180, 255, 0.8)
    rgba(100, 180, 255, 0.4);
}

.layer-9 {
  box-shadow:
    0 8px 25px rgba(0, 150, 255, 0.5),
    inset 0 0 15px rgba(100, 220, 255, 0.4);
}

/* 竖直连线容器 */
.vertical-line-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.vertical-connector-line {
  position: absolute;
  content: '';
  height: 2px;
}
</style>
