<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">配置名称</div>
				<VarInput v-model="formData.config_name" class="w-full" placeholder="请输入配置名称" />
			</section>

			<section class="section-block">
				<div class="section-title">签名</div>
				<VarInput
					v-model="formData.sign_name"
					class="w-full"
					placeholder="请输入签名；键入/选择变量"
				/>
			</section>

			<section class="section-block">
				<div class="section-title">模板编号</div>
				<VarInput
					v-model="formData.template_code"
					class="w-full"
					placeholder="请输入模板编号；键入/选择变量"
				/>
			</section>

			<section class="section-block">
				<div class="section-title">发送者</div>
				<VarInput
					v-model="formData.senders"
					class="w-full"
					:rows="3"
					placeholder="请输入发送者，多个以,分割；键入/选择变量"
				/>
			</section>
			<NodeRuntimeConfig v-model="formData" />
		</div>
	</el-scrollbar>
</template>

<script setup lang="ts">
import NodeRuntimeConfig from '@/nodes/_base/NodeRuntimeConfig.vue'
import { useSetterModel } from '../_shared/useSetterModel'

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

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

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

const emit = defineEmits<Emits>()
const formData = useSetterModel<SMSSenderData>(props, emit)
</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>
