<!--
 * @Descripttion: 
 * @version: 
 * @Author: ysh
 * @Date: 2023-06-08 14:22:19
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-06-28 16:24:31
-->
<template>
  <div class="tool-warpper">
    <div class="closebtn"></div>
    <a-button v-for="(drawingActionInstance, index) in drawingActionInstances"
      @click="$emit('toggle', drawingActionInstance)">
      <a-tooltip placement="bottom">
        <template #title>{{ handleText(drawingActionInstance) }}</template>
        <svg-icon :icon-class="getIcons(index, iconEntity)" class-name='custom-class' />
      </a-tooltip>
    </a-button>
    <a-button @click="$emit('clear', curActionInstance)" danger>
      <a-tooltip placement="bottom">
        <template #title>清除图形</template>
        <svg-icon icon-class="MaterialSymbolsDelete" class-name='custom-class' />
      </a-tooltip>
    </a-button>
    <a-button  @click="$emit('close',curActionInstance)" >
      <a-tooltip placement="bottom">
        <template #title>关闭</template>
        <svg-icon icon-class="MaterialSymbolsCloseRounded" class-name='custom-class close'/>
      </a-tooltip>
    </a-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const props = defineProps(['drawingActionInstances', 'iconEntity']);
const curActionInstance = ref<Object>();
function handleText(e) {
  curActionInstance.value = e;
  return e.tip;
}
function getIcons(index: Number, obj: Array<Object>) {
  for (let i of obj) {
    if (index == i.index) {
      return i.icon;
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-class {
  font-size: 20px;
}

.tool-warpper {
  padding: 10px;
  // background-color: rgb(255, 255, 255);
}
</style>