<template>
  <div class="home-page">
    <div style="width: 100%;height: calc(100vh - 80px);">
      <Map @mapOnLoad="mapOnLoad"/>
    </div>
    <div ref="leftComponentRef" style="position: absolute;top: 0px;left: 0px;">
      <!-- 项目列表 -->
      <ProjectList :map="map"/>
      <!-- 基本信息 -->
      <Info />
    </div>
    <div ref="rightComponentRef" style="position: absolute;top: 0px;right: 0px;">
      <!-- 智慧巡检 -->
      <Inspection />
      <!-- 成果动态 -->
      <Result />
    </div>
  </div>
</template>

<script setup lang="ts">
// import Map from '@/views/demo/workmanagement/workplan/components/map.vue'
import Map from './Map/index.vue'
import ProjectList from './ProjectList/index.vue'
import Info from './Info/index.vue'
import Inspection from './Inspection/index.vue'
import Result from './Result/index.vue'
import { ref, onMounted, onBeforeUnmount, } from "vue"

const DESIGN_WIDTH = 1912
const DESIGN_HEIGHT = 962
const leftComponentRef = ref<HTMLElement | null>(null)
const rightComponentRef = ref<HTMLElement | null>(null)
let map

function updateScale() {
  const scaleX = window.innerWidth / DESIGN_WIDTH
  const scaleY = window.innerHeight / DESIGN_HEIGHT
  const scale = Math.min(scaleX, scaleY)

  const left = leftComponentRef.value
  const right = rightComponentRef.value
  if (left) {
    left.style.transform = `scale(${scale}) translate(-50%, -50%)`
  }
  if (right) {
    right.style.transform = `scale(${scale}) translate(-50%, -50%)`
  }
}

onMounted(() => {
  updateScale()
  window.addEventListener('resize', updateScale)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateScale)
})
const mapOnLoad = (value) => {
  map = value
}
</script>

<style lang="scss" scoped>
.home-page{
  position: relative;
  width: 100%;
  height: 100%;
}

</style>