<script setup lang="ts">
import { ref, watch } from 'vue';

import { Plus, Trash2 } from '@vben/icons';
import { $t } from '@vben/locales';

import { ElButton, ElInput, ElOption, ElSelect } from 'element-plus';

import SmartInput from '../components/SmartInput.vue';

const props = defineProps<{ data: any; nodeId: string }>();
const emit = defineEmits(['update']);

const form = ref({
  outputs: props.data.outputs || [],
  output: props.data.output || '',
});

watch(
  form,
  (val) => {
    emit('update', { ...props.data, ...val });
  },
  { deep: true },
);

const handleAdd = () => {
  form.value.outputs.push({
    variable: '',
    type: 'string',
  });
};

const handleDelete = (index: number) => {
  form.value.outputs.splice(index, 1);
};
</script>

<template>
  <div class="space-y-4">
    <!-- 输出内容 -->
    <div class="border-border border-b pb-4">
      <div class="text-foreground mb-2 text-sm font-medium">
        {{ $t('ai-platform.workflow.panels.end.outputContent') }}
      </div>
      <SmartInput
        v-model="form.output"
        :current-node-id="nodeId"
        type="textarea"
        :rows="3"
        :placeholder="$t('ai-platform.workflow.panels.end.outputPlaceholder')"
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.end.outputHint') }}
      </div>
    </div>

    <div class="flex items-center justify-between">
      <span class="text-foreground text-sm font-medium">{{
        $t('ai-platform.workflow.panels.common.outputVars')
      }}</span>
      <ElButton link type="primary" :icon="Plus" @click="handleAdd">
        {{ $t('ai-platform.workflow.panels.common.add') }}
      </ElButton>
    </div>

    <div
      v-if="form.outputs.length === 0"
      class="text-muted-foreground py-4 text-center text-xs"
    >
      {{ $t('ai-platform.workflow.panels.end.noOutputVars') }}
    </div>

    <div v-else class="space-y-3">
      <div
        v-for="(item, index) in form.outputs"
        :key="index"
        class="border-border bg-muted rounded border p-3"
      >
        <div class="flex items-center gap-2">
          <ElInput
            v-model="item.variable"
            :placeholder="$t('ai-platform.workflow.panels.common.variableName')"
            size="small"
          />
          <ElSelect
            v-model="item.type"
            :placeholder="$t('ai-platform.workflow.panels.end.type')"
            size="small"
            style="width: 100px"
          >
            <ElOption label="String" value="string" />
            <ElOption label="Number" value="number" />
            <ElOption label="JSON" value="json" />
          </ElSelect>
          <ElButton
            link
            type="danger"
            :icon="Trash2"
            @click="handleDelete(index)"
          />
        </div>
      </div>
    </div>
  </div>
</template>
