<template>
	<div class="bg-white w-full">
		<div class="w-full">
			<!-- Content -->
			<div class="p-4">
				<div class="space-y-6">
					<!-- 输入变量 -->
					<InputVariables v-model="formData.variables" />

					<!-- 代码编辑器 -->
					<div class="mt-4">
						<CodeEditor
							v-model="formData.code"
							v-model:language="formData.code_language"
							theme="vs-light"
						/>
					</div>

					<!-- 输出变量 -->
					<OutputVariables v-model="formData.outputs" />

					<!-- 重试配置 -->
					<TestConfig v-model="formData.retry_config" />

					<!-- 异常处理 -->
					<ErrorHandling
						v-model:default_value="formData.default_value"
						v-model:error_strategy="formData.error_strategy"
						:outputs="formData.outputs"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import InputVariables from '../../_base/InputVariables.vue'
import OutputVariables from '../../_base/OutputVariables.vue'
import TestConfig from '../../_base/RetryConfig.vue'
import ErrorHandling from '../../_base/ErrorHandling.vue'
import { useSetterModel } from '../_shared/useSetterModel'
import { agent } from '@repo/api-service'

import type { CodeData } from './index'

interface Emits {
	(e: 'update', value: CodeData): void
}

const props = defineProps<{
	data: CodeData
}>()

const emit = defineEmits<Emits>()

const formData = useSetterModel<CodeData>(props, emit)

agent.postAgentGetAgentMonacoEditorCompletions({})
</script>
