<script setup>
import { computed } from 'vue'
import BaseNode from './BaseNode.vue'
import { ExitOutline } from '@vicons/ionicons5'

const props = defineProps({
  data: { type: Object, default: () => ({ label: '输出' }) }
})

const fieldSummary = computed(() => {
  return (props.data?.fields || []).map(f => f.name).filter(Boolean)
})
</script>

<template>
  <BaseNode :data="data" :has-target="true" :source-handles="[]" color="#EF4444">
    <template #icon><ExitOutline /></template>
    <template #body>
      <div v-if="fieldSummary.length" class="io-summary">
        <span class="io-tag io-out" v-for="name in fieldSummary" :key="name">{{ name }}</span>
      </div>
      <div v-else class="output-hint">无接收字段</div>
    </template>
  </BaseNode>
</template>

<script>
export default { name: 'OutputNode' }
</script>

<style scoped>
.io-summary { display: flex; flex-wrap: wrap; gap: 3px; }
.io-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
}
.io-in { background: rgba(99,102,241,0.15); color: #818cf8; }
.io-out { background: rgba(34,197,94,0.15); color: #4ade80; }
.output-hint { font-size: 11px; color: var(--text-tertiary, #888); }
</style>
