<script setup lang="ts">

import {Edit} from "@element-plus/icons-vue";
import {GrandparentMethod, HJInterNodeData, HJMethodName, HJMethodProvideName} from "../../types/comTypes";
import {inject, markRaw} from "vue";
const props = defineProps<HJInterNodeData>();


const editMethod = inject<GrandparentMethod>(HJMethodProvideName)

const editClick = () => {
  editMethod && editMethod( HJMethodName.EditNode,JSON.parse(JSON.stringify(markRaw(props))))
}

</script>

<template>
  <div class="box-header">
    <div> {{ props?.data?.label ?? "" }}</div>
    <div class="right-btns">
      <el-icon :size="18" class="right-icon">
        <Edit  @click.prevent="editClick"/>
      </el-icon>
    </div>
  </div>
</template>

<style scoped lang="less">
.box-header {
  height: 25px;
  line-height: 25px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  background-color: #ccc;

  .right-btns {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .right-icon {
    cursor: pointer;
  }
}
</style>
