<!--
 * @Date: 2025-11-19 10:18:00
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-12-01 14:30:47
 * @FilePath: /mlaj/src/views/teacher/taskManagePage.vue
 * @Description: 教师端作业管理页面
-->
<template>
    <div class="TaskManagePage">
        <!-- 作业列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <div class="listWrapper mt-4">
                <div v-for="task in task_list" :key="task.id" class="taskItem bg-white rounded-lg shadow px-4 py-3 mb-3">
                    <div class="flex items-center justify-between">
                        <!-- 左侧图标：垂直居中，占用较小空间 -->
                        <div class="iconWrapper flex items-center justify-center w-8 mr-3 text-gray-500">
                            <van-icon name="notes-o" size="1.2rem" />
                        </div>
                        <!-- 中间内容：占据剩余空间 -->
                        <div class="left flex-1">
                            <div class="taskTitle text-sm font-semibold text-gray-800">{{ task.title }}</div>
                            <div class="taskDates text-xs text-gray-600 mt-1">{{ format_date_range(task.begin_date, task.end_date) }}</div>
                        </div>
                        <!-- 右侧按钮：占用较小空间，右对齐 -->
                        <div class="right flex items-center justify-end w-20 ml-3">
                            <van-button type="primary" size="small" round class="w-full" @click="go_task_home(task.id)">查看</van-button>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTitle } from '@vueuse/core'
import { getTeacherTaskListAPI } from '@/api/teacher'

const $route = useRoute()
const $router = useRouter()
useTitle($route.meta.title)

// 分页状态
const loading = ref(false)
const finished = ref(false)
const page = ref(0)
const limit = 10

// 作业列表数据
const task_list = ref([])

/**
 * 加载列表数据
 */
const onLoad = async () => {
    try {
        const params = {
            page: page.value,
            limit: limit
        }
        const res = await getTeacherTaskListAPI(params)

        // 假设接口返回的数据是数组，如果是 { data: [] } 结构请调整
        const list = Array.isArray(res) ? res.data : (res.data || [])

        if (list.length > 0) {
            task_list.value.push(...list)
            page.value++
        }

        // 加载状态结束
        loading.value = false

        // 数据全部加载完成
        if (list.length < limit) {
            finished.value = true
        }
    } catch (error) {
        console.error('获取作业列表失败', error)
        loading.value = false
        finished.value = true
    }
}

/**
 * 格式化日期范围
 * @param {string} begin_date - 开始时间
 * @param {string} end_date - 截止时间
 * @returns {string} 格式化后的日期范围文案
 * 注释：按“开始时间 至 截止时间”展示，字段为空时返回“-”。
 */
const format_date_range = (begin_date, end_date) => {
    const start = begin_date || '-'
    const end = end_date || '-'
    return `${start} 至 ${end}`
}

/**
 * 跳转到作业主页
 * @param {string} id - 作业ID
 * @returns {void}
 * 注释：点击列表项右侧“查看”按钮，导航到教师端作业主页。
 */
const go_task_home = (id) => {
    $router.push({ name: 'TeacherTaskHome', params: { id } })
}
</script>

<style lang="less" scoped>
.TaskManagePage {
    min-height: 100vh;
    background: linear-gradient(to bottom right, #f0fdf4, #f0fdfa, #eff6ff);
    padding: 1rem;
    padding-bottom: 6rem;

    .pageHeader {
        .title {
            color: #4caf50;
            line-height: 1.4;
        }
    }

    .listWrapper {
        .taskItem {
            .taskTitle {
                line-height: 1.5;
            }

            .taskDates {
                color: #6b7280;
            }
        }
    }
}
</style>