<template>
  <div class="plan-detail">
    <div v-if="loading" class="loading">
      <el-skeleton animated />
    </div>
    <div v-else-if="error" class="error">
      <el-alert
        :title="'加载计划内容失败 (ID: ' + planId + ')'"
        :description="error"
        type="error"
        show-icon
        @close="error = null"
      />
      <el-button type="primary" @click="fetchPlan" class="retry-btn">重新加载</el-button>
    </div>
    <div v-else-if="plan">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>{{ plan.name }} - 内容</span>
            <div>
              <el-button class="button" @click="toggleEditMode">{{ isEditingContent ? '完成编辑' : '编辑内容' }}</el-button>
              <el-button
                v-if="isEditingContent && plan.content_type === 'sub_plans'"
                type="primary"
                size="small"
                @click="showAddSubPlanDialog"
              >增加子计划</el-button>
              <el-button
                v-if="isEditingContent && plan.content_type === 'tasks'"
                type="primary"
                size="small"
                @click="showAddTaskDialog"
              >增加子任务</el-button>
            </div>
          </div>
        </template>
        <div v-if="plan.content_type === 'tasks'">
          <h4>任务列表</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(task, index) in sortedContent"
              :key="task.id || 'new-task-' + index"
              :timestamp="'执行顺序: ' + (task.order !== undefined ? task.order : index + 1)"
              placement="top"
            >
              <el-card>
                <h5>{{ task.name }}</h5>
                <p>{{ task.description }}</p>
                <el-button-group v-if="isEditingContent">
                  <el-button type="primary" size="small" @click="editTask(task)">编辑</el-button>
                  <el-button type="danger" size="small" @click="deleteTask(task)">删除</el-button>
                </el-button-group>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-empty v-if="!sortedContent.length && !isEditingContent" description="暂无任务"></el-empty>
        </div>
        <div v-else-if="plan.content_type === 'sub_plans'">
          <h4>子计划列表</h4>
          <div v-for="(subPlan, index) in sortedContent" :key="subPlan.id || 'new-subplan-' + index" class="sub-plan-container">
            <el-card>
              <div class="card-header">
                <plan-detail :plan-id="subPlan.id" />
                <el-button-group v-if="isEditingContent">
                  <el-button type="danger" size="small" @click="deleteSubPlan(subPlan)">删除</el-button>
                </el-button-group>
              </div>
            </el-card>
          </div>
          <el-empty v-if="!sortedContent.length && !isEditingContent" description="暂无子计划"></el-empty>
        </div>
        <div v-else>
          <el-empty description="未知的计划内容类型"></el-empty>
        </div>
      </el-card>
    </div>
    <div v-else>
      <el-empty description="没有计划数据"></el-empty>
    </div>

    <!-- 增加子计划对话框 -->
    <el-dialog
      v-model="addSubPlanDialogVisible"
      title="选择子计划"
      width="600px"
      @close="resetAddSubPlanDialog"
    >
      <el-select
        v-model="selectedSubPlanId"
        placeholder="请选择一个计划作为子计划"
        filterable
        style="width: 100%;"
      >
        <el-option
          v-for="item in availablePlans"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addSubPlanDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmAddSubPlan">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 增加子任务对话框 -->
    <el-dialog
      v-model="addTaskDialogVisible"
      title="增加子任务"
      width="600px"
      @close="resetAddTaskDialog"
    >
      <el-form :model="newTaskForm" ref="newTaskFormRef" :rules="newTaskRules" label-width="100px">
        <el-form-item label="任务类型" prop="type">
          <el-select v-model="newTaskForm.type" placeholder="请选择任务类型" style="width: 100%;">
            <el-option label="普通任务" value="normal_task"></el-option>
            <el-option label="延时任务" value="delay_task"></el-option>
            <!-- 更多任务类型可以在这里添加 -->
          </el-select>
        </el-form-item>
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="newTaskForm.name" placeholder="请输入任务名称"></el-input>
        </el-form-item>
        <el-form-item label="任务描述" prop="description">
          <el-input type="textarea" v-model="newTaskForm.description" placeholder="请输入任务描述"></el-input>
        </el-form-item>
        <!-- 延时任务特有字段 -->
        <el-form-item
          v-if="newTaskForm.type === 'delay_task'"
          label="延时时间(秒)"
          prop="delay_seconds"
        >
          <el-input-number
            v-model="newTaskForm.delay_seconds"
            :min="1"
            :max="3600"
            placeholder="请输入延时时间"
            style="width: 100%;"
          ></el-input-number>
        </el-form-item>
        <!-- 更多任务类型的特定表单项可以在这里动态渲染 -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addTaskDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmAddTask">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import apiClient from '../api/index.js';
import { ElMessage, ElMessageBox } from 'element-plus'; // 导入ElMessage和ElMessageBox

export default {
  name: 'PlanDetail', // 必须设置name属性以供递归调用
  props: {
    planId: {
      type: [Number, String],
      required: true,
    },
  },
  data() {
    return {
      plan: null,
      loading: false,
      error: null,
      isEditingContent: false, // 新增：是否处于编辑内容模式
      addSubPlanDialogVisible: false, // 控制增加子计划对话框
      selectedSubPlanId: null, // 选中的子计划ID
      availablePlans: [], // 可供选择的计划列表

      addTaskDialogVisible: false, // 控制增加子任务对话框
      newTaskForm: { // 新任务表单数据
        type: 'normal_task', // 默认任务类型
        name: '',
        description: '',
        delay_seconds: 1, // 延时任务特有字段
      },
      newTaskRules: { // 新任务表单验证规则
        type: [{ required: true, message: '请选择任务类型', trigger: 'change' }],
        name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
        delay_seconds: [{ required: true, message: '请输入延时时间', trigger: 'blur' }],
      },
    };
  },
  computed: {
    sortedContent() {
      if (this.plan && Array.isArray(this.plan.content)) {
        // 假设 `content` 是一个包含 `order` 属性的对象的数组
        return [...this.plan.content].sort((a, b) => (a.order || 0) - (b.order || 0));
      }
      return [];
    }
  },
  watch: {
    planId: {
      immediate: true,
      handler(newId) {
        if (newId) {
          this.fetchPlan();
        }
      },
    },
  },
  methods: {
    async fetchPlan() {
      this.loading = true;
      this.error = null;
      try {
        const response = await apiClient.plans.get(this.planId);
        this.plan = response.data;
        // 确保content是一个数组，如果后端返回null或undefined
        if (!this.plan.content) {
          this.plan.content = [];
        }
      } catch (err) {
        this.error = err.message || '未知错误';
        console.error(`加载计划 (ID: ${this.planId}) 失败:`, err);
      } finally {
        this.loading = false;
      }
    },
    toggleEditMode() {
      this.isEditingContent = !this.isEditingContent;
      if (!this.isEditingContent) {
        // 如果退出编辑模式，保存更改
        this.savePlanContent();
      }
    },
    async savePlanContent() {
      try {
        // 假设有一个API来更新计划的内容
        await apiClient.plans.updateContent(this.planId, this.plan.content);
        ElMessage.success('计划内容已保存');
      } catch (error) {
        ElMessage.error('保存计划内容失败: ' + (error.message || '未知错误'));
        console.error('保存计划内容失败:', error);
      }
    },
    async showAddSubPlanDialog() {
      this.addSubPlanDialogVisible = true;
      await this.fetchAvailablePlans();
    },
    async fetchAvailablePlans() {
      try {
        const response = await apiClient.plans.list();
        // 过滤掉当前计划和已有的子计划，以及防止循环引用
        this.availablePlans = response.data.plans.filter(p =>
          p.id !== this.planId &&
          !this.plan.content.some(sub => sub.id === p.id)
        );
      } catch (error) {
        ElMessage.error('加载可用计划失败: ' + (error.message || '未知错误'));
        console.error('加载可用计划失败:', error);
      }
    },
    confirmAddSubPlan() {
      if (!this.selectedSubPlanId) {
        ElMessage.warning('请选择一个子计划');
        return;
      }

      const selectedPlan = this.availablePlans.find(p => p.id === this.selectedSubPlanId);
      if (selectedPlan) {
        // 确保content_type是sub_plans
        if (this.plan.content_type !== 'sub_plans') {
          this.plan.content_type = 'sub_plans';
          this.plan.content = []; // 清空原有内容
        }
        this.plan.content.push({
          id: selectedPlan.id,
          name: selectedPlan.name,
          order: this.plan.content.length + 1, // 简单的排序
          // 可以根据需要添加其他字段
        });
        ElMessage.success(`子计划 "${selectedPlan.name}" 已添加`);
        this.addSubPlanDialogVisible = false;
        this.resetAddSubPlanDialog();
      } else {
        ElMessage.error('未找到选中的计划');
      }
    },
    resetAddSubPlanDialog() {
      this.selectedSubPlanId = null;
      this.availablePlans = [];
    },
    deleteSubPlan(subPlanToDelete) {
      ElMessageBox.confirm(`确认删除子计划 "${subPlanToDelete.name}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.plan.content = this.plan.content.filter(sub => sub.id !== subPlanToDelete.id);
        // 重新排序
        this.plan.content.forEach((item, index) => item.order = index + 1);
        ElMessage.success('子计划已删除');
      }).catch(() => {
        // 用户取消
      });
    },

    showAddTaskDialog() {
      this.addTaskDialogVisible = true;
    },
    confirmAddTask() {
      this.$refs.newTaskFormRef.validate(async (valid) => {
        if (valid) {
          // 确保content_type是tasks
          if (this.plan.content_type !== 'tasks') {
            this.plan.content_type = 'tasks';
            this.plan.content = []; // 清空原有内容
          }

          const newTask = {
            id: Date.now(), // 临时ID，实际应由后端生成
            order: this.plan.content.length + 1,
            type: this.newTaskForm.type,
            name: this.newTaskForm.name,
            description: this.newTaskForm.description,
          };

          if (this.newTaskForm.type === 'delay_task') {
            newTask.delay_seconds = this.newTaskForm.delay_seconds;
          }
          // 可以在这里根据任务类型添加更多字段

          this.plan.content.push(newTask);
          ElMessage.success(`子任务 "${newTask.name}" 已添加`);
          this.addTaskDialogVisible = false;
          this.resetAddTaskDialog();
        }
      });
    },
    resetAddTaskDialog() {
      this.$refs.newTaskFormRef.resetFields();
      this.newTaskForm = {
        type: 'normal_task',
        name: '',
        description: '',
        delay_seconds: 1,
      };
    },
    editTask(task) {
      // TODO: 实现编辑任务的逻辑，可能需要一个单独的对话框
      ElMessage.info('编辑任务功能正在开发中');
      console.log('编辑任务:', task);
    },
    deleteTask(taskToDelete) {
      ElMessageBox.confirm(`确认删除任务 "${taskToDelete.name}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.plan.content = this.plan.content.filter(task => task.id !== taskToDelete.id);
        // 重新排序
        this.plan.content.forEach((item, index) => item.order = index + 1);
        ElMessage.success('任务已删除');
      }).catch(() => {
        // 用户取消
      });
    },
  },
};
</script>

<style scoped>
.plan-detail {
  margin-top: 10px;
}
.loading, .error {
  padding: 20px;
  text-align: center;
}
.retry-btn {
  margin-top: 15px;
}
.sub-plan-container {
  margin-left: 20px;
  margin-top: 10px;
  border-left: 2px solid #ebeef5; /* 增加视觉区分 */
  padding-left: 10px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 调整子计划卡片内部的header，避免重复样式 */
.sub-plan-container .card-header {
  padding: 0; /* 移除内部card-header的padding */
}
</style>
