<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import request from '@/utils/request';
import router from "@/router";
import {ElMessage} from "element-plus";

const tasks = reactive([] as any[]);

const selectedTask = ref<any>(null);

const fetchTasks = () => {
  request.get('/tasks', { pageSize: 100, pageNum: 1 })
      .then((res) => {
        /* 此处暂时不开发分页模式，数据量应该不会很大，但仍然保留了分页形式的接口 */
        tasks.splice(0, tasks.length, ...res.data.records.map((record: any) => ({
          title: record.taskName,
          description: record.taskDescription || '',
          lastLearningStatus: record.lastLearningStatus || '未开始',
          priority: Math.round(record.taskPriority),
          taskNum: record.taskNum,
          taskId: record.id,
        })));
        selectedTask.value = tasks[0] || null;
      });
};

const startTask = () => {
  router.push({name:'start-task',params:{taskNum:selectedTask.value.taskNum}});
  console.log('任务已开始：', selectedTask.value);
};

const addTask = () => {
  router.push({name:"add-task"});
};

const changeTask = () =>{
  router.push({name:"update-task",params:{"taskId":selectedTask.value.taskId}})
};

const removeTask = () => {
  request.del(`/tasks/${selectedTask.value.taskId}`,{}).then(res=>{
    if (res.code == '200'){
      ElMessage.success(`任务${selectedTask.value.title}删除成功`)
    }
  });

  const index = tasks.indexOf(selectedTask.value);
  if (index > -1) {
    tasks.splice(index, 1);
    selectedTask.value = tasks[0] || null;
  }
};

const selectTask = (task: any) => {
  selectedTask.value = task;
};

onMounted(() => {
  fetchTasks();
});
</script>

<template>
  <el-row :gutter="5" class="task-layout">
    <el-col :span="6">
      <el-card class="task-card" :body-style="{ padding: '0' }">
        <div class="task-header">任务列表</div>
        <el-scrollbar height="300px">
          <el-menu class="task-menu" @select="(key:any) => selectTask(tasks[key])">
            <el-menu-item
                v-for="(task, index) in tasks"
                :key="index"
                :index="index.toString()"
                class="task-item"
            >
              {{ task.title }}
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </el-card>
    </el-col>

    <el-col :span="13">
      <el-card class="task-card">
        <div v-if="selectedTask">
          <h3>任务描述</h3>
          <el-input type="textarea" v-model="selectedTask.description" :rows="4" />

          <h3 class="section-title">任务优先级</h3>
          <el-radio-group v-model="selectedTask.priority">
            <el-radio-button v-for="i in 6" :label="i - 1" :key="i">{{ i - 1 }}</el-radio-button>
          </el-radio-group>

          <h3 class="section-title">上次该任务学习情况</h3>
          <el-descriptions border column="1">
            <el-descriptions-item label="有效时间比">0.5</el-descriptions-item>
            <el-descriptions-item label="实际用时">2小时</el-descriptions-item>
            <el-descriptions-item label="有效学习时间">1小时</el-descriptions-item>
            <el-descriptions-item label="备注">学习了“动态面板”的基本使用方式</el-descriptions-item>
          </el-descriptions>
        </div>
        <div v-else>
          <p>请选择任务或等待任务加载完成。</p>
        </div>
      </el-card>
    </el-col>
    <el-col :span="5">
      <el-space class="action-buttons">
        <el-button type="primary" @click="startTask">开始任务</el-button>
        <el-button @click="addTask">添加任务</el-button>
        <el-button @click="changeTask">更新任务</el-button>
        <el-button type="danger" @click="removeTask">删除任务</el-button>
        <el-button type="info" @click="fetchTasks"> 刷新 </el-button>
      </el-space>
    </el-col>
  </el-row>
</template>

<style scoped>
.task-layout {
  width: 100%;
  overflow-x: hidden;
}
.task-card {
  padding: 0;
}
.task-header {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}
.task-menu {
  width: 100%;
  padding: 0;
}
.task-item {
  padding: 10px 12px;
  white-space: normal;
  word-break: break-word;
}
.section-title {
  margin-top: 20px;
}
.action-buttons {
  flex-direction: column;
  margin-top: 20px;
}
.action-buttons .el-button {
  width: 8vw;
  min-width: 70px;
  margin-top: 5px;
}
</style>
