<template>
  <div class="baselayer-switcher">
    <div
      class="switcher-item"
      v-for="item in data"
      :key="item.name"
      :class="{ active: item.name === activeLayer }"
      @click="activeLayer = item.name"
    >
      <img :src="item.img" alt="" />
      <div class="label">{{ item.name }}</div>
    </div>
    <div class="nineSectionsImg">
      <img :src="nineSectionsImg" alt="" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import mapShiliangtu from "@/assets/images/map-shiliangtu.png";
import mapDixingtu from "@/assets/images/map-dixingtu.png";
import mapYingxiangtu from "@/assets/images/map-yingxiangtu.png";
import nineSectionsShiliang from "@/assets/images/nineSections-shiliang.png";
import nineSectionsDixing from "@/assets/images/nineSections-dixing.png";
import nineSectionsYingxiang from "@/assets/images/nineSections-yingxiang.png";
const data = ref([
  { name: "矢量", img: mapShiliangtu },
  { name: "地形", img: mapDixingtu },
  { name: "影像", img: mapYingxiangtu },
]);
const nineSectionsImg = ref(nineSectionsShiliang);
const nineSectionsData = ref([
  { name: "矢量", img: nineSectionsShiliang },
  { name: "地形", img: nineSectionsDixing },
  { name: "影像", img: nineSectionsYingxiang },
]);
const activeLayer = ref("矢量");

watch(activeLayer, (val) => {
  nineSectionsImg.value =
    nineSectionsData.value.find((item) => item.name === val)?.img || "";
});
</script>

<style lang="scss" scoped>
.baselayer-switcher {
  display: flex;
  position: absolute;
  bottom: 20px;
  right: 480px;
  z-index: 200;
  .switcher-item {
    background: #d8d8d8;
    border-radius: 2px;
    width: 85px;
    height: 60px;
    display: none;
    position: relative;
    cursor: pointer;
    img {
      height: 100%;
      width: 100%;
    }
    .label {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 2px 3px;
      background-color: #00000059;
      color: #fff;
      border-radius: 2px 0 0 2px / 2px 0px 0px 2px;
    }
    &:hover {
      border: 1px solid #3a7098;
      .label {
        background-color: #005293;
      }
    }
  }
  .switcher-item:not(:first-child) {
    margin-left: 4px;
  }
  .active {
    display: block;
    border: 1px solid #3a7098;
    .label {
      background-color: #005293;
    }
  }
  &:hover {
    .switcher-item {
      display: block;
    }
  }
  .nineSectionsImg {
    position: absolute;
    right: 56px;
    bottom: 92px;
    border: 1px solid grey;
    pointer-events: none;
    img {
      max-width: 100px;
      width: 100px !important;
    }
  }
}
</style>
