<!-- 研究任务定义表单：模式选择、主题/问题/目标输入、模板化预设 -->
<template>
  <a-card class="task-card" :bordered="false">
    <template #title>
      <div class="card-title-row">
        <span>研究任务定义</span>
        <a-space>
          <a-button
            type="primary"
            :loading="isPlanning"
            :disabled="isRunning"
            @click="emit('generate-plan')"
          >
            <ProfileOutlined />
            生成研究计划
          </a-button>
          <a-button
            type="primary"
            ghost
            :loading="isRunning"
            :disabled="!canRun"
            @click="emit('run-research')"
          >
            <PlayCircleOutlined />
            开始研究
          </a-button>
        </a-space>
      </div>
    </template>

    <a-form layout="vertical">
      <a-row :gutter="16">
        <a-col :xs="24" :md="12" :xl="8">
          <a-form-item label="研究模式">
            <a-radio-group v-model:value="task.mode" button-style="solid">
              <a-radio-button value="quick">快速研究</a-radio-button>
              <a-radio-button value="deep">深度研究</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :md="12" :xl="8">
          <a-form-item label="输出模板">
            <a-select v-model:value="task.outputTemplate" :options="templateOptions" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :md="12" :xl="8">
          <a-form-item label="研究深度">
            <a-select v-model:value="task.depthLevel" :options="depthOptions" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :xs="24" :xl="10">
          <a-form-item label="研究主题">
            <a-input v-model:value="task.topic" placeholder="例如：机构改革政策执行要求" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="14">
          <a-form-item label="核心研究问题">
            <a-textarea
              v-model:value="task.question"
              :auto-size="{ minRows: 2, maxRows: 4 }"
              placeholder="例如：梳理 2024 年以来机构改革相关政策链条、执行要求与风险点"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="研究目标">
        <a-textarea
          v-model:value="task.goal"
          :auto-size="{ minRows: 2, maxRows: 4 }"
          placeholder="说明这次研究要产出什么、服务谁、重点回答哪些决策问题"
        />
      </a-form-item>

      <a-row :gutter="16">
        <a-col :xs="24" :md="8">
          <a-form-item label="时间范围">
            <a-input v-model:value="task.timeRange" placeholder="例如：2024 年以来" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :md="8">
          <a-form-item label="地域范围">
            <a-input v-model:value="task.regionScope" placeholder="例如：清远市 / 广东省" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :md="8">
          <a-form-item label="部门范围">
            <a-input v-model:value="task.orgScope" placeholder="例如：发改、政数、审批部门" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <div class="preset-area">
      <div class="preset-area__label">模板化研究模式</div>
      <div class="preset-list">
        <button
          v-for="preset in presetTasks"
          :key="preset.label"
          type="button"
          class="preset-chip"
          @click="emit('apply-preset', preset)"
        >
          <div class="preset-chip__title">{{ preset.label }}</div>
          <div class="preset-chip__desc">{{ preset.description }}</div>
        </button>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { PlayCircleOutlined, ProfileOutlined } from '@ant-design/icons-vue'
import {
  RESEARCH_DEPTH_OPTIONS,
  RESEARCH_TEMPLATE_OPTIONS,
  type ResearchTaskDraft,
} from '@/types/research'
import type { PresetTask } from './types'

defineProps<{
  /** 当前研究任务草稿（双向绑定由父组件通过 store 管理） */
  task: ResearchTaskDraft
  /** 是否正在生成计划 */
  isPlanning: boolean
  /** 是否正在执行研究 */
  isRunning: boolean
  /** 是否可以开始研究（计划存在且新鲜） */
  canRun: boolean
  /** 预设研究任务模板 */
  presetTasks: PresetTask[]
}>()

const emit = defineEmits<{
  (e: 'generate-plan'): void
  (e: 'run-research'): void
  (e: 'apply-preset', preset: PresetTask): void
}>()

const templateOptions = RESEARCH_TEMPLATE_OPTIONS.map((item) => ({
  value: item.value,
  label: `${item.label} \u00B7 ${item.description}`,
}))

const depthOptions = RESEARCH_DEPTH_OPTIONS.map((item) => ({
  value: item.value,
  label: `${item.label} \u00B7 ${item.description}`,
}))
</script>

<style scoped lang="less">
.task-card {
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(14, 30, 62, 0.06);
}

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.preset-area { margin-top: 8px; }

.preset-area__label {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #595959;
}

.preset-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.preset-chip {
  border: 1px solid #dbe7ff;
  border-radius: 16px;
  background: linear-gradient(180deg, #f7fbff 0%, #eef4ff 100%);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
  &:hover {
    transform: translateY(-1px);
    border-color: #1677ff;
  }
}

.preset-chip__title { font-weight: 600; color: #1f1f1f; }

.preset-chip__desc {
  margin-top: 6px;
  font-size: 12px;
  color: #595959;
  line-height: 1.6;
}

@media (max-width: 1200px) {
  .preset-list { grid-template-columns: 1fr; }
}
</style>
