<script setup lang="ts">
  import { computed } from 'vue';
  import type { NodeProps } from '@vue-flow/core';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { Position, Handle } from '@vue-flow/core';
  import { NodeNameByType } from '../../config';
  import FixedPanel from './../../layout/FixedPanel.vue';
  import { useRuleProcessStore } from '../../store';
  const props = defineProps<NodeProps>();
  const nodeName = computed(() => {
    if (props && props.data.type) {
      const labelName = NodeNameByType.has(props.data.type)
        ? NodeNameByType.get(props.data.type)
        : '节点';
      return labelName;
    }
    return '节点';
  });
  const store = useRuleProcessStore();
  const { getInfoId } = store;

  const hasInfoId = computed(() => {
    return getInfoId() == props.id;
  });
</script>
<template>
  <div class="vue-flow__node-custom">
    <Handle type="source" :position="Position.Left" />
    <div class="rule-box-123456">
      <div class="head custom-head">
        <div class="left">
          <IconFontSymbol icon="rule-panel-start" fontSize="18" /><span class="text custom-text">{{
            nodeName
          }}</span>
        </div>
        <div class="right"> </div>
      </div>
      <div class="title-box">{{ data.label }}</div>
      <FixedPanel v-if="hasInfoId" />
    </div>

    <Handle type="target" :position="Position.Right" />
  </div>
</template>
<style lang="less" scoped>
  .custom-head {
    background: #1c8dff;
  }

  .custom-text {
    color: #fff;
  }
</style>
<style scoped></style>
