<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import type { IRawStepTask } from '@/stores'
import SvgIcon from '@/components/SvgIcon/index.vue'

const props = defineProps<{
  task: IRawStepTask
}>()

const emit = defineEmits<{
  (e: 'save', taskId: string, content: string): void
}>()

const isEditing = ref(false)
const editingContent = ref('')
const editorRef = ref<HTMLElement>()

const startEditing = () => {
  editingContent.value = props.task.TaskContent || ''
  isEditing.value = true
}

const save = () => {
  const trimmed = editingContent.value.trim()
  emit('save', props.task.Id!, trimmed)
  isEditing.value = false
}

const cancel = () => {
  isEditing.value = false
}

const handleKeydown = (event: KeyboardEvent) => {
  if (event.key === 'Enter') {
    event.preventDefault()
    save()
  } else if (event.key === 'Escape') {
    cancel()
  }
}

// 点击外部保存
const handleClickOutside = (event: MouseEvent) => {
  if (isEditing.value && editorRef.value && !editorRef.value.contains(event.target as Node)) {
    save()
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<template>
  <div ref="editorRef" v-if="isEditing" class="w-full">
    <el-input
      v-model="editingContent"
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 4 }"
      placeholder="请输入任务内容"
      @keydown="handleKeydown"
      class="task-content-editor"
      size="small"
    />
  </div>
  <div v-else @dblclick="startEditing" class="w-full cursor-pointer task-content-wrapper">
    <slot name="display">
      <div class="text-[14px] text-[var(--color-text-secondary)] task-content-display">
        {{ task.TaskContent }}
      </div>
    </slot>
    <div class="edit-icon-bg" @click.stop="startEditing">
      <svg-icon icon-class="Edit" class="edit-icon-svg" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.task-content-wrapper {
  position: relative;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 7px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;

  &:hover {
    border-color: var(--color-task-edit-hover-border) !important;
  }

  .edit-icon-bg {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 26px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    background: var(--color-edit-icon-bg);
    border-radius: 8px 0px 7px 0px;

    .edit-icon-svg {
      color: var(--color-text-detail);
    }
  }

  &:hover .edit-icon-bg {
    opacity: 1;
  }
}

.task-content-editor {
  :deep(.el-textarea__inner) {
    font-size: 14px;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-task-edit-hover-border) !important;
    border-radius: 4px;
    box-sizing: border-box;
    resize: none;
  }
}

.task-content-display {
  min-height: 40px;
  word-break: break-word;
  white-space: pre-wrap;
}
</style>
