<script setup lang="ts">
import { ref } from "vue";
import { RouterView } from "vue-router";
import ScaleScreen from "@/components/scale-screen";
import Left from "./component/left.vue";
import Right from "./component/right.vue";
import Center from "./component/center.vue";
import Headers from "./header.vue";
import Setting from "./setting.vue";
import { useSettingStore } from "@/stores/index";
import { storeToRefs } from "pinia";
import MessageContent from "@/components/Plugins/MessageContent";
import Map from "./component/map.vue";
import Home from "./index/index.vue"
const settingStore = useSettingStore();
const { isScale } = storeToRefs(settingStore);
const wrapperStyle = {};
</script>

<template>
  <scale-screen
    width="12960"
    height="2430"
    :delay="500"
    :fullScreen="false"
    :boxStyle="{
      background: '#03050C',
      overflow: isScale ? 'hidden' : 'auto',
    }"
    :wrapperStyle="wrapperStyle"
    :autoScale="isScale"
  >
    <div class="content_wrap">
      <!-- 背景层 -->
      <div class="background_layer">
        <Map />
        <div class="header_layer">
          <Headers />
        </div>
        <div class="left">
          <Left title=""></Left>
        </div>
        <div class="right">
          <Right title=""></Right>
        </div>
        <Center class="center" />
      </div>

      <!-- 前景层 -->
      <!-- <div class="foreground_layer">
        <Headers />
        <RouterView />
      </div> -->
      <!-- <MessageContent /> -->
    </div>
  </scale-screen>
  <Setting />
</template>
<style lang="scss" scoped>
.content_wrap {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url("@/assets/img/pageBg.png");
  background-size: cover;
  background-position: center center;
  overflow: hidden; // 防止地图溢出边界
}

.background_layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // z-index: 0; // 确保在前景层之下
  position: relative;
  .header_layer{
    position: absolute;
    top: 0;
  }
  .left{
    position: absolute;
    top: 100px;
    left: 0;
  }
  .right{
    position: absolute;
    top: 100px;
    right: 0;
  }
  .center{
    position: absolute;
    top: 100px;
  }
}

.foreground_layer {
  position: relative;
  // z-index: 1; // 确保在背景层之上
}
</style>
