<!--
  Description: 首页
  Author: 李亚光
  Date: 2023-04-21
 -->
<script lang="ts" setup name="dashboard">
import guadmap from '@/components/map/index.vue'
const mainHeight = ref(document.body.clientHeight - 50)
window.addEventListener('resize', () => {
  const bodyHeight = document.body.clientHeight - 50
  mainHeight.value = bodyHeight
})
const mapRef = ref()
const change = () => {
  mapRef.value.changeLayerGrop()
}
</script>

<template>
  <div :style="{ height: `${mainHeight}px` }">
    <!-- 地图 -->
    <guadmap ref="mapRef" />
    <!-- 按钮 -->
    <div class="btn">
      <el-button @click="change">
        {{ mapRef?.flag ? '卫星图层' : '默认图层' }}
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.btn {
  position: absolute;
  right: 20px;
  top: 20px;
}
</style>