<!--
 * @Author: lixin
 * @Date: 2023-5-27
 * @Description: 测量工具: 测距、测面、测高
-->
<template>
  <div class="measure-list">
    <div
      v-for="(item, index) in controlList"
      :key="index"
      :class="selectedTool === item.id ? 'selceted' : ''"
      class="measure-bar"
      @click="handleTool(item)"
    >
      <img
        :src="selectedTool === item.id ? getImageUrl(item.id + '_press'): getImageUrl(item.id)"
      >
      <p
        :class="selectedTool === item.id ? 'selceted' : ''"
        class="measure-text"
      >{{ item.label }}</p>
    </div>

  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
  emits: ['measure'],
  setup(props, { emit }) {
    const data = reactive({
      controlList: [
        { id: 'distance', label: '测距' },
        { id: 'area', label: '测面' },
        { id: 'height', label: '测高' },
        { id: 'clear', label: '清除' }
      ],
      selectedTool: null
    })

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

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

    const cancelMeasure = () => {
      data.selectedTool = null
    }

    return {
      ...toRefs(data),
      getImageUrl,
      handleTool,
      cancelMeasure
    }
  }
}
</script>
<style lang="scss" scoped>
    .measure-list {
        position: absolute;
        top: 105px;
        right: 20px;
        width: 280px;
        height: 90px;
        cursor: pointer;
        background: url("../../../../assets/basemap/measure/celiang_bg.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;

    .measure-bar{
        width:60px;
        height:60px;
        background:rgba(1,25,63,0.15);
        border:1px solid rgba(0,223,244,1);
        border-radius:2px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin: 0 5px;

        .measure-text{
            font-size:12px;
            font-family:Microsoft YaHei;
            font-weight:400;
            color: #FFFFFF;
        }
        .measure-text.selceted{
            color: #ffbb00;
        }

      }
    }

    .measure-bar.selceted{
        border:1px solid #ffbb00;
    }
</style>

