<template>
	<el-scrollbar class="w-full box-border p-12px">
		<div class="workflow-approval-setter">
			<section class="section-block">
				<div class="section-title">{{ texts.basicConfig }}</div>

				<el-form label-position="top">
					<el-form-item :label="texts.usn">
						<VarInput v-model="formData.usn" :placeholder="texts.usnPlaceholder" class="w-full" />
					</el-form-item>

					<el-form-item :label="texts.jobId">
						<VarInput
							v-model="formData.jobId"
							:placeholder="texts.jobIdPlaceholder"
							class="w-full"
						/>
					</el-form-item>

					<el-form-item :label="texts.workflowCode">
						<VarInput
							v-model="formData.workflowCode"
							:placeholder="texts.workflowCodePlaceholder"
							class="w-full"
						/>
					</el-form-item>
				</el-form>
			</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 VarInput from '@/nodes/_base/VarInput.vue'
import { useI18n } from '@/composables/useI18n'
import { useSetterModel } from '../_shared/useSetterModel'
import type { WorkflowApprovalData } from './index'

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

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

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

const texts = computed(() => ({
	basicConfig: t('pages.workflowApprovalSetter.basicConfig'),
	usn: t('pages.workflowApprovalSetter.usn'),
	usnPlaceholder: t('pages.workflowApprovalSetter.usnPlaceholder'),
	jobId: t('pages.workflowApprovalSetter.jobId'),
	jobIdPlaceholder: t('pages.workflowApprovalSetter.jobIdPlaceholder'),
	workflowCode: t('pages.workflowApprovalSetter.workflowCode'),
	workflowCodePlaceholder: t('pages.workflowApprovalSetter.workflowCodePlaceholder')
}))
</script>

<style scoped lang="less">
.workflow-approval-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>
