<script setup lang="ts">
import { ref } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { useAgentsStore } from '@/stores'
import api from '@/api'
import { changeBriefs } from '@/utils/collaboration_Brief_FrontEnd.ts'

const emit = defineEmits<{
  (e: 'search', value: string): void
}>()

const agentsStore = useAgentsStore()

const searchValue = ref('')

async function handleSearch() {
  try {
    agentsStore.setAgentRawPlan({ loading: true })
    const data = await api.generateBasePlan({
      goal: searchValue.value,
      inputs: [],
    })
    data['Collaboration Process'] = changeBriefs(data['Collaboration Process'])
    agentsStore.setAgentRawPlan({ data })
    emit('search', searchValue.value)
  } finally {
    agentsStore.setAgentRawPlan({ loading: false })
  }
}
</script>

<template>
  <el-tooltip
    content="请先点击智能体库右侧的按钮上传智能体信息"
    placement="top"
    effect="light"
    :disabled="agentsStore.agents.length > 0"
  >
    <div class="w-full flex justify-center mb-[27px]">
      <el-input
        v-model.trim="searchValue"
        class="task-input"
        size="large"
        placeholder="请输入您的任务"
        @change="agentsStore.setSearchValue"
        :disabled="!(agentsStore.agents.length > 0)"
      >
        <template #prefix>
          <span class="text-[var(--color-text)] font-bold">任务</span>
        </template>
        <template #suffix>
          <el-button
            class="task-button"
            color="linear-gradient(to right, #00C7D2, #315AB4)"
            size="large"
            title="点击搜索任务"
            circle
            :loading="agentsStore.agentRawPlan.loading"
            @click="handleSearch"
          >
            <SvgIcon
              v-if="!agentsStore.agentRawPlan.loading"
              icon-class="paper-plane"
              size="18px"
              color="var(--color-text)"
            />
          </el-button>
        </template>
      </el-input>
    </div>
  </el-tooltip>
</template>

<style scoped lang="scss">
.task-input {
  width: 40%;
  height: 60px;
  margin: 0 auto;

  :deep(.el-input__wrapper) {
    border-radius: 40px;
    box-shadow: none;
    border: 2px solid transparent;
    $bg: var(--el-input-bg-color, var(--el-fill-color-blank));
    background:
      linear-gradient(var(--color-bg-tertiary), var(--color-bg-tertiary)) padding-box,
      linear-gradient(to right, #00c8d2, #315ab4) border-box;
    font-size: 18px;

    .el-icon.is-loading {
      & + span {
        display: none;
      }
    }
  }

  .task-button {
    background: linear-gradient(to right, #00c7d2, #315ab4);
    border: none; // 如果需要移除边框
  }
}
</style>
