<template>
  <div class="tools-bar">
    <div class="option-box" v-for="tool in toolsOptions" :key="tool.id" @click="handleSelect(tool)">
      <img
        :src="mapStore.currentToolSelectArray.includes(tool.id) ? tool.activeImage : tool.image"
      />
    </div>
  </div>
</template>

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

const mapStore = useMapStore();
//地图工具图例
const toolsOptions = [
  {
    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
  },
  {
    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
  },
  {
    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
  },
  {
    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
  },
  {
    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
  },
  {
    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
  },
  {
    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
  }
];

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%;
    }
  }
}
</style>
