<script setup>
import { Position, Handle } from "@vue-flow/core";
const props = defineProps(["data", "id"]);
const errArray = inject("errArray");
const currentProcess = inject("currentProcess");
const selectNode = inject("selectNode");
const selectStatus = ref(false);
const editStatus = inject("editStatus");
const getBorderClass = computed(() => {
  let str = "borderBlack";
  if (selectStatus.value) {
    if (editStatus.value == true) {
      str = "borderBlue";
    } else {
      str = "borderGreen";
    }
  }
  if (errArray.value.includes(props.id)) {
    str += " errBg";
  }
  return str;
});
watch(
  () => currentProcess.value,
  () => {
    if (currentProcess.value == null) {
      selectStatus.value = false;
      return;
    }
    selectStatus.value = props.id == currentProcess.value.id;
  },
  { deep: true }
);
watch(
  () => selectNode.value,
  () => {
    if (selectNode.value == null) {
      selectStatus.value = false;
      return;
    }
    selectStatus.value = props.id == selectNode.value.id;
  },
  { deep: true }
);
console.log(props.data);
</script>

<template>
  <div class="nodes" :class="getBorderClass">
    <div
      style="
        text-align: center;
        width: 100%;
        word-wrap: break-word;
        margin: 10px;
      "
    >
      {{ data.lineTag ? data.label + "(" + data.lineTag + ")" : data.label }}
    </div>

    <div v-if="data.handles && data.handles.length">
      <Handle
        class="handle-style"
        v-for="(handle, index) in data.handles"
        :type="handle.type"
        :position="handle.position"
      />
    </div>
    <div v-else>
      <Handle class="handle-style" type="target" :position="Position.Top" />
      <Handle class="handle-style" type="source" :position="Position.Bottom" />
    </div>
  </div>
</template>
<style lang="scss">
.errBg {
  background-color: rgba(255, 0, 0, 0.8);
}
.vue-flow__node-custom {
  padding: 0px !important;
  background-color: white !important;
  box-shadow: 0 0 0 0 !important;
  border: 0px solid black !important;
}
.nodes {
  width: 150px;
  min-height: 60px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
}
.borderBlack {
  border-color: black;
  border-width: 1px;
  color: black;
}
.borderBlue {
  border-color: blue;
  border-width: 2px;
  color: blue;
}
.borderGreen {
  border-color: green;
  border-width: 2px;
  color: green;
}

.handle-style {
  width: 13px;
  height: 13px;
}
</style>
