<template>
  <div class="tool-bar">
    <div v-for="(tool, index) in toolList" :key="index" class="tool-module">
      <template v-for="t in tool" :key="t.name">
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="t.label"
          placement="top-start"
        >
          <div class="tool" @click.stop="handleClick(t.name)">
            <common-icon
              class="icon"
              :class="{ disabeld: t.disabeld }"
              :name="t.name"
              :size="20"
            ></common-icon>
          </div>
        </el-tooltip>
      </template>
    </div>
  </div>
</template>

<script setup>
// import { defineProps, ref, getCurrentInstance, onMounted } from 'vue';
import { defineProps, onMounted } from 'vue';

const emits = defineEmits(['toolHandelClick']);

defineProps({
  graph: {
    type: Object,
    default: () => {}
  },
  toolList: {
    type: Array,
    default: () => []
  }
});
// const { proxy } = getCurrentInstance();

// const targetNode = ref(null);
// 点击事件
const handleClick = (name) => {
  emits('toolHandelClick', name);
};

onMounted(() => {
  // proxy.$eBus.on('select-node', (data) => {
  //   targetNode.value = data;
  // });
});
</script>

<style scoped lang="scss">
.tool-bar {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 52px;
  background: #fff;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-right: 10px;
  .tool-module {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    height: 100%;
    align-items: center;
    padding: 0 10px;
    .tool {
      padding: 0 10px;
      cursor: pointer;
    }
    &:last-child {
      border-right: none;
    }
  }
}
.icon {
  // cursor: pointer;
  color: rgab(0, 0, 0, 0, 0.6);
  &:hover {
    color: rgba(0, 0, 0, 1);
  }
}
.disabeld {
  opacity: 0.3;
  cursor: not-allowed;
}
</style>