<template>
  <main class="Magnify-main">
    <div class="Magnify-container">
      <!-- 图片展示 -->
      <div class="__magnify__img">
        <img :src="props.imgSrc" alt="">
        <!--颜色块-->
        <!-- <div class="__magnify__zoom"
             :style="`height:${props.zoomRect.h}vh;
             width:${props.zoomRect.w}vh;
             display:{};
             `"
        ></div> -->
      </div>

      <!--放大-->
      <!-- <div class="__magnify__img-big-box"
           :style="`height:${props.imgBigRect.h}vh;
      width:${props.imgBigRect.w}vh;
      left:${props.imgBigRect.l}vh;
      top:${props.imgBigRect.t}vh;
      `"
      >
        <img class="__magnify__img-big-img" :src="props.imgSrc" alt="">
      </div> -->
    </div>
  </main>
</template>
<script setup lang="ts">

/**
 * @author:hyw
 * @param:
 * rate：放大比例
 * imgBigSrc：大图src
 * imgSrc：小图路径
 * zoomRect:{
 *   h:颜色块高度
 *   w:颜色快宽度
 * }
 * imgBigRect:{
 *   h:大图高度
 *   w:大图宽度
 *   l:大图x位置
 *   t:大图y位置
 * }
 * zoomColor:颜色快颜色
 * 以上位置均为vh
 */
const props = defineProps({
  rate: {
    type: Number,
    default: 50
  },
  imgBigSrc: {
    type: String,
    default: '/img/zwt.png'
  },
  imgSrc: {
    type: String,
    default: '/img/zwt.png',
  },
  zoomRect: {
    type: Object,
    default: {
      h: 10,
      w: 10
    }
  },
  imgBigRect: {
    type: Object,
    default: {
      h: 50,
      w: 50,
      l: 80,
      t: 0,
      lc : 75,
      speed:2
    }
  },
  zoomColor: {
    type: String,
    default: 'yellow'
  }
})

// 放大的比例
const RATE = props.rate;

// onMounted(() => {
//   let oImg = <HTMLDivElement>document.getElementsByClassName("__magnify__img")[0];
//   let oZoom = <HTMLDivElement>document.getElementsByClassName("__magnify__zoom")[0];
//   let oImgBig = <HTMLDivElement>document.getElementsByClassName("__magnify__img-big-box")[0];
//   let oImgBigImg = <HTMLDivElement>document.getElementsByClassName("__magnify__img-big-img")[0];

//   //init
//   (() => {
//     oZoom.style.backgroundColor = props.zoomColor
//   })()

//   oImg.onmouseover = function () {
//     oZoom.style.display = "block";
//     oImgBig.style.display = "block";
//   }

//   oImg.onmouseout = function () {
//     oZoom.style.display = "none";
//     oImgBig.style.display = "none";
//   }
//   let zoomX = 0,
//       zoomY = 0
//   oImg.onmousemove = function (e) {

//     zoomX = e.clientX - oImg.getBoundingClientRect().left
//     zoomY = e.clientY - oImg.getBoundingClientRect().top;

//     if (zoomX < 0) {
//       zoomX = 0
//     }
//     if (zoomX + oZoom.offsetWidth >
//         oImg.getBoundingClientRect().left +
//         oZoom.offsetWidth
//     ) {
//       zoomX = oImg.getBoundingClientRect().left
//     }
//     if (zoomY < 0) {
//       zoomY = 0
//     }
//     if (e.clientY >
//         oImg.getBoundingClientRect().top +
//         oImg.getBoundingClientRect().height
//         -
//         oZoom.offsetWidth
//     ) {
//       zoomY =
//           oImg.getBoundingClientRect().height
//           -
//           oZoom.offsetWidth

//     }

//     oZoom.style.left = zoomX + "px";
//     oZoom.style.top = zoomY + 'px';

//     oImgBigImg.style.left = (props.imgBigRect.lc || 75) + -zoomX * (props.imgBigRect.speed || 2)+ "px";
//     oImgBigImg.style.top =  -zoomY * (props.imgBigRect.speed || 2)+ "px";
//     oImgBigImg.style.height = props.rate + "%";
//     oImgBigImg.style.width = props.rate + "%";

//   }
// })
</script>

<style scoped src="./index.scss"></style>
<style scoped src="./media.scss"></style>
