<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 { getNodePrefix, NodeNameByType } from '../../config';
  import FixedPanel from './../../layout/FixedPanel.vue';
  import { useRuleProcessStore } from '../../store';
  import { RuleProcessNodeKey } from '/@/model/ruleProcessConfig';
  import { useVueFlow } from '@vue-flow/core';
  import { cloneDeep } from 'lodash-es';
  const props = defineProps<NodeProps>();
  const store = useRuleProcessStore();
  const { setProperties, getInfoId, autoIncrementLastNodeId, deleteInfo } = store;
  const { addNodes, screenToFlowCoordinate, removeNodes } = useVueFlow();
  const nodeName = computed(() => {
    if (props && props.data.type) {
      const labelName = NodeNameByType.has(props.data.type)
        ? NodeNameByType.get(props.data.type)
        : '节点';
      return labelName;
    }
    return '节点';
  });
  const hasInfoId = computed(() => {
    return getInfoId() == props.id;
  });
  const iconByType: Map<RuleProcessNodeKey, string> = new Map([
    [RuleProcessNodeKey.START_NODE, 'rule-panel-start'],
    [RuleProcessNodeKey.EVENT_NODE, 'rule-panel-event'],
    [RuleProcessNodeKey.RULE_NODE, 'rule-panel-rule'],
    [RuleProcessNodeKey.SELECT_NODE, 'rule-panel-select'],
    [RuleProcessNodeKey.CONDITION_NODE, 'rule-panel-if'],
    [RuleProcessNodeKey.FOR_NODE, 'rule-panel-for'],
    [RuleProcessNodeKey.WHILE_NODE, 'rule-panel-while'],
    [RuleProcessNodeKey.DEV_OPS_NODE, 'rule-panel-fuwuqi'],
  ]);
  const nodePanelIcon = computed(() => {
    if (props && props.data.type) {
      const labelName = iconByType.has(props.data.type)
        ? iconByType.get(props.data.type)
        : 'rule-panel-start';
      return labelName;
    }
    return 'rule-panel-start';
  });
  const nodePanelClass = computed(() => {
    if (props && props.data.type) {
      return props.data.type + '-node-box';
    }
    return 'rule-node-box';
  });
  function deleteNode() {
    removeNodes(props.data.id);
    deleteInfo(props.data.id);
  }
  function getId() {
    return getNodePrefix + autoIncrementLastNodeId();
  }
  function copyNode() {
    const position = screenToFlowCoordinate({
      x: props.position.x + 200,
      y: props.position.y + 180,
    });
    const nodeId = getId();
    const item = cloneDeep(props.data);
    item.id = nodeId;

    const newNode = {
      id: nodeId,
      nodeId,
      type: props.data.type,
      position,
      data: item,
    };
    setProperties(nodeId, item);
    addNodes(newNode);
  }
</script>
<template>
  <div class="vue-flow__node-custom">
    <Handle type="source" :position="Position.Left" />
    <div class="rule-box-123456" :class="nodePanelClass">
      <div class="head custom-head">
        <div class="left">
          <IconFontSymbol :icon="nodePanelIcon" fontSize="18" /><span class="text custom-text">{{
            nodeName
          }}</span>
        </div>
        <div class="right">
          <div class="fuzhi-box" @click.stop="copyNode"
            ><IconFontSymbol icon="rule-fuzhi" fontSize="14" class="icon"
          /></div>

          <div class="shanchu-box" @click.stop="deleteNode"
            ><IconFontSymbol icon="rule-shanchu" fontSize="14"
          /></div>
        </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>
  .start-node-box {
    .custom-head {
      background: #c8dbff;
    }

    .custom-text {
      color: #333;
    }
  }

  .event-node-box {
    .custom-head {
      background: #c8dbff;
    }

    .custom-text {
      color: #333;
    }
  }

  .rule-node-box {
    .custom-head {
      background: #c9dcff;
    }

    .custom-text {
      color: #333;
    }
  }

  .select-node-box {
    .custom-head {
      background: #ffe0e3;
    }

    .custom-text {
      color: #333;
    }
  }

  .condition-node-box {
    .custom-head {
      background: #d8edf4;
    }

    .custom-text {
      color: #333;
    }
  }

  .for-node-box {
    .custom-head {
      background: #d7d4f4;
    }

    .custom-text {
      color: #333;
    }
  }

  .while-node-box {
    .custom-head {
      background: #b7e8ec;
    }

    .custom-text {
      color: #333;
    }
  }

  .devOps-node-box {
    .custom-head {
      background: #e4f2d3;
    }

    .custom-text {
      color: #333;
    }
  }

  .fuzhi-box {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .shanchu-box {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
</style>
