<template>
	<div class="space-y-3">
		<!-- 失败时重试 -->
		<div class="space-y-2">
			<div class="flex items-center justify-between beautify">
				<label class="text-14px font-bold text-gray-700">
					{{ t('common.nodeBase.retryConfig.title') }}
				</label>
				<el-switch :model-value="config.retry_enabled" @change="toggleRetry" />
			</div>
			<div class="space-y-2" v-if="config.retry_enabled">
				<div class="pl-[10px] flex item-center justify-between">
					<p class="m-0 text-sm text-gray-600 w-110px">
						{{ t('common.nodeBase.retryConfig.maxRetries') }}
					</p>
					<el-slider
						v-model="config.max_retries"
						class="flex-1"
						show-input
						:min="0"
						:max="10"
						size="default"
					/>
				</div>
				<div class="pl-[10px] flex item-center justify-between">
					<p class="m-0 text-sm text-gray-600 w-110px">
						{{ t('common.nodeBase.retryConfig.retryInterval') }}
					</p>
					<el-slider
						v-model="config.retry_interval"
						class="flex-1"
						:min="100"
						:max="5000"
						show-input
						size="default"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useI18n } from '@/composables/useI18n'
import type { NodeRetryConfig } from '@/nodes/Interface'

interface Props {
	modelValue: NodeRetryConfig
}

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

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const { t } = useI18n()

const config = ref<NodeRetryConfig>(
	props.modelValue || {
		retryEnabled: false,
		maxRetries: 0,
		retryInterval: 100
	}
)

watch(
	() => props.modelValue,
	(newVal) => {
		config.value = newVal || {
			retryEnabled: false
		}
	}
)

const toggleRetry = () => {
	config.value.retry_enabled = !config.value.retry_enabled
	handleConfigChange()
}

const handleConfigChange = () => {
	emit('update:modelValue', config.value)
}
</script>
<style lang="less" scoped>
.beautify {
	padding-bottom: 6px;
	border-bottom: 1px solid #eee;
}
</style>
