<template>
  <scale-screen
      width="1920"
      height="1080"
      :delay="500"
      :fullScreen="true"
      :boxStyle="{
      background: '#03050C',
      overflow: isScale ? 'hidden' : 'auto',
    }"
      :wrapperStyle="wrapperStyle"
      :autoScale="isScale"
  >
    <div class="content_wrap">
      <Headers :data="seatsList"/>
      <Container :data="seatsList"/>
    </div>
  </scale-screen>
  <Setting />
</template>
<script setup lang="ts" name="seats">
import {defineAsyncComponent, onMounted, ref} from "vue";
import { useSettingStore } from "@/stores/setting";
import { storeToRefs } from "pinia";
import {extensionPaged} from "api/home";

const ScaleScreen = defineAsyncComponent(() => import('@/components/scale-screen'));
const Headers = defineAsyncComponent(() => import('@/views/seats/header.vue'));
const Container = defineAsyncComponent(() => import('@/views/seats/container.vue'));
const Setting = defineAsyncComponent(() => import('@/views/index/setting.vue'));

const settingStore = useSettingStore();
const { isScale } = storeToRefs(settingStore);
const wrapperStyle = {};

const seatsList = ref<any[]>([]);
onMounted( async () => {
  try {
    const {result} = await extensionPaged();
    seatsList.value = result ?? [];
  }catch (e) {
    console.log(e)
  }
});
</script>
<style lang="scss" scoped>
.content_wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-image: url("@/assets/img/seats/bg.png");
  background-size: 100% 100%;
}
</style>
