<!--
 * @Author: lixin
 * @Date: 2023-5-27
 * @Description: 地图上半部分工具栏，包括: 图层、漫游、量测、在线标绘、卷帘、出图等
-->
<template>
  <div class="tool-list">
    <div v-for="(item, index) in toolList" :key="index" class="tool-bar">
      <img :src="item.id === selectedTool ? getImgUrl(item.id + '_press') : getImgUrl(item.id)">
      <span class="tool-text" :class="item.id === selectedTool ? 'press': ''" @click="handleTool(item)">{{ item.label }}</span>
      <b v-if="index !==(toolList.length -1)" />
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  emits: ['tool'],
  setup(props, { emit }) {
    const data = reactive({
      toolList: [
        { id: 'tuceng', label: '图层' },
        { id: 'liangce', label: '量测' }
      ],
      selectedTool: null
    })

    const getImgUrl = (src) => {
      return new URL(`../../../../assets/basemap/toolbar/${src}.png`, import.meta.url).href
    }

    const handleTool = (info) => {
      if (info?.id !== data.selectedTool) {
        data.selectedTool = info?.id
      } else {
        data.selectedTool = null
      }
      emit('tool', data.selectedTool)
    }

    return {
      ...toRefs(data),
      getImgUrl,
      handleTool
    }
  }
}
</script>

<style lang="scss" scoped>
.tool-list{
    // width: 592px;
    height: 40px;
    position: absolute;
    top: 60px;
    right: 20px;
    cursor: pointer;
    background: url("../../../../assets/basemap/toolbar/caozuo_bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;

    .tool-bar{
        display: flex;
        align-items: center;
        margin-left: 15px;

        .tool-text{
            font-size:14px;
            font-family:Microsoft YaHei;
            font-weight:400;
            /*color:rgba(78,253,255,1);*/
            color: #FFFFFF;
            margin: 0 15px;
        }

        .tool-text.press{
            color: rgb(98,223,255);
        }

        b {
            height: 20px;
            display: inline-block;
            border-right: 2px solid rgb(98,223,255);
            // border-right: 1px solid #eee;
            position: relative;
        }

    }
}
</style>
