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

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

import { ElForm, ElFormItem, ElInput } from 'element-plus';

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

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

const form = ref({
  label: $t('ai-platform.workflow.panels.template.label'),
  template: '',
  output_variable: 'template_result',
  ...props.data,
});

watch(
  form,
  (val) => {
    emit('update', val);
  },
  { deep: true },
);
</script>

<template>
  <ElForm label-position="top" size="small" class="space-y-4">
    <ElFormItem :label="$t('ai-platform.workflow.panels.common.nodeName')">
      <ElInput
        v-model="form.label"
        :placeholder="$t('ai-platform.workflow.panels.template.placeholder')"
      />
    </ElFormItem>

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.template.templateContent')"
    >
      <SmartInput
        v-model="form.template"
        :current-node-id="nodeId"
        type="textarea"
        :rows="8"
        placeholder="Hello {{ name }}!"
      />
      <div class="text-muted-foreground mt-1 text-xs">
        <span>{{ $t('ai-platform.workflow.panels.common.varRef') }}</span>
        <span v-text="'{{user_input}}、{{llm_response}}'"></span>
      </div>
    </ElFormItem>
  </ElForm>
</template>
