<template>
  <div class="listItem">
    <!-- 父节点标题 -->

    <template v-if="itemData.isAmmeter === '1'">
      <div class="deviceItem itemDiv" ref="listItemTitleRef">
        <div class="title">
          {{ itemData.monitorCode }}
        </div>
        <div class="content">
          <div class="name">
            {{ itemData.monitorName }}
          </div>
          <div class="list" v-for="i in itemData.deviceData">
            <div class="value">{{ i.value }}</div>
            <div class="units">{{ i.units }}</div>
          </div>
        </div>
      </div>
    </template>

    <div v-if="itemData.isAmmeter !== '1'" class="listItemTitle itemDiv" ref="listItemTitleRef">
      {{ itemData.monitorName || itemData.name }}
    </div>

    <div v-if="itemData.isAmmeter !== '1'" class="line" :style="`height:${height}px;left:${width + 20 + 20}px;top:${top + 20}px`"></div>
    <div v-if="itemData.isAmmeter !== '1' && itemData.children && itemData.children.length > 0" class="line1" :style="`left:${width + 20}px`"></div>
    <div v-if="itemData.isAmmeter !== '1' && !isRoot" class="line2"></div>

    <div v-if="itemData.isAmmeter === '1'" class="line" :style="`height:${height}px;left:${width + 20}px;top:${top + 20}px`"></div>
    <div v-if="itemData.isAmmeter === '1' && itemData.children && itemData.children.length > 0" class="line1" :style="`left:${width}px`"></div>
    <div v-if="itemData.isAmmeter === '1' && !isRoot" style="width: 40px" class="line2"></div>

    <div class="children">
      <!--      <DeviceList v-if="itemData.device" :devices="itemData.device"/>-->
      <ListItem v-if="itemData.children" :isRoot="false" v-for="i in itemData.children" :key="i.name" :itemData="i" />
    </div>
  </div>
</template>

<script>
import DeviceList from './DeviceList.vue';

export default {
  name: 'ListItem',
  components: { DeviceList },
  props: ['itemData', 'isRoot'],
  data() {
    return {
      height: 0,
      width: 0,
      top: 0
    };
  },
  mounted() {
    this.height = this.getVerticalDiff(this.$refs.listItemTitleRef) || 0;
    this.width = this.getElementWidth(this.$refs.listItemTitleRef) || 0;
    this.top = this.getFirstItemCenterY(this.$refs.listItemTitleRef) || 0;
  },
  methods: {
    getVerticalDiff(titleEl) {
      if (!titleEl) return null;

      const parentEl = titleEl.parentElement.querySelector('.children');
      if (!parentEl) return null;

      // 只取 children 的直接子元素中的 .listItemTitle（第一层）
      const listItems = parentEl.children;
      const titles = [];

      for (let item of listItems) {
        const title = item.querySelector(':scope > .itemDiv');
        if (title) titles.push(title);
      }

      if (titles.length < 2) return null;

      const containerRect = parentEl.getBoundingClientRect();

      const firstRect = titles[0].getBoundingClientRect();
      const lastRect = titles[titles.length - 1].getBoundingClientRect();

      const firstCenterY = firstRect.top + firstRect.height / 2 - containerRect.top;
      const lastCenterY = lastRect.top + lastRect.height / 2 - containerRect.top;

      return Math.abs(lastCenterY - firstCenterY);
    },
    getFirstItemCenterY(titleEl) {
      if (!titleEl) return null;

      // 找到父容器中 children
      const parentEl = titleEl.parentElement.querySelector('.children');
      if (!parentEl) return null;

      // 找到 children 的第一个直接子元素
      const firstItem = parentEl.children[0];
      if (!firstItem) return null;

      // 找到第一个子元素中的 .itemDiv
      const firstTitle = firstItem.querySelector(':scope > .itemDiv');
      if (!firstTitle) return null;

      const containerRect = parentEl.getBoundingClientRect();
      const firstRect = firstTitle.getBoundingClientRect();

      // 计算中心高度，相对于父容器
      const firstCenterY = firstRect.top + firstRect.height / 2 - containerRect.top;

      return firstCenterY;
    },
    getElementWidth(el) {
      if (!el) return null;
      const rect = el.getBoundingClientRect();
      return rect.width;
    }
  }
};
</script>

<style scoped lang="less">
.listItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px;
  position: relative;

  .deviceItem {
    padding: 6px 20px;
    color: #fff;
    border-radius: 6px;
    white-space: nowrap;
    min-width: 100px;

    .title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border: 1px solid #fff;
      border-bottom: 0;
    }

    .content {
      width: 100%;
      height: auto;
      border: 1px solid #fff;

      .name {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #fff;
      }

      .list {
        height: 40px;
        line-height: 40px;
        white-space: nowrap;

        .value {
          display: inline-block;
          min-width: 100px;
          margin-right: 20px;
          text-align: center;
        }

        .units {
          display: inline-block;
          min-width: 50px;
        }
      }
    }
  }

  .line {
    position: absolute;
    width: 1px;
    background: #fff;
  }

  .line1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    width: 20px;
    background: #fff;
  }

  .line2 {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translate(100%, -50%);
    height: 1px;
    width: 20px;
    background: #fff;
  }

  .listItemTitle {
    padding: 6px 20px;
    background: #333;
    color: #fff;
    border-radius: 6px;
    margin-right: 20px;
    white-space: nowrap;
  }

  .children {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
</style>
