<template>
	<el-scrollbar class="w-full box-border p-12px">
		<div class="module-invoke-setter">
			<InputVariables v-model="formData.variables" />
			<section class="section-block">
				<div class="section-title">{{ texts.interfaceCode }}</div>
				<VarInput
					v-model="formData.interface_code"
					class="w-full"
					placeholder="请输入接口定义代码，支持输入/选择变量"
				/>
			</section>
			<NodeRuntimeConfig v-model="formData" />
		</div>
	</el-scrollbar>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import NodeRuntimeConfig from '@/nodes/_base/NodeRuntimeConfig.vue'
import { useI18n } from '@/composables/useI18n'
import { useSetterModel } from '../_shared/useSetterModel'

import type { ModuleInvokeData } from './index'
import VarInput from '@/nodes/_base/VarInput.vue'
import InputVariables from '@/nodes/_base/InputVariables.vue'

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

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

const emit = defineEmits<Emits>()
const { t } = useI18n()
const formData = useSetterModel<ModuleInvokeData>(props, emit)

const texts = computed(() => ({
	interfaceCode: t('pages.moduleInvokeSetter.interfaceCode')
}))
</script>

<style scoped lang="less">
.module-invoke-setter {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.section-block {
	padding-bottom: 16px;
}

.section-title {
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 700;
	color: #374151;
}
</style>
