<script setup lang="ts">
import { LayoutTemplate } from '@vben/icons';
import { $t } from '@vben/locales';

import BaseNode from './BaseNode.vue';

defineProps(['selected', 'data', 'id']);
</script>

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

    <div class="space-y-2">
      <div
        class="flex items-center justify-between rounded bg-purple-50 px-2 py-1 text-purple-700 dark:bg-purple-950 dark:text-purple-300"
      >
        <span class="font-medium">{{
          $t('ai-platform.workflow.nodes.form_ui_design.layoutMode')
        }}</span>
        <span>{{
          data.layout_mode === 'auto'
            ? $t('ai-platform.workflow.nodes.form_ui_design.auto')
            : data.layout_mode === 'single'
              ? $t('ai-platform.workflow.nodes.form_ui_design.singleCol')
              : data.layout_mode === 'double'
                ? $t('ai-platform.workflow.nodes.form_ui_design.doubleCol')
                : data.layout_mode === 'triple'
                  ? $t('ai-platform.workflow.nodes.form_ui_design.tripleCol')
                  : $t('ai-platform.workflow.nodes.form_ui_design.auto')
        }}</span>
      </div>

      <div class="text-muted-foreground space-y-1 text-xs">
        <div class="flex justify-between">
          <span>{{
            $t('ai-platform.workflow.nodes.form_ui_design.formName')
          }}</span>
          <span>{{
            data.form_name ||
            $t('ai-platform.workflow.nodes.form_ui_design.auto')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span>{{
            $t('ai-platform.workflow.nodes.form_ui_design.enableGrouping')
          }}</span>
          <span>{{
            data.enable_grouping !== false
              ? $t('ai-platform.workflow.nodes.common.yes')
              : $t('ai-platform.workflow.nodes.common.no')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span>{{
            $t('ai-platform.workflow.nodes.form_ui_design.hideSystemFields')
          }}</span>
          <span>{{
            data.hide_system_fields !== false
              ? $t('ai-platform.workflow.nodes.common.yes')
              : $t('ai-platform.workflow.nodes.common.no')
          }}</span>
        </div>
      </div>

      <!-- 输出变量 -->
      <div class="rounded bg-green-50 px-2 py-1 text-xs dark:bg-green-950">
        <div
          class="flex items-center justify-between text-green-700 dark:text-green-300"
        >
          <span>{{ $t('ai-platform.workflow.nodes.common.output') }}</span>
          <span class="font-mono">form_ui_design</span>
        </div>
      </div>
    </div>
  </BaseNode>
</template>
