<script setup>
import img from "../assets/jpegDemo.jpeg";
import { ref, shallowRef, onMounted } from "vue";

const ref1 = shallowRef();
const ref2 = shallowRef();
const ref3 = shallowRef();
const ref4 = shallowRef();
const ref5 = shallowRef();

const targetRect1 = {
  left: 20,
  top: 120,
  width: 200,
  height: 200,
};
const targetRect2 = {
  left: 230,
  top: 120,
  width: 210,
  height: 210,
};
const targetRect3 = {
  left: 440,
  top: 120,
  width: 200,
  height: 200,
};
const targetRect4 = {
  left: 640,
  top: 110,
  width: 220,
  height: 220,
};
const targetRect5 = {
  left: 860,
  top: 120,
  width: 220,
  height: 220,
};

const color1 = ref("#FFFF00");
const color2 = ref("#FFFF00");
const color3 = ref("#FFFF00");
const color4 = ref("#FFFF00");
const color5 = ref("#FFFF00");

const isMatch = (d1, d2) => {
  return (
    d1.left == d2.left &&
    d1.top == d2.top &&
    d1.width == d2.width &&
    d1.height == d2.height
  );
};
onMounted(() => {
  ref1.value.jsvGetBoundingClientRect().then((data) => {
    console.log("rect1", targetRect1, data);
    color1.value = isMatch(data, targetRect1) ? "#00FF00" : "#FF0000";
  });
  ref2.value.jsvGetBoundingClientRect().then((data) => {
    console.log("rect2", targetRect2, data);
    color2.value = isMatch(data, targetRect2) ? "#00FF00" : "#FF0000";
  });
  ref3.value.jsvGetBoundingClientRect().then((data) => {
    console.log("rect3", targetRect3, data);
    color3.value = isMatch(data, targetRect3) ? "#00FF00" : "#FF0000";
  });
  ref4.value.jsvGetBoundingClientRect().then((data) => {
    console.log("rect4", targetRect4, data);
    color4.value = isMatch(data, targetRect4) ? "#00FF00" : "#FF0000";
  });
  ref5.value.jsvGetBoundingClientRect().then((data) => {
    console.log("rect5", targetRect5, data);
    color5.value = isMatch(data, targetRect5) ? "#00FF00" : "#FF0000";
  });
});
</script>
<template>
  <div
    :style="{
      width: 1280,
      height: 720,
      backgroundColor: '#FFFFFF',
    }"
  ></div>

  <div
    :style="{
      top: 20,
      width: 1280,
      height: 50,
      fontSize: 30,
      backgroundColor: '#007788',
      color: '#FFFFFF',
      textAlign: 'center'
    }"
  >
    获取div区域检测, 绿色为正确, 红色为错误(浏览器端的控制台会影响结果, 注意关闭)
  </div>
  <div :style="{ top: 120 }">
    <div :style="{ left: 20 }">
      <img ref="ref1" class="view-size" :src="`url(${img})`" />
      <div
        class="result"
        :style="{
          backgroundColor: color1,
        }"
      ></div>
    </div>
    <div :style="{ left: 230 }">
      <div ref="ref2" :style="{ width: 210, height: 210 }">
        <img class="view-size" :src="`url(${img})`" />
      </div>
      <div
        class="result"
        :style="{
          backgroundColor: color2,
        }"
      ></div>
    </div>
    <div :style="{ left: 440 }">
      <div ref="ref3">
        <img class="view-size" :src="`url(${img})`" />
      </div>
      <div
        class="result"
        :style="{
          backgroundColor: color3,
        }"
      ></div>
    </div>
    <div :style="{ left: 650 }">
      <div
        ref="ref4"
        :style="{
          transform: 'scale3d(1.1, 1.1, 1)',
          width: 200,
          height: 200,
          backgroundColor: '#007788',
        }"
      >
        <img class="view-size" :src="`url(${img})`" />
      </div>
      <div
        class="result"
        :style="{
          backgroundColor: color4,
        }"
      ></div>
    </div>
    <div :style="{ left: 860 }">
      <div ref="ref5" :style="{ transform: 'scale3d(1.1, 1.1, 1)' }">
        <img class="view-size" :src="`url(${img})`" />
      </div>
      <div
        class="result"
        :style="{
          backgroundColor: color5,
        }"
      ></div>
    </div>
  </div>
</template>

<style scoped>
.view-size {
  width: 200;
  height: 200;
}

.result {
  top: 220;
  height: 50;
  width: 200;
}
</style>
