<script setup>
import { onMounted, onUnmounted, ref } from "vue"
import ScreenNavBar from "../components/ScreenNavBar.vue"
import { bindScreenScale, DESIGN_HEIGHT, DESIGN_WIDTH } from "../utils/screenFit.js"

/** 视口根节点，供 screenFit 写入 --screen-scale */
const viewportRef = ref(null)
let unbindScale = null

onMounted(() => {
  unbindScale = bindScreenScale(viewportRef.value)
})

onUnmounted(() => {
  if (typeof unbindScale === "function") {
    unbindScale()
  }
})
</script>

<template>
  <!-- 外层铺满窗口，内层舞台按 21:9 等比缩放 -->
  <div ref="viewportRef" class="screen-viewport">
    <div
      class="screen-stage"
      :style="{ width: DESIGN_WIDTH + 'px', height: DESIGN_HEIGHT + 'px' }"
    >
      <ScreenNavBar />
      <div class="screen-body">
        <router-view />
      </div>
    </div>
  </div>
</template>

<style scoped>
.screen-viewport {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: var(--screen-bg); */
  box-sizing: border-box;
  /* background: url('@/assets/bg.png') no-repeat center center;
  background-size: cover; */
}

.screen-stage {
  position: relative;
  flex-shrink: 0;
  transform: scale(var(--screen-scale, 1));
  transform-origin: center center;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  /* background: var(--screen-bg-stage); */
  background: url('../assets/bg.png') no-repeat center center;
  background-size: cover;
}

.screen-body {
  width: 100%;
  height: calc(100% - 100px);
}
</style>
