<template>
  <div class="node" ref="container" :id="copy ? '' : `tree${data.id}`">
    <!-- 主节点 -->
    <div class="node-main" ref="nodeMain">
      <div class="node-icon" ref="nodeIcon"></div>
      <div class="node-title">{{ data.locationAlias }}</div>
    </div>

    <!-- 子节点 -->
    <div class="children">
      <div
        :id="copy ? '' : `tree${child.id}`"
        v-for="(child, index) in data.children"
        :key="index"
        :class="deviceData[child.deviceName]?.status ? 'child-item' : 'child-item1'"
        :ref="(el) => (childRefs[index] = el)"
      >
        <div :class="deviceData[child.deviceName]?.status ? 'child-icon' : 'child-icon1'"></div>
        <div class="child-info">
          <div class="child-name">
            工位名称: <span style="font-size: 0.8vw">{{ child.locationAlias }}</span>
          </div>
          <!--          <div class="child-code">总装码：{{ deviceData[child.deviceId]?.code?.trimStart() }}</div>-->
          <div class="child-code">状态：{{ deviceData[child.deviceName]?.status ? '在线' : '离线' }}</div>
<!--          <div class="child-time">时间：{{ parseTime(deviceData[child.deviceName]?.time, '{m}-{d} {h}:{i}') }}</div>-->
        </div>
      </div>
    </div>

    <!-- SVG 折线 -->
    <svg class="connector" ref="svg">
      <polyline v-for="(line, index) in lines" :key="index" :points="line" stroke="#0156A5" fill="none" stroke-width="1" />
    </svg>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, watchEffect } from 'vue';
import { parseTime } from '@/utils/ruoyi.js';

const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  deviceData: {
    type: Object,
    required: true
  },
  copy: {
    type: Boolean,
    default: false
  }
});

const container = ref(null);
const nodeIcon = ref(null);
const childRefs = ref([]);
const lines = reactive(Array(props.data.children.length).fill(''));
const svg = ref(null);

const updateLines = () => {
  if (!container.value || !nodeIcon.value) return;
  const containerRect = container.value.getBoundingClientRect();

  childRefs.value.forEach((childEl, index) => {
    if (!childEl) return;

    const nodeRect = nodeIcon.value.getBoundingClientRect();
    const childRect = childEl.getBoundingClientRect();

    const startX = nodeRect.right - containerRect.left;
    const startY = nodeRect.top + nodeRect.height / 2 - containerRect.top;
    const endX = childRect.left - containerRect.left;
    const endY = childRect.top + childRect.height / 2 - containerRect.top;

    const midX = startX + (endX - startX) / 2;

    lines[index] = `${startX},${startY} ${midX},${startY} ${midX},${endY} ${endX},${endY}`;
  });

  // 更新 SVG 大小
  const rect = container.value.getBoundingClientRect();
  svg.value.setAttribute('width', rect.width);
  svg.value.setAttribute('height', rect.height);
};

onMounted(() => {
  nextTick(() => {
    updateLines();
  });
});

// 如果子节点数量或容器大小动态变化，可以监听更新折线
watchEffect(() => {
  nextTick(() => {
    updateLines();
  });
});
</script>

<style scoped>
.node {
  color: #fff;
  font-size: 0.6vw;
  width: 316px;
  position: relative;
  vertical-align: top;
  display: flex;
  align-items: stretch;
  break-inside: avoid;
  margin: 0 12px 12px 0; /* 🟩 去掉 margin-left，左右对称 */
}

/* 主节点 */
.node-main {
  width: 100px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}

.node-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background-image: url('@/assets/chart/906cbf773b3a37fc27e380375606fb27.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 4px;
}

.node-title {
  position: absolute;
  top: calc(50% + 30px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 1vw;
  font-weight: bold;
}

/* 子节点列表 */
.children {
  display: inline-block;
  width: calc(7vw + 74px + 20px + 12px);
}

.child-item {
  background: rgba(0, 255, 180, 0.15);
  border-radius: 6px;
  margin-bottom: 8px;
  position: relative;
  //height: 75px;
  padding-bottom: 12px;
  padding-right: 12px;
  margin-left: 20px;
  background-image: url('@/assets/chart/efc42f5a4ed9491a16f6817d7fbe2336.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.child-item1 {
  background: rgba(0, 255, 180, 0.15);
  border-radius: 6px;
  margin-bottom: 8px;
  position: relative;
  padding-right: 12px;
  //height: 75px;
  padding-bottom: 12px;
  margin-left: 20px;
  background-image: url('@/assets/chart/430786e7de542172c80b3882e4ea8dbd.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.child-item:last-child,
.child-item1:last-child {
  margin-bottom: 0;
}

.child-icon {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  margin-right: 8px;
  background-image: url('@/assets/chart/device1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

.child-icon1 {
  width: 50px;
  height: 50px;

  border-radius: 4px;
  margin-right: 8px;
  background-image: url('@/assets/chart/device2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

.child-info {
  //position: absolute;
  margin-top: 10px;
  margin-left: 74px;
  width: 7vw;
}
.child-name {
  //position: absolute;
  //top: 10px;
  //left: 74px;
  font-size: 0.8vw;
  width: 7vw;
  text-align: left;
  //white-space: nowrap;
}

.child-code,
.child-time {
  text-align: left;
  opacity: 0.9;
  white-space: nowrap;
  width: 7vw;
}

.child-code {
  //position: absolute;
  //top: 27px;
  //left: 74px;
  font-size: 0.8vw;
}

.child-time {
  //position: absolute;
  //top: 46px;
  //left: 74px;
  font-size: 0.8vw;
}

/* SVG 折线 */
.connector {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
</style>
