<template>
  <div :class="'ScaleBox ' + onlyClass" id="ScaleBoxDom">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
/* eslint-disable */
import { onMounted, ref, watch } from "vue";

const props = defineProps({
  name: String,
  onlyClass: String,
  config: {
    type: Object,
    default: () => ({}),
  },
  size: {
    type: Object,
    default: () => ({}),
  }
});

let width = 966;
let height = 485;

onMounted(() => {
  console.log(props.config, 'tttttttttttttttt')
  location.href.includes('preview')
  const w = width
  const h = height
  setScale({width: w, height: h});
});

const getScale = (val) => {
  // 固定好16：9的宽高比，计算出最合适的缩放比
  const ww = val.width / width;
  const wh = val.height / height;
  const scalex = width / val.width;
  const scaley = height / val.height;
  return {
    scaley,
    scalex,
    ww,
    wh,
  };
};

const setScale = (val:any) => {
  if (val) {
    // 获取到缩放比例，设置它
    let sObj:any = getScale(val);
    const dom:any = document.querySelector(`#ScaleBoxDom.${props.onlyClass}`);

    if (dom) {
      dom.style.setProperty("--scale-x", sObj.ww * 100 + '%');
      dom.style.setProperty("--scale-y", sObj.wh * 100 + '%');
      dom.style.setProperty("--w", sObj.scalex * 100 + '%');

      if(sObj.scale < 1.494){
        dom.style.setProperty("--l", (sObj.scalex * width - width) / 3 * -1 + 'px');
        dom.style.setProperty("--t", (sObj.scaley * height - height) / 3 * -1+ 'px');
      }else {
        dom.style.setProperty("--l", (sObj.scalex * width - width) / (sObj.scalex / 0.5) * -1 + 'px');
        dom.style.setProperty("--t", (sObj.scaley * height - height) /(sObj.scaley / 0.5) * -1+ 'px');
      }
    }
  }
};

let w:any = window
w.setComponentSize = (val:any) => {
    setScale(val);
}

</script>

<style>
#ScaleBoxDom {
  --scale-x: 1;
  --scale-y: 1;
  --w: 100%;
  --l: 0px;
  --t: 0px;
}
.ScaleBox {
  /* position: absolute; */
  transform: scale(var(--scale-x), var(--scale-x));
  height: var(--w);
  width: var(--w);
  left: var(--l);
  top: var(--t);
  min-width: 628px;
  min-height: 315px;
  /* height: 226%; */
  /* top: -130px; */
}
</style>
