<!--
  Description: 首页
  Author: 李亚光
  Date: 2023-04-21
 -->
<script lang="ts" setup name="dashboard">
import leaflet from '@/components/map/leaflet.vue'
// import amap 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()
}
// 当前展示
const current = ref(true)
watch(() => current.value, (newVal) => {
  mapRef.value.changeFlagType()
})
// 当前图层
const layer = ref('卫星图层')
</script>

<template>
  <div :style="{ height: `${mainHeight}px`, overflow: 'hidden' }">
    <!-- 地图 -->
    <leaflet ref="mapRef" />
    <!-- 按钮 -->
    <div class="btn1">
      <el-radio-group v-model="current">
        <el-radio-button :label="true">
          用电监测
        </el-radio-button>
        <el-radio-button :label="false">
          用热监测
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="btn">
      <!-- <el-radio-group v-model="layer">
        <el-radio-button label="卫星图层" @click="change">
          卫星图层
        </el-radio-button>
      </el-radio-group> -->
      <el-button @click="change">
        {{ mapRef?.flag ? '卫星图层' : '默认图层' }}
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.btn {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 999;
}

.btn1 {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 999;
}
</style>