<template>
	<div
		class="rounded-4px border border-0.5px border-solid border-gray-200 overflow-hidden"
		v-bind="$attrs"
	>
		<!-- 条件行 -->
		<div class="flex items-center">
			<!-- 左侧变量选择 -->
			<VarSelect
				v-model="modelValue.left_value"
				class="flex-1"
				:placeholder="t('common.nodeBase.condition.setVariableValue')"
				@change="handleLeftValueChange"
			/>
			<el-divider direction="vertical" />
			<!-- 运算符选择 -->
			<el-select
				v-model="modelValue.comparison_operator"
				:options="operators"
				style="width: 80px"
			></el-select>
		</div>
		<el-divider v-if="!modelValue.comparison_operator?.includes('empty')" class="my-0!" />
		<div v-if="!modelValue.comparison_operator?.includes('empty')">
			<div v-if="modelValue.varType !== 'number'" class="flex items-center gap-8px">
				<VarInput
					v-model="modelValue.right_value"
					variant="borderless"
					:placeholder="t('common.nodeBase.condition.inputValueWithVariable')"
					class="flex-1"
				/>
			</div>
			<div v-else class="flex items-center gap-8px">
				<el-select v-model="numberType" :options="numberValOptions" style="width: 80px"></el-select>
				<el-divider direction="vertical" />
				<Input
					v-model="modelValue.right_value"
					type="number"
					variant="borderless"
					:placeholder="t('common.nodeBase.condition.inputValue')"
					class="flex-1"
				/>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import VarInput from '../VarInput.vue'
import VarSelect from '../VarSelect.vue'
import { VARIABLE_TYPE_OPERATORS } from '@/constant'
import { Input } from '@repo/ui'
import { useI18n } from '@/composables/useI18n'

import type { ConditionType } from '../../Interface'
import type { VarType } from '@/types/var'

const modelValue = defineModel<ConditionType>('modelValue', { required: true })
const { t } = useI18n()

const numberType = ref<string>('constant')

const numberValOptions = computed(() => [
	{ label: t('common.nodeBase.condition.constant'), value: 'constant' },
	{ label: t('common.nodeBase.condition.variable'), value: 'variable' }
])

const operators = computed(() => {
	const type = modelValue.value.varType ?? 'string'
	return (
		VARIABLE_TYPE_OPERATORS?.[type as keyof typeof VARIABLE_TYPE_OPERATORS]?.map((item) => ({
			...item,
			label: getOperatorLabel(item.value, item.label)
		})) ?? []
	)
})

const handleLeftValueChange = (value: { value: string; type: VarType }) => {
	modelValue.value.varType = value.type
}

const getOperatorLabel = (value: string, fallback: string) => {
	const labelMap: Record<string, string> = {
		contains: t('common.nodeBase.condition.operators.contains'),
		not_contains: t('common.nodeBase.condition.operators.notContains'),
		start_with: t('common.nodeBase.condition.operators.startsWith'),
		end_with: t('common.nodeBase.condition.operators.endsWith'),
		is: t('common.nodeBase.condition.operators.is'),
		is_not: t('common.nodeBase.condition.operators.isNot'),
		empty: t('common.nodeBase.condition.operators.empty'),
		not_empty: t('common.nodeBase.condition.operators.notEmpty')
	}

	return labelMap[value] || fallback
}
</script>

<style lang="less" scoped>
:deep(.el-input-tag__wrapper) {
	box-shadow: none;
	&:hover,
	&.is-focus {
		box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
	}
}
:deep(.el-input__wrapper) {
	box-shadow: none;
	&:hover,
	&.is-focus {
		box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
	}
}
:deep(.el-select__wrapper) {
	box-shadow: none;
	&:hover,
	&.is-focus {
		box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
	}
}
</style>
