<template>
  <div class="task-list-view">
    <div class="page-header">
      <div class="header-left">
        <h2><CheckSquareOutlined /> 阅读任务</h2>
        <p class="page-desc">管理班级阅读任务，跟踪学生完成情况</p>
      </div>
      <a-button type="primary" @click="openCreateModal">
        <PlusOutlined /> 新建任务
      </a-button>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-row">
      <div class="stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
          <FileTextOutlined />
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.total }}</div>
          <div class="stat-label">全部任务</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
          <SyncOutlined />
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.active }}</div>
          <div class="stat-label">进行中</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
          <CheckCircleOutlined />
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.completedRate }}%</div>
          <div class="stat-label">平均完成率</div>
        </div>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <a-space :size="16">
        <a-select
          v-model:value="filters.status"
          placeholder="任务状态"
          style="width: 120px;"
          allowClear
          @change="loadTasks"
        >
          <a-select-option value="PUBLISHED">进行中</a-select-option>
          <a-select-option value="DRAFT">草稿</a-select-option>
          <a-select-option value="ARCHIVED">已归档</a-select-option>
        </a-select>
        <a-select
          v-model:value="filters.taskType"
          placeholder="任务类型"
          style="width: 120px;"
          allowClear
          @change="loadTasks"
        >
          <a-select-option value="READING">阅读</a-select-option>
          <a-select-option value="ACTIVITY">活动</a-select-option>
          <a-select-option value="HOMEWORK">作业</a-select-option>
        </a-select>
        <a-input-search
          v-model:value="filters.keyword"
          placeholder="搜索任务标题"
          style="width: 200px;"
          @search="loadTasks"
          allow-clear
        />
      </a-space>
    </div>

    <a-spin :spinning="loading">
      <div class="task-list" v-if="tasks.length > 0">
        <div v-for="task in tasks" :key="task.id" class="task-card">
          <div class="card-header">
            <div class="task-title">
              <a-tag :color="getTypeColor(task.taskType)">{{ getTypeText(task.taskType) }}</a-tag>
              <h3>{{ task.title }}</h3>
            </div>
            <a-tag :color="getStatusColor(task.status)">{{ getStatusText(task.status) }}</a-tag>
          </div>

          <div class="card-body">
            <p v-if="task.description">{{ task.description }}</p>
            <div class="task-meta">
              <span v-if="task.course">
                <BookOutlined /> {{ task.course.name }}
              </span>
              <span>
                <CalendarOutlined />
                {{ formatDate(task.startDate) }} - {{ formatDate(task.endDate) }}
              </span>
              <span>
                <TeamOutlined /> {{ task.targetCount || 0 }} 个目标
              </span>
            </div>
          </div>

          <div class="card-footer">
            <div class="progress-info">
              <a-progress
                :percent="getCompletionRate(task)"
                :stroke-color="{ '0%': '#52c41a', '100%': '#73d13d' }"
                size="small"
                style="width: 150px;"
              />
              <span class="progress-text">{{ getCompletedCount(task) }}/{{ task.targetCount || 0 }} 人完成</span>
            </div>
            <div class="card-actions">
              <a-button type="link" size="small" @click="viewCompletionDetail(task)">
                <EyeOutlined /> 完成情况
              </a-button>
              <a-button type="link" size="small" @click="sendReminder(task)" v-if="task.status === 'PUBLISHED'">
                <BellOutlined /> 发送提醒
              </a-button>
              <a-dropdown>
                <a-button type="link" size="small">
                  <MoreOutlined />
                </a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item key="edit" @click="openEditModal(task)">
                      <EditOutlined /> 编辑
                    </a-menu-item>
                    <a-menu-item key="archive" @click="archiveTask(task)" v-if="task.status === 'PUBLISHED'">
                      <FolderOutlined /> 归档
                    </a-menu-item>
                    <a-menu-divider />
                    <a-menu-item key="delete" @click="confirmDelete(task)" danger>
                      <DeleteOutlined /> 删除
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
          </div>
        </div>
      </div>

      <div class="empty-state" v-else>
        <InboxOutlined class="empty-icon" />
        <p>暂无阅读任务</p>
        <a-button type="primary" @click="openCreateModal">
          <PlusOutlined /> 创建第一个任务
        </a-button>
      </div>
    </a-spin>

    <div class="pagination-section" v-if="total > pageSize">
      <a-pagination
        v-model:current="currentPage"
        :total="total"
        :page-size="pageSize"
        @change="onPageChange"
        show-quick-jumper
        :show-total="(total: number) => `共 ${total} 条`"
      />
    </div>

    <!-- 创建/编辑任务弹窗 -->
    <a-modal
      v-model:open="createModalVisible"
      :title="isEdit ? '编辑任务' : '新建阅读任务'"
      @ok="handleCreate"
      :confirm-loading="creating"
      width="600px"
    >
      <a-form :model="createForm" layout="vertical">
        <!-- 模板选择（仅新建时显示） -->
        <a-form-item label="使用模板" v-if="!isEdit">
          <a-select
            v-model:value="selectedTemplateId"
            placeholder="选择模板快速填充（可选）"
            style="width: 100%;"
            allowClear
            @change="onTemplateSelect"
          >
            <a-select-option v-for="tpl in templates" :key="tpl.id" :value="tpl.id">
              {{ tpl.name }}
              <a-tag size="small" :color="getTaskTypeColor(tpl.taskType)" style="margin-left: 8px;">
                {{ getTaskTypeText(tpl.taskType) }}
              </a-tag>
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="任务标题" required>
          <a-input v-model:value="createForm.title" placeholder="请输入任务标题" />
        </a-form-item>
        <a-form-item label="任务描述">
          <a-textarea v-model:value="createForm.description" placeholder="请输入任务描述" :rows="3" />
        </a-form-item>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="任务类型" required>
              <a-select v-model:value="createForm.taskType" style="width: 100%;">
                <a-select-option value="READING">阅读</a-select-option>
                <a-select-option value="ACTIVITY">活动</a-select-option>
                <a-select-option value="HOMEWORK">作业</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="目标类型" required>
              <a-radio-group v-model:value="createForm.targetType">
                <a-radio value="CLASS">班级</a-radio>
                <a-radio value="STUDENT">学生</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="选择目标" required v-if="createForm.targetType === 'CLASS'">
          <a-select
            v-model:value="createForm.targetIds"
            mode="multiple"
            placeholder="请选择班级"
            style="width: 100%;"
          >
            <a-select-option v-for="cls in classes" :key="cls.id" :value="cls.id">
              {{ cls.name }} ({{ cls.grade }})
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="选择学生" required v-if="createForm.targetType === 'STUDENT'">
          <a-select
            v-model:value="createForm.targetIds"
            mode="multiple"
            placeholder="请选择学生"
            style="width: 100%;"
            :filter-option="filterStudentOption"
            show-search
          >
            <a-select-option v-for="student in students" :key="student.id" :value="student.id">
              {{ student.name }} - {{ student.class?.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="关联课程">
          <a-select
            v-model:value="createForm.relatedCourseId"
            placeholder="可选，关联课程包"
            style="width: 100%;"
            allowClear
            show-search
            :filter-option="filterCourseOption"
          >
            <a-select-option v-for="course in courses" :key="course.id" :value="course.id">
              {{ course.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="任务时间" required>
          <a-range-picker
            v-model:value="createForm.dateRange"
            style="width: 100%;"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 完成情况详情弹窗 -->
    <a-modal
      v-model:open="completionModalVisible"
      :title="`完成情况 - ${selectedTask?.title || ''}`"
      width="800px"
      :footer="null"
    >
      <div class="completion-header">
        <a-space>
          <a-select
            v-model:value="completionFilter.status"
            placeholder="筛选状态"
            style="width: 120px;"
            allowClear
            @change="loadCompletions"
          >
            <a-select-option value="PENDING">待完成</a-select-option>
            <a-select-option value="IN_PROGRESS">进行中</a-select-option>
            <a-select-option value="COMPLETED">已完成</a-select-option>
          </a-select>
        </a-space>
        <div class="completion-stats">
          <a-tag color="orange">{{ completionStats.pending }} 待完成</a-tag>
          <a-tag color="blue">{{ completionStats.inProgress }} 进行中</a-tag>
          <a-tag color="green">{{ completionStats.completed }} 已完成</a-tag>
        </div>
      </div>

      <a-spin :spinning="loadingCompletions">
        <div class="completion-list" v-if="completions.length > 0">
          <div v-for="completion in completions" :key="completion.id" class="completion-item">
            <div class="student-info">
              <a-avatar :style="{ backgroundColor: completion.student.gender === 'MALE' ? '#1890ff' : '#eb2f96' }">
                {{ completion.student.name.charAt(0) }}
              </a-avatar>
              <div class="student-detail">
                <div class="student-name">{{ completion.student.name }}</div>
                <div class="student-class">{{ completion.student.class?.name || '-' }}</div>
              </div>
            </div>
            <div class="completion-status">
              <a-select
                :value="completion.status"
                style="width: 100px;"
                size="small"
                @change="(val: string) => updateCompletionStatus(completion, val)"
              >
                <a-select-option value="PENDING">待完成</a-select-option>
                <a-select-option value="IN_PROGRESS">进行中</a-select-option>
                <a-select-option value="COMPLETED">已完成</a-select-option>
              </a-select>
            </div>
            <div class="completion-feedback">
              <div v-if="completion.parentFeedback" class="parent-feedback">
                <MessageOutlined class="feedback-icon" />
                <a-tooltip :title="completion.parentFeedback">
                  <span class="feedback-text">{{ completion.parentFeedback.substring(0, 30) }}{{ completion.parentFeedback.length > 30 ? '...' : '' }}</span>
                </a-tooltip>
              </div>
              <span v-else class="no-feedback">暂无家长反馈</span>
            </div>
            <div class="completion-time">
              <span v-if="completion.completedAt">
                <CheckCircleOutlined style="color: #52c41a;" />
                {{ formatDate(completion.completedAt) }}
              </span>
            </div>
          </div>
        </div>
        <div class="empty-state" v-else style="padding: 40px 0;">
          <InboxOutlined style="font-size: 48px; color: #d9d9d9;" />
          <p>暂无完成记录</p>
        </div>
      </a-spin>

      <div class="pagination-section" v-if="completionTotal > completionPageSize" style="margin-top: 16px;">
        <a-pagination
          v-model:current="completionPage"
          :total="completionTotal"
          :page-size="completionPageSize"
          size="small"
          @change="onCompletionPageChange"
        />
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { message, Modal } from 'ant-design-vue';
import {
  CheckSquareOutlined,
  PlusOutlined,
  BookOutlined,
  CalendarOutlined,
  TeamOutlined,
  BellOutlined,
  InboxOutlined,
  EyeOutlined,
  MoreOutlined,
  EditOutlined,
  DeleteOutlined,
  FolderOutlined,
  FileTextOutlined,
  SyncOutlined,
  CheckCircleOutlined,
  MessageOutlined,
} from '@ant-design/icons-vue';
import {
  getTeacherTasks,
  createTeacherTask,
  updateTeacherTask,
  deleteTeacherTask,
  getTeacherTaskCompletions,
  updateTaskCompletion,
  sendTaskReminder,
  getTeacherClasses,
  getTeacherStudents,
  getTeacherCourses,
  getTaskTemplates,
  type TeacherTask,
  type TaskCompletion,
  type TaskTemplate,
} from '@/api/teacher';
import dayjs, { Dayjs } from 'dayjs';

const loading = ref(false);
const tasks = ref<TeacherTask[]>([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);

const filters = reactive({
  status: undefined as string | undefined,
  taskType: undefined as string | undefined,
  keyword: undefined as string | undefined,
});

// 统计数据
const stats = computed(() => {
  const all = tasks.value;
  const active = all.filter(t => t.status === 'PUBLISHED').length;
  const totalTargets = all.reduce((sum, t) => sum + (t.targetCount || 0), 0);
  const totalCompleted = all.reduce((sum, t) => sum + (t.completionCount || 0), 0);
  const rate = totalTargets > 0 ? Math.round((totalCompleted / totalTargets) * 100) : 0;
  return {
    total: total.value,
    active,
    completedRate: rate,
  };
});

// 创建任务
const createModalVisible = ref(false);
const creating = ref(false);
const isEdit = ref(false);
const editTaskId = ref<number | null>(null);
const classes = ref<any[]>([]);
const students = ref<any[]>([]);
const courses = ref<any[]>([]);

// 模板相关
const templates = ref<TaskTemplate[]>([]);
const selectedTemplateId = ref<number | undefined>(undefined);

const createForm = reactive({
  title: '',
  description: '',
  taskType: 'READING' as 'READING' | 'ACTIVITY' | 'HOMEWORK',
  targetType: 'CLASS' as 'CLASS' | 'STUDENT',
  targetIds: [] as number[],
  relatedCourseId: undefined as number | undefined,
  dateRange: null as [Dayjs, Dayjs] | null,
});

// 完成情况弹窗
const completionModalVisible = ref(false);
const selectedTask = ref<TeacherTask | null>(null);
const completions = ref<TaskCompletion[]>([]);
const completionTotal = ref(0);
const completionPage = ref(1);
const completionPageSize = ref(10);
const loadingCompletions = ref(false);

const completionFilter = reactive({
  status: undefined as string | undefined,
});

const completionStats = computed(() => {
  const all = completions.value;
  return {
    pending: all.filter(c => c.status === 'PENDING').length,
    inProgress: all.filter(c => c.status === 'IN_PROGRESS').length,
    completed: all.filter(c => c.status === 'COMPLETED').length,
  };
});

// 类型映射
const typeMap: Record<string, { text: string; color: string }> = {
  READING: { text: '阅读', color: 'blue' },
  ACTIVITY: { text: '活动', color: 'orange' },
  HOMEWORK: { text: '作业', color: 'purple' },
};

const statusMap: Record<string, { text: string; color: string }> = {
  PUBLISHED: { text: '进行中', color: 'green' },
  DRAFT: { text: '草稿', color: 'default' },
  ARCHIVED: { text: '已归档', color: 'default' },
};

const getTypeText = (type: string) => typeMap[type]?.text || type;
const getTypeColor = (type: string) => typeMap[type]?.color || 'default';
const getStatusText = (status: string) => statusMap[status]?.text || status;
const getStatusColor = (status: string) => statusMap[status]?.color || 'default';
const formatDate = (date: string) => date ? dayjs(date).format('YYYY-MM-DD') : '-';

const getCompletionRate = (task: TeacherTask) => {
  if (!task.completionCount || !task.targetCount) return 0;
  return Math.round((task.completionCount / task.targetCount) * 100);
};

const getCompletedCount = (task: TeacherTask) => {
  return task.completionCount || 0;
};

const filterStudentOption = (input: string, option: any) => {
  const text = option.children[0].children.toLowerCase();
  return text.includes(input.toLowerCase());
};

const filterCourseOption = (input: string, option: any) => {
  const text = option.children[0].children.toLowerCase();
  return text.includes(input.toLowerCase());
};

// 加载任务列表
const loadTasks = async () => {
  loading.value = true;
  try {
    const data = await getTeacherTasks({
      page: currentPage.value,
      pageSize: pageSize.value,
      ...filters,
    });
    tasks.value = data.items || [];
    total.value = data.total || 0;
  } catch (error: any) {
    message.error(error.response?.data?.message || '加载失败');
  } finally {
    loading.value = false;
  }
};

// 加载班级、学生、课程
const loadOptions = async () => {
  try {
    const [classesData, studentsData, coursesData] = await Promise.all([
      getTeacherClasses(),
      getTeacherStudents({ page: 1, pageSize: 500 }),
      getTeacherCourses({ page: 1, pageSize: 100 }),
    ]);
    classes.value = classesData;
    students.value = studentsData.items || [];
    courses.value = coursesData.items || [];
  } catch (error) {
    console.error('加载选项失败', error);
  }
};

const onPageChange = (page: number) => {
  currentPage.value = page;
  loadTasks();
};

// 打开创建弹窗
const openCreateModal = async () => {
  isEdit.value = false;
  editTaskId.value = null;
  selectedTemplateId.value = undefined;
  createForm.title = '';
  createForm.description = '';
  createForm.taskType = 'READING';
  createForm.targetType = 'CLASS';
  createForm.targetIds = [];
  createForm.relatedCourseId = undefined;
  createForm.dateRange = null;
  createModalVisible.value = true;

  // 加载模板列表
  await loadTemplates();
};

// 加载模板列表
const loadTemplates = async () => {
  try {
    const result = await getTaskTemplates({ pageSize: 50 });
    templates.value = result.items;
  } catch (error) {
    console.error('加载模板失败', error);
  }
};

// 选择模板时自动填充表单
const onTemplateSelect = (templateId: number | undefined) => {
  if (!templateId) return;

  const template = templates.value.find(t => t.id === templateId);
  if (template) {
    createForm.title = template.name;
    createForm.description = template.description || '';
    createForm.taskType = template.taskType;
    createForm.relatedCourseId = template.relatedCourseId;

    // 设置默认日期范围
    const start = dayjs();
    const end = start.add(template.defaultDuration, 'day');
    createForm.dateRange = [start, end];
  }
};

// 任务类型颜色和文字
const getTaskTypeColor = (type: string) => {
  const colors: Record<string, string> = {
    READING: 'blue',
    ACTIVITY: 'green',
    HOMEWORK: 'orange',
  };
  return colors[type] || 'default';
};

const getTaskTypeText = (type: string) => {
  const texts: Record<string, string> = {
    READING: '阅读',
    ACTIVITY: '活动',
    HOMEWORK: '作业',
  };
  return texts[type] || type;
};

// 打开编辑弹窗
const openEditModal = (task: TeacherTask) => {
  isEdit.value = true;
  editTaskId.value = task.id;
  createForm.title = task.title;
  createForm.description = task.description || '';
  createForm.taskType = task.taskType;
  createForm.targetType = task.targetType;
  createForm.relatedCourseId = task.relatedCourseId;
  createForm.dateRange = [
    dayjs(task.startDate),
    dayjs(task.endDate),
  ];
  createModalVisible.value = true;
};

// 创建/更新任务
const handleCreate = async () => {
  if (!createForm.title || !createForm.dateRange) {
    message.warning('请填写必要信息');
    return;
  }

  if (!isEdit.value && createForm.targetIds.length === 0) {
    message.warning('请选择目标班级或学生');
    return;
  }

  creating.value = true;
  try {
    const data = {
      title: createForm.title,
      description: createForm.description,
      taskType: createForm.taskType,
      targetType: createForm.targetType,
      targetIds: createForm.targetIds,
      relatedCourseId: createForm.relatedCourseId,
      startDate: createForm.dateRange[0].format('YYYY-MM-DD'),
      endDate: createForm.dateRange[1].format('YYYY-MM-DD'),
    };

    if (isEdit.value && editTaskId.value) {
      await updateTeacherTask(editTaskId.value, data);
      message.success('任务更新成功');
    } else {
      await createTeacherTask(data);
      message.success('任务创建成功');
    }
    createModalVisible.value = false;
    loadTasks();
  } catch (error: any) {
    message.error(error.response?.data?.message || '操作失败');
  } finally {
    creating.value = false;
  }
};

// 归档任务
const archiveTask = async (task: TeacherTask) => {
  try {
    await updateTeacherTask(task.id, { status: 'ARCHIVED' } as any);
    message.success('任务已归档');
    loadTasks();
  } catch (error: any) {
    message.error('归档失败');
  }
};

// 确认删除
const confirmDelete = (task: TeacherTask) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除任务「${task.title}」吗？此操作不可撤销。`,
    okText: '删除',
    okType: 'danger',
    cancelText: '取消',
    onOk: async () => {
      try {
        await deleteTeacherTask(task.id);
        message.success('删除成功');
        loadTasks();
      } catch (error: any) {
        message.error('删除失败');
      }
    },
  });
};

// 发送提醒
const sendReminder = async (task: TeacherTask) => {
  try {
    await sendTaskReminder(task.id);
    message.success('提醒已发送');
  } catch (error: any) {
    message.error('发送失败');
  }
};

// 查看完成情况
const viewCompletionDetail = async (task: TeacherTask) => {
  selectedTask.value = task;
  completionPage.value = 1;
  completionFilter.status = undefined;
  completionModalVisible.value = true;
  loadCompletions();
};

const loadCompletions = async () => {
  if (!selectedTask.value) return;

  loadingCompletions.value = true;
  try {
    const data = await getTeacherTaskCompletions(selectedTask.value.id, {
      page: completionPage.value,
      pageSize: completionPageSize.value,
      status: completionFilter.status,
    });
    completions.value = data.items || [];
    completionTotal.value = data.total || 0;
  } catch (error: any) {
    message.error('加载完成情况失败');
  } finally {
    loadingCompletions.value = false;
  }
};

const onCompletionPageChange = (page: number) => {
  completionPage.value = page;
  loadCompletions();
};

// 更新完成状态
const updateCompletionStatus = async (completion: TaskCompletion, status: string) => {
  try {
    await updateTaskCompletion(completion.taskId, completion.studentId, { status: status as any });
    completion.status = status as any;
    if (status === 'COMPLETED') {
      completion.completedAt = new Date().toISOString();
    }
    message.success('状态已更新');
  } catch (error: any) {
    message.error('更新失败');
    loadCompletions();
  }
};

onMounted(() => {
  loadTasks();
  loadOptions();
});
</script>

<style scoped lang="scss">
.task-list-view {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;

    .header-left {
      h2 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 20px;
        font-weight: 600;
      }

      .page-desc {
        margin: 4px 0 0;
        color: #999;
        font-size: 14px;
      }
    }
  }

  .stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;

    .stat-card {
      flex: 1;
      background: white;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

      .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .stat-info {
        .stat-value {
          font-size: 28px;
          font-weight: 700;
          color: #2D3436;
        }

        .stat-label {
          font-size: 13px;
          color: #636E72;
        }
      }
    }
  }

  .filter-section {
    margin-bottom: 20px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .task-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .task-card {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    transition: box-shadow 0.3s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12px;

      .task-title {
        display: flex;
        align-items: center;
        gap: 12px;

        h3 {
          margin: 0;
          font-size: 16px;
          font-weight: 600;
        }
      }
    }

    .card-body {
      margin-bottom: 12px;

      p {
        margin: 0 0 12px;
        font-size: 14px;
        color: #666;
      }

      .task-meta {
        display: flex;
        gap: 16px;
        font-size: 13px;
        color: #999;

        span {
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }
    }

    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12px;
      border-top: 1px solid #f0f0f0;

      .progress-info {
        display: flex;
        align-items: center;
        gap: 12px;

        .progress-text {
          font-size: 13px;
          color: #666;
        }
      }

      .card-actions {
        display: flex;
        gap: 4px;
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    background: white;
    border-radius: 12px;

    .empty-icon {
      font-size: 64px;
      color: #d9d9d9;
    }

    p {
      margin: 16px 0;
    }
  }

  .pagination-section {
    margin-top: 24px;
    text-align: center;
  }
}

// 完成情况弹窗样式
.completion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;

  .completion-stats {
    display: flex;
    gap: 8px;
  }
}

.completion-list {
  max-height: 400px;
  overflow-y: auto;
}

.completion-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  margin-bottom: 8px;

  .student-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;

    .student-detail {
      .student-name {
        font-weight: 500;
      }

      .student-class {
        font-size: 12px;
        color: #999;
      }
    }
  }

  .completion-status {
    width: 100px;
  }

  .completion-feedback {
    flex: 1;

    .parent-feedback {
      display: flex;
      align-items: center;
      gap: 8px;

      .feedback-icon {
        color: #1890ff;
      }

      .feedback-text {
        font-size: 13px;
        color: #666;
      }
    }

    .no-feedback {
      font-size: 13px;
      color: #d9d9d9;
    }
  }

  .completion-time {
    width: 100px;
    font-size: 12px;
    color: #999;
    text-align: right;
  }
}
</style>
