<script lang="ts" setup>
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import dashboard1 from "@/views/dashboard1/index.vue";

const DESIGN_WIDTH = 1920;
const DESIGN_HEIGHT = 1080;

const viewportWidth = ref(0);
const viewportHeight = ref(0);
const scale = ref(1);

function updateScreenAdapter() {
  viewportWidth.value = window.innerWidth;
  viewportHeight.value = window.innerHeight;

  const widthScale = viewportWidth.value / DESIGN_WIDTH;
  const heightScale = viewportHeight.value / DESIGN_HEIGHT;
  scale.value = Math.min(widthScale, heightScale);
}

const adapterStyle = computed(() => {
  const scaledWidth = DESIGN_WIDTH * scale.value;
  const scaledHeight = DESIGN_HEIGHT * scale.value;

  return {
    width: `${DESIGN_WIDTH}px`,
    height: `${DESIGN_HEIGHT}px`,
    left: `${(viewportWidth.value - scaledWidth) / 2}px`,
    top: `${(viewportHeight.value - scaledHeight) / 2}px`,
    transform: `scale(${scale.value})`,
  };
});

onMounted(() => {
  updateScreenAdapter();
  window.addEventListener("resize", updateScreenAdapter);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", updateScreenAdapter);
});
</script>

<template>
  <div class="screen-adapter">
    <div class="screen-adapter__inner" :style="adapterStyle">
      <Component :is="dashboard1" />
    </div>
  </div>
</template>

<style scoped>
.screen-adapter {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.screen-adapter__inner {
  position: absolute;
  transform-origin: left top;
}
</style>
