<template>
  <div class="constraint-manager">
    <div class="constraint-tags" v-if="modelValue && modelValue.length > 0">
      <el-tag
        v-for="(constraint, index) in modelValue"
        :key="index"
        closable
        type="info"
        @close="removeConstraint(index)"
        class="constraint-tag"
        :title="constraint"
      >
        <span class="constraint-text">{{ constraint }}</span>
      </el-tag>
    </div>

    <el-input
      v-model="newConstraint"
      placeholder="输入约束条件后按回车添加"
      @keyup.enter="addConstraint"
      class="constraint-input"
      size="small"
    >
      <template #append>
        <el-button @click="addConstraint" :disabled="!newConstraint.trim()">
          添加
        </el-button>
      </template>
    </el-input>

    <div class="constraint-presets">
      <span class="preset-label">常用约束：</span>
      <el-button
        v-for="preset in PRESET_CONSTRAINTS"
        :key="preset"
        size="small"
        round
        @click="addPreset(preset)"
        :disabled="modelValue?.includes(preset)"
      >
        {{ preset }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PRESET_CONSTRAINTS } from '@/types/script-flow'

const props = defineProps<{
  modelValue?: string[]
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string[]): void
}>()

const newConstraint = ref('')

const addConstraint = () => {
  const value = newConstraint.value.trim()
  if (!value) return
  
  const currentConstraints = props.modelValue || []
  if (currentConstraints.includes(value)) {
    newConstraint.value = ''
    return
  }
  
  emit('update:modelValue', [...currentConstraints, value])
  newConstraint.value = ''
}

const removeConstraint = (index: number) => {
  const currentConstraints = props.modelValue || []
  const newConstraints = [...currentConstraints]
  newConstraints.splice(index, 1)
  emit('update:modelValue', newConstraints)
}

const addPreset = (preset: string) => {
  const currentConstraints = props.modelValue || []
  if (currentConstraints.includes(preset)) return
  emit('update:modelValue', [...currentConstraints, preset])
}
</script>

<style scoped>
.constraint-manager {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.constraint-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.constraint-tag {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
}

.constraint-tag :deep(.el-tag__content) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px;
}

.constraint-tag :deep(.el-tag__close) {
  flex-shrink: 0;
  margin-left: 4px;
}

.constraint-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px;
}

.constraint-input {
  max-width: 400px;
}

.constraint-presets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.preset-label {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style>
