<template>
  <!-- <div class="main-cont" ref="myElement">
    <div class="main-left">
      <img :src="devicePng" alt="" id="start" />
      <img :src="devicePng" alt="" />
      <img :src="devicePng" alt="" />
    </div>
    <div class="main-middle" ref="middleElement">
      <img :src="devicePng" alt="" id="end" />
    </div>
    <div class="main-right">
      <img :src="devicePng" alt="" /> <img :src="devicePng" alt="" /><img
        :src="devicePng"
        alt=""
      />
    </div>
  </div> -->
<div>
  <div id="start">start</div>
<div id="end" style="margin-left:200px">end</div>
</div>
</template>
<script setup>
import { onMounted, watch, ref, nextTick, defineEmits } from "vue";
import devicePng from "@/assets/image/instruct/device.png";
import LeaderLine from "../../../../public/leader-line.min.js"
const props = defineProps({
  checkDialogData: {
    type: Object,
    default: () => {},
  },
});
const middleElement = ref(null);
const myElement = ref(null);
onMounted(() => {
  const startElement = document.getElementById('start');  
  const endElement = document.getElementById('end');  
  // new LeaderLine(startElement, endElement);  
  new LeaderLine(startElement, endElement, { color: 'gray', size: 2, path: "grid" })

  nextTick(() => {
  


    // setTimeout(() => {
    //   const heights = myElement.value.scrollHeight;
    //   const eysHeigth = myElement.value.clientHeight;
    //   if (heights > 550) {
    //     console.log("heights", heights);
    //     middleElement.value.style.marginTop = `${(heights - 160) / 2}px`; // 设置元素的垂直位置
    //   } else {
    //     middleElement.value.style.marginTop = `${heights / 3}px`; // 设置元素的垂直位置
    //   }
    // }, 0);
  });
});
</script>
<style scoped lang="scss">
@mixin img-size {
  width: 150px;
  height: 90px;
  margin-bottom: 40px;
}
@mixin left-and-right {
  display: flex;
  flex-direction: column;
}
.main-cont {
  display: flex;
  justify-content: space-evenly;
}
.main-left {
  display: flex;
  @include left-and-right;
  & > img {
    @include img-size;
  }
}
.main-middle {
  box-sizing: border-box;
}
.main-right {
  display: flex;
  @include left-and-right;
  & > img {
    @include img-size;
  }
}
</style>