<!-- AdditionalOutputCard.vue -->
<script setup lang="ts">
import { computed, ref, nextTick } from 'vue'
import { useAgentsStore } from '@/stores'
import SvgIcon from '@/components/SvgIcon/index.vue'

const agentsStore = useAgentsStore()
const props = defineProps<{
  index: number
}>()

// 获取产物名称
const currentOutput = computed(() => {
  return agentsStore.additionalOutputs[props.index] || ''
})

// 编辑状态
const isEditing = ref(false)
const inputValue = ref('')
const originalValue = ref('')
const inputRef = ref<HTMLElement>()

// 点击编辑图标
const handleEditClick = () => {
  isEditing.value = true
  originalValue.value = inputValue.value

  // 等待 DOM 更新后聚焦输入框
  nextTick(() => {
    if (inputRef.value) {
      const inputEl = inputRef.value.querySelector('input')
      if (inputEl) {
        inputEl.focus()
      }
    }
  })
}

// 保存编辑
const handleSave = () => {
  if (isEditing.value) {
    isEditing.value = false
  }
}

// 取消编辑
const handleCancel = () => {
  if (isEditing.value) {
    inputValue.value = originalValue.value // 恢复原始值
    isEditing.value = false
  }
}

// 处理键盘事件
const handleKeydown = (event: KeyboardEvent) => {
  if (event.key === 'Enter') {
    event.preventDefault()
    handleSave()
  } else if (event.key === 'Escape') {
    event.preventDefault()
    handleCancel()
  }
}

// 输入框失去焦点处理
const handleBlur = () => {
  // 延迟处理，避免点击按钮时立即触发
  setTimeout(() => {
    if (isEditing.value) {
      handleSave()
    }
  }, 200)
}
</script>

<template>
  <!-- 当产物存在时才显示 -->
  <div v-if="currentOutput" class="card-item">
    <el-card
      class="card-item w-full relative output-object-card"
      :shadow="true"
      :id="`additional-output-${index}`"
    >
      <!-- 显示产物名称 -->
      <div class="text-start w-[100%]">
        <div class="text-[18px] font-bold text-[var(--color-text)] mb-2">
          {{ currentOutput }}
        </div>
        <div ref="inputRef">
          <el-input
            v-model="inputValue"
            :readonly="!isEditing"
            :placeholder="isEditing ? '请输入内容...' : '点击编辑图标开始编辑...'"
            @keydown="handleKeydown"
            @blur="handleBlur"
            :class="{ editing: isEditing }"
          >
            <template #suffix>
              <!-- 只读状态：显示编辑图标 -->
              <div v-if="!isEditing" class="flex items-center">
                <svg-icon
                  icon-class="Edit"
                  size="20px"
                  class="cursor-pointer hover:text-[#409eff] transition-colors"
                  @click="handleEditClick"
                  title="点击编辑"
                />
              </div>
            </template>
          </el-input>
        </div>

        <!-- 编辑状态下的提示 -->
        <div v-if="isEditing" class="mt-2 text-end text-xs text-gray-500">
          <svg-icon
            icon-class="Check"
            size="20px"
            color="#328621"
            class="cursor-pointer mr-4"
            @click="handleSave"
            title="保存"
          />
          <svg-icon
            icon-class="Cancel"
            size="20px"
            color="#8e0707"
            class="cursor-pointer mr-4"
            @click="handleCancel"
            title="取消"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.card-item {
  transition: all 0.3s ease;
}

.output-object-card {
  :deep(.el-card__body) {
    min-height: 80px;
    display: flex;
    align-items: start;
    justify-content: start;
  }
}

/* 输入框样式 */
:deep(.el-input .el-input__wrapper) {
  box-shadow: none;
  background-color: var(--color-bg-three);
  transition: all 0.2s ease;
}

/* 编辑状态下的输入框样式 */
:deep(.el-input.editing .el-input__wrapper) {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

:deep(.el-input.editing .el-input__wrapper.is-focus) {
  border-color: #c0c4cc;
  box-shadow: 0 0 0 1px #c0c4cc;
}
</style>
