<template>
  <div class="tools-bar">
    <div class="option-box" v-for="tool in toolsOptions" :key="tool.id" @click="handleSelect(tool)">
      <el-popover
        placement="right"
        title=""
        trigger="hover"
        width="60"
        :content="tool.name"
        :popper-class="tool.popClass"
      >
        <template #reference>
          <div v-if="tool.id == 'autoPlay'" class="auto-play">
            <div
              class="auto-play-box"
              :class="{ active: mapStore.currentToolSelectArray.includes(tool.id) }"
            >
              <img
                :src="
                  mapStore.currentToolSelectArray.includes(tool.id) ? tool.activeImage : tool.image
                "
              />
            </div>
          </div>
          <img
            v-else
            :src="mapStore.currentToolSelectArray.includes(tool.id) ? tool.activeImage : tool.image"
          />
        </template>
      </el-popover>
    </div>
  </div>
</template>

<script setup>
import { useMapStore } from '@/stores/mapStore.js';

const mapStore = useMapStore();
//地图工具图例
const toolsOptions = [
  {
    id: '3dChange',
    name: '三维转换',
    image: new URL(`@/assets/image/mapTools/3D.png`, import.meta.url).href,
    activeImage: new URL(`@/assets/image/mapTools/2D.png`, import.meta.url).href,
    popClass: 'popper-option-box-60'
  },
  {
    id: 'autoPlay',
    name: '自动播放',
    image: new URL(`@/assets/image/mapTools/play.png`, import.meta.url).href,
    activeImage: new URL(`@/assets/image/mapTools/play-auto.png`, import.meta.url).href,
    popClass: 'popper-option-box-60'
  },
  {
    id: 'newAdress',
    name: '新址',
    image: new URL(`@/assets/image/mapTools/newAdress.png`, import.meta.url).href,
    activeImage: new URL(`@/assets/image/mapTools/newAddressActive.png`, import.meta.url).href,
    popClass: 'popper-option-box-60'
  },
  {
    id: 'touch',
    name: '密接',
    image: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href,
    activeImage: new URL(`@/assets/image/mapTools/2-1.png`, import.meta.url).href,
    popClass: 'popper-option-box-60'
  },
  {
    id: 'infectious',
    name: '传染病',
    image: new URL(`@/assets/image/mapTools/3.png`, import.meta.url).href,
    activeImage: new URL(`@/assets/image/mapTools/3-1.png`, import.meta.url).href,
    popClass: 'popper-option-box-60'
  },
  {
    id: 'feverClinic',
    name: '发热门诊',
    image: new URL(`@/assets/image/mapTools/4.png`, import.meta.url).href,
    activeImage: new URL(`@/assets/image/mapTools/4-1.png`, import.meta.url).href,
    popClass: 'popper-option-box-60'
  },
  {
    id: 'breathe',
    name: '呼吸',
    image: new URL(`@/assets/image/mapTools/5.png`, import.meta.url).href,
    activeImage: new URL(`@/assets/image/mapTools/5-1.png`, import.meta.url).href,
    popClass: 'popper-option-box-60'
  },
  {
    id: 'flowCar',
    name: '流调会商车',
    image: new URL(`@/assets/image/mapTools/6.png`, import.meta.url).href,
    activeImage: new URL(`@/assets/image/mapTools/6-1.png`, import.meta.url).href,
    popClass: 'popper-option-box-90'
  },
  {
    id: 'Bidding',
    name: '标会工具',
    image: new URL(`@/assets/image/mapTools/7.png`, import.meta.url).href,
    activeImage: new URL(`@/assets/image/mapTools/7-1.png`, import.meta.url).href,
    popClass: 'popper-option-box-70'
  }
];

const handleSelect = (tool) => {
  if (mapStore.currentToolSelectArray.includes(tool.id)) {
    mapStore.delCurrentToolSelectArray(tool?.id || '');
  } else {
    mapStore.setCurrentToolSelectArray(tool?.id || '');
  }
};
</script>

<style lang="scss" scoped>
.tools-bar {
  position: absolute;
  left: 20px;
  bottom: 20px;
  .option-box {
    width: 50px;
    height: 50px;
    margin-top: 3px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .auto-play {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    .auto-play-box {
      width: 34px;
      height: 34px;
      border-top-left-radius: 6px;
      border-bottom-right-radius: 6px;
      background: rgb(214, 231, 250);
      border: 1px solid rgb(0, 128, 255);
      &.active {
        background: rgb(255, 242, 221);
        border: 1px solid rgb(247, 144, 0);
      }
      img{
        position: relative;
        right: -2px;
      }
    }
  }
}
</style>
<style>
.popper-option-box-60 {
  min-width: 65px !important;
}
.popper-option-box-70 {
  min-width: 70px !important;
}
.popper-option-box-90 {
  min-width: 80px !important;
}
</style>
