<template>
  <section
    class="base-laytout"
    :style="{
      width: `${state.style.width}px`,
      height: `${state.style.height}px`,
      transform: `${state.style.transform}`,
      background: route.name == 'home' ? 'url(' + getAssetsFile('images/vsualized/homeb.png') + ')' : '',
    }"
  >
    <custom-scroll-title class="base-laytout-header" />
    <section class="base-laytout-main">
      <router-view />
    </section>
  </section>
</template>
<script setup>
import { onMounted, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getAssetsFile } from '@/utils';
const route = useRoute();
const state = reactive({
  style: {
    width: '1920',
    height: '1080',
    transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)',
  },
  scale: {},
});

const getScale = () => {
  const w = window.innerWidth / state.style.width;
  const h = window.innerHeight / state.style.height;
  return { x: w, y: h };
};

const setScale = () => {
  state.scale = getScale();
  state.style.transform = 'scaleY(' + state.scale.y + ') scaleX(' + state.scale.x + ') translate(-50%, -50%)';
};

onMounted(() => {
  setScale();
  window.onresize = () => {
    setScale();
  };
});
</script>
<style lang="scss" scoped>
.base-laytout {
  @include flex-column();
  position: fixed;
  z-index: 100;
  transform-origin: 0 0;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  user-select: none;
  box-sizing: border-box;
  width: 100%;
  height: 100;
  background:
    url('@/assets/images/basic/containerBG.png') no-repeat center 100%,
    url('@/assets/images/basic/containerBotBG.png') no-repeat bottom center;
  &-header {
    width: 100%;
    margin-bottom: 16px;
  }
  &-main {
    flex: 1;
    min-height: calc(100vh - 90px - 16px);
    padding: 0 40px;
    box-sizing: border-box;
  }
  .base-laytout-header {
    height: 90px;
    margin-bottom: 50px;
  }
}
</style>
