<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.subject"
					class="w-full"
					placeholder="请输入主题；键入/选择变量"
				/>
			</section>

			<section class="section-block">
				<div class="section-title">内容</div>
				<VarInput
					v-model="formData.body"
					class="w-full"
					:rows="3"
					placeholder="请输入内容；键入/选择变量"
				/>
			</section>

			<section class="section-block">
				<div class="section-title">收件人</div>
				<VarInput
					v-model="formData.toLists"
					class="w-full"
					placeholder="请输入收件人，多个以,分割；键入/选择变量"
				/>
			</section>

			<section class="section-block">
				<div class="section-title">抄送人</div>
				<VarInput
					v-model="formData.ccLists"
					class="w-full"
					placeholder="请输入抄送人，多个以,分割；键入/选择变量"
				/>
			</section>

			<section class="section-block">
				<div class="section-title">密抄人</div>
				<VarInput
					v-model="formData.bccLists"
					class="w-full"
					placeholder="请输入密抄人，多个以,分割；键入/选择变量"
				/>
			</section>

			<section class="section-block">
				<div class="section-title">附件ID</div>
				<VarInput
					v-model="formData.attachmentLists"
					class="w-full"
					placeholder="请输入附件ID，多个以,分割；键入/选择变量"
				/>
			</section>

			<section class="section-block">
				<div class="section-title">描述</div>
				<VarInput
					v-model="formData.memo"
					class="w-full"
					:rows="3"
					placeholder="请输入描述；键入/选择变量"
				/>
			</section>

			<section class="section-block">
				<div class="w-full flex items-center justify-between">
					<div class="section-title">是否入队列</div>
					<el-switch v-model="formData.in_queue"></el-switch>
				</div>
			</section>

			<section v-if="formData.in_queue" class="section-block flex items-center justify-between">
				<div class="section-title shrink-0">入队列延迟时间(s)</div>
				<el-input-number
					v-model="formData.delaySeconds"
					class="w-180px"
					placeholder="入队列后延时几秒"
				/>
			</section>
			<NodeRuntimeConfig v-model="formData" />
		</div>
	</el-scrollbar>
</template>

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

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

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

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

const emit = defineEmits<Emits>()
const { t } = useI18n()
const formData = useSetterModel<MailSenderData>(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>
