<script setup lang="ts">
import { computed } from 'vue';

import { GitFork } from '@vben/icons';
import { $t } from '@vben/locales';

import { Handle, Position } from '@vue-flow/core';

import BaseNode from './BaseNode.vue';

const props = defineProps(['selected', 'data', 'id']);

// 获取分支配置
const branches = computed(() => {
  return (
    props.data.branches || [
      {
        id: 'branch_1',
        name: $t('ai-platform.workflow.nodes.parallel.branch', { index: 1 }),
      },
      {
        id: 'branch_2',
        name: $t('ai-platform.workflow.nodes.parallel.branch', { index: 2 }),
      },
    ]
  );
});
</script>

<template>
  <BaseNode
    :selected="selected"
    :execution-status="data.executionStatus"
    :execution-result="data.executionResult"
    :label="data.label || $t('ai-platform.workflow.nodes.parallel.label')"
    :inputs="[{ id: 'target' }]"
    :node-id="id"
    node-type="parallel"
  >
    <template #icon><GitFork class="size-5" /></template>
    <template #desc>
      {{ $t('ai-platform.workflow.nodes.parallel.desc') }}
    </template>

    <div class="space-y-2 pt-1">
      <!-- 并行分支 -->
      <div
        v-for="(branch, index) in branches"
        :key="branch.id"
        class="relative flex h-8 items-center justify-between rounded border border-purple-100 bg-purple-50 px-3 text-xs text-purple-700"
      >
        <span class="font-medium">{{
          $t('ai-platform.workflow.nodes.parallel.branch', { index: index + 1 })
        }}</span>
        <span class="text-muted-foreground max-w-[80px] truncate">{{
          branch.name || `branch_${index + 1}`
        }}</span>

        <!-- Handle -->
        <Handle
          type="source"
          :position="Position.Right"
          :id="branch.id"
          class="!h-3 !w-3 !border-2 !border-white !bg-purple-500 transition-transform hover:scale-125"
          style="right: -17px; top: 50%; transform: translateY(-50%)"
        />
      </div>
    </div>
  </BaseNode>
</template>
