<template>
  <div class="layerbutton">
    <div
      class="layerbutton_div"
      :style="{
        marginBottom: '15px',
      }"
    >
      <img
        id="left_layerButton_1"
        :src="button_1 ? '/statistical/layer-btn1-active.png' : '/statistical/layer-btn1.png'"
        @click="handlerLayerChange(1)"
      />
    </div>
    <div class="layerbutton_div">
      <img
        id="left_layerButton_2"
        :src="button_2 ? '/statistical/layer-btn2-active.png' : '/statistical/layer-btn2.png'"
        @click="handlerLayerChange(2)"
      />
    </div>
    <div class="layerbutton_div">
      <img
        id="left_layerButton_2"
        :src="button_3 ? '/statistical/layer-btn3-active.png' : '/statistical/layer-btn3.png'"
        @click="handlerLayerChange(3)"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, defineEmits, defineProps } from 'vue';
  // emit
  const emit = defineEmits(['handlerLayerChange']);
  const button_1 = ref(false);
  const button_2 = ref(true);
  const button_3 = ref(false);
  // 控制图层
  function handlerLayerChange(type: number) {
    switch (type) {
      case 1:
        button_1.value = true;
        button_2.value = false;
        button_3.value = false;
        break;
      case 2:
        button_1.value = false;
        button_2.value = true;
        button_3.value = false;
        break;
      case 3:
        button_1.value = false;
        button_2.value = false;
        button_3.value = true;
        break;
    }
    emit('handlerLayerChange', type);
  }
</script>

<style lang="less" scoped>
  .layerbutton {
    position: absolute;
    top: 130px;
    left: 60px;
    .layerbutton_div {
      margin-bottom: 14px;
      cursor: pointer;
      img {
        width: 60px;
      }
    }
  }
</style>
