<template>
	<!-- <ScaleBox :width="width" :height="height" bgc="transparent" :delay="50" v-if="!isFull">
		<div class="orderBgc">
			<Map3D class="mapStyle"></Map3D>
			<Map2D class="mapStyle"></Map2D>
			<headerScreen class="topHeader"></headerScreen>
			<div class="bottomContent">
				<leftScreen class="leftScreen"></leftScreen>
				<centerScreen class="centerScreen"></centerScreen>
				<rightScreen class="rightScreen"></rightScreen>
			</div>
			<div class="borderBottom"></div>
		</div>
	</ScaleBox> -->
	<div class="all-content">
		<div class="orderBgc" ref="dataScreenRef">
			<Map3D class="mapStyle"></Map3D>
			<!-- <Map2D class="mapStyle"></Map2D> -->
			<headerScreen class="topHeader"></headerScreen>
			<!-- <div class="bottomContent">
				<leftScreen class="leftScreen"></leftScreen>
				<centerScreen class="centerScreen"></centerScreen>
				<rightScreen class="rightScreen"></rightScreen>
			</div> -->

			<leftScreen class="leftScreen"></leftScreen>
			<centerScreen class="centerScreen"></centerScreen>
			<rightScreen class="rightScreen"></rightScreen>
			<div class="borderBottom"></div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeMount } from "vue";
import headerScreen from "./components/header.vue";
import centerScreen from "./components/center.vue";
import leftScreen from "./components/left.vue";
import rightScreen from "./components/right.vue";
import Map3D from "./components/map3D.vue";
import Map2D from "./components/map2D.vue";
import ScaleBox from "vue3-scale-box";
const dataScreenRef = ref<HTMLElement | null>(null);
const width = ref(0);
const height = ref(0);
const isFull = ref(true);
// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 923) => {
	let ww = window.innerWidth / width;
	let wh = window.innerHeight / height;
	return ww < wh ? ww : wh;
};
// 设置响应式
const resize = () => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
	}
};
onMounted(() => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
		dataScreenRef.value.style.width = `1920px`;
		dataScreenRef.value.style.height = `923px`;
	}
	window.addEventListener("resize", resize);
});
onBeforeMount(() => {
	window.removeEventListener("resize", resize);
});
</script>

<style lang="scss" scoped>
.all-content {
	width: 100%;
	height: 100%;
	.orderBgc {
		position: fixed;
		top: 50%;
		left: 50%;
		transform-origin: left top;
		.mapStyle {
			position: absolute;
		}
		.topHeader {
			width: 100%;
			height: 10%;

			// background: linear-gradient(to right, rgb(17 20 25 / 60%), rgb(17 20 25 / 20%), rgb(17 20 25 / 60%));
		}
		.bottomContent {
			display: flex;
			width: 100%;
			height: 100%;
			position: relative;
			.leftScreen {
				height: 90%;
			}
			.centerScreen {
				height: 100px;
			}
			.rightScreen {
				height: 90%;
			}
		}
		.borderBottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 6%;
			background: url("@/assets/images/screenImg/bottomBorder.png") no-repeat center bottom;
			background-size: 100%;
		}
	}
}
</style>
