<script setup lang="ts">
import AgentRepo from './AgentRepo/index.vue'
import TaskSyllabus from './TaskSyllabus/index.vue'
import TaskResult from './TaskResult/index.vue'
import { Jsplumb } from './utils.ts'
import { type IRawStepTask, useAgentsStore } from '@/stores'
import { BezierConnector } from '@jsplumb/browser-ui'
import { ref } from 'vue'

// 定义组件 props
const props = defineProps<{
  TaskID?: string // 任务唯一标识，用于写入数据库
}>()

const agentsStore = useAgentsStore()

// 智能体库
const agentRepoJsplumb = new Jsplumb('task-template', {
  connector: {
    type: BezierConnector.type,
    options: {
      curviness: 30, // 曲线弯曲程度
      stub: 20, // 添加连接点与端点的距离
      alwaysRespectStubs: true
    }
  }
})

// 任务流程
const taskSyllabusRef = ref<{
  changeTask: (task?: IRawStepTask, isEmit?: boolean) => void
  clear: () => void
}>()
// 执行结果
const taskResultRef = ref<{
  createInternalLine: () => void
  clear: () => void
}>()
const taskResultJsplumb = new Jsplumb('task-template')

function scrollToElementTop(elementId: string) {
  const element = document.getElementById(elementId)
  if (element) {
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  }
}

function handleTaskSyllabusCurrentTask(task: IRawStepTask) {
  scrollToElementTop(`task-results-${task.Id}-0`)
  agentsStore.setCurrentTask(task)
}

// 更新任务大纲内部的线
function handleTaskResultCurrentTask(task: IRawStepTask) {
  scrollToElementTop(`task-syllabus-flow-${task.Id}`)
  agentsStore.setCurrentTask(task)
  taskSyllabusRef.value?.changeTask(task, false)
}

function changeTask() {
  taskResultRef.value?.createInternalLine()
  taskSyllabusRef.value?.changeTask()
}

function resetAgentRepoLine() {
  agentRepoJsplumb.repaintEverything()
  taskResultJsplumb.repaintEverything()
}

function clear() {
  taskSyllabusRef.value?.clear()
  taskResultRef.value?.clear()
  agentRepoJsplumb.repaintEverything()
  taskResultJsplumb.repaintEverything()
}

defineExpose({
  changeTask,
  resetAgentRepoLine,
  clear
})
</script>

<template>
  <!-- 删除overflow-hidden -->
  <div
    class="task-template flex gap-6 items-center h-[calc(100%-84px)] relative"
    id="task-template"
  >
    <!-- 智能体库 -->
    <div class="w-[9.5%] min-w-[179px] h-full relative flex-shrink-0">
      <AgentRepo @resetAgentRepoLine="agentRepoJsplumb.repaintEverything" />
    </div>
    <!-- 任务大纲 -->
    <div class="w-[35.5%] min-w-[600px] h-full px-[20px] flex-shrink-0">
      <TaskSyllabus
        ref="taskSyllabusRef"
        @resetAgentRepoLine="resetAgentRepoLine"
        @set-current-task="handleTaskSyllabusCurrentTask"
      />
    </div>
    <!--  执行结果 -->
    <div class="flex-1 h-full">
      <TaskResult
        ref="taskResultRef"
        :TaskID="props.TaskID"
        @refresh-line="taskResultJsplumb.repaintEverything"
        @set-current-task="handleTaskResultCurrentTask"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.task-template {
  & > div {
    box-shadow: var(--color-card-shadow-three);
    border-radius: 24px;
    border: 1px solid var(--color-card-border-three);
    background: var(--color-bg-three);
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
</style>
