<template>
	<!-- 异常处理 -->
	<div class="space-y-2 flex items-center justify-between">
		<label class="text-14px font-bold text-gray-700">
			{{ t('common.nodeBase.errorHandling.title') }}
			<el-tooltip :content="t('common.nodeBase.errorHandling.tooltip')">
				<Icon icon="lucide:info" :height="14" :width="14" class="text-gray-400" />
			</el-tooltip>
		</label>
		<el-select
			v-model="error_strategy"
			size="default"
			class="!w-[120px] text-sm bg-white !mt-0"
			@change="onChangeStrategy"
		>
			<el-option value="none" :label="t('common.nodeBase.errorHandling.none')"></el-option>
			<el-option
				value="default-value"
				:label="t('common.nodeBase.errorHandling.defaultValue')"
			></el-option>
			<el-option
				value="fail-branch"
				:label="t('common.nodeBase.errorHandling.failBranch')"
			></el-option>
		</el-select>
	</div>
	<div class="!mt-0">
		<div v-if="error_strategy === 'default-value'">
			<p class="text-sm text-gray-600 m-0 mb-1">
				{{ t('common.nodeBase.errorHandling.defaultValueDescription') }}
			</p>
			<!-- 代码编辑器 -->
			<div
				v-for="output in default_value"
				:key="output.name"
				class="mt-2 border border-solid border-gray-200 rounded-lg p-2"
			>
				<div class="flex items-center gap-1 mb-1">
					<span>{{ output.name }}</span>
					<span class="text-gray-400 text-sm">{{ getVariableTypeLabel(output.type) }}</span>
				</div>
				<el-input v-if="output.type === 'string'" v-model="output.value" />
				<el-input v-else-if="output.type === 'number'" type="number" v-model="output.value" />
				<el-switch v-else-if="output.type === 'boolean'" v-model="output.value" />
				<CodeEditor
					v-else
					v-model="output.value"
					language="javascript"
					:tools="false"
					theme="vs-light"
				/>
			</div>
		</div>
		<div v-else-if="error_strategy === 'fail-branch'">
			<p class="text-sm m-0 mb-1 text-gray-600">
				{{ t('common.nodeBase.errorHandling.failBranchDescription') }}
			</p>
			<p class="text-sm text-gray-400 m-0">
				{{ t('common.nodeBase.errorHandling.failBranchHint') }}
			</p>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { watch } from 'vue'
import { Icon } from '@repo/ui'
import { cloneDeep } from 'lodash-es'
import { useI18n } from '@/composables/useI18n'

import type { INodeDataBaseSchema } from '@/nodes/Interface'

const props = defineProps<{
	outputs: INodeDataBaseSchema['outputs']
}>()
const { t } = useI18n()

const error_strategy = defineModel<INodeDataBaseSchema['error_strategy']>('error_strategy')
const default_value = defineModel<INodeDataBaseSchema['default_value']>('default_value')

watch(
	props.outputs,
	(newVal) => {
		if (error_strategy.value === 'default-value') {
			default_value.value = cloneDeep(newVal)
		}
	},
	{
		deep: true
	}
)

const onChangeStrategy = (val: INodeDataBaseSchema['error_strategy']) => {
	if (val === 'default-value') {
		default_value.value = cloneDeep(props.outputs)
	} else {
		default_value.value = []
	}
}

const getVariableTypeLabel = (type?: string) => {
	const labelMap: Record<string, string> = {
		string: t('common.nodeBase.valueTypes.string'),
		number: t('common.nodeBase.valueTypes.number'),
		boolean: t('common.nodeBase.valueTypes.boolean'),
		object: t('common.nodeBase.valueTypes.object'),
		'array[string]': t('common.nodeBase.valueTypes.arrayString'),
		'array[number]': t('common.nodeBase.valueTypes.arrayNumber'),
		'array[boolean]': t('common.nodeBase.valueTypes.arrayBoolean'),
		'array[object]': t('common.nodeBase.valueTypes.arrayObject'),
		'array[file]': t('common.nodeBase.valueTypes.arrayFile')
	}

	return type ? labelMap[type] || type : ''
}
</script>
