kindergarten/reading-platform-frontend/src/views/school/students/StudentListView.vue

<template>
  <div class="min-h-100vh p-0 bg-[linear-gradient(180deg,#FFF8F0_0%,#FFFFFF_100%)]">
    <!-- 页面头部 -->
    <div class="rounded-[20px] py-6 px-8 mb-6 bg-[linear-gradient(135deg,#f093fb_0%,#f5576c_100%)]">
      <div class="flex justify-between items-center max-md:flex-col max-md:gap-4 max-md:text-center">
        <div class="flex items-center gap-4">
          <div class="w-16 h-16 rounded-2xl flex items-center justify-center bg-white/20 text-[32px] text-white">
            <TeamOutlined />
          </div>
          <div>
            <h2 class="text-white text-2xl font-700 m-0">学生管理</h2>
            <p class="text-white/80 text-sm mt-1 m-0">管理学校学生信息与成长记录</p>
          </div>
        </div>
        <div class="flex gap-8 max-md:w-full max-md:justify-center">
          <div class="text-center stat-item">
            <span class="block text-[28px] font-700 text-white">{{ pagination.total }}</span>
            <span class="text-xs text-white/80">学生总数</span>
          </div>
          <div class="text-center stat-item flex flex-col items-center gap-0.5">
            <span class="block text-[28px] font-700 text-[#4FC3F7]">{{ boysCount }}</span>
            <span class="text-xs text-white/80 flex items-center gap-1"><UserOutlined class="text-sm text-[#4FC3F7]" /> 男生</span>
          </div>
          <div class="text-center stat-item flex flex-col items-center gap-0.5">
            <span class="block text-[28px] font-700 text-[#FFD93D]">{{ girlsCount }}</span>
            <span class="text-xs text-white/80 flex items-center gap-1"><UserOutlined class="text-sm text-[#FFD93D]" /> 女生</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作栏 -->
    <div class="flex justify-between items-center mb-6 py-4 px-5 bg-white rounded-2xl shadow-[0_2px_8px_rgba(0,0,0,0.04)] max-md:flex-col max-md:gap-3">
      <div class="flex gap-3 max-md:w-full flex-wrap filters">
        <a-select
          v-model:value="selectedClassId"
          placeholder="选择班级"
          class="w-[150px]"
          @change="handleClassChange"
          allow-clear
        >
          <a-select-option v-for="cls in classes" :key="cls.id" :value="cls.id">
            {{ cls.name }}
          </a-select-option>
        </a-select>
        <a-input-search
          v-model:value="searchKeyword"
          placeholder="搜索学生姓名/家长"
          class="w-[220px] search-input-wrap"
          @search="handleSearch"
          allow-clear
        >
          <template #prefix>
            <SearchOutlined class="text-[#B2BEC3]" />
          </template>
        </a-input-search>
      </div>
      <div class="flex gap-3 max-md:w-full flex-wrap actions">
        <a-button class="rounded-xl h-10 border-2 border-[#f093fb] text-[#f5576c] hover:bg-[#FFF0F5] hover:border-[#f5576c] hover:text-[#f5576c]" @click="showImportModal">
          <DownloadOutlined class="mr-2" />
          批量导入
        </a-button>
        <a-button type="primary" class="!bg-[linear-gradient(135deg,#f093fb_0%,#f5576c_100%)] hover:!bg-[linear-gradient(135deg,#e080e8_0%,#e04a5d_100%)] !border-0 rounded-xl h-10 px-6 font-600" @click="showAddModal">
          <PlusOutlined class="mr-2" />
          添加学生
        </a-button>
      </div>
    </div>

    <!-- 学生卡片网格 -->
    <div class="grid gap-5 mb-6 grid-cols-1 md:grid-cols-[repeat(auto-fill,minmax(280px,1fr))]" v-if="!loading && students.length > 0">
      <div
        v-for="student in students"
        :key="student.id"
        class="bg-white rounded-2xl overflow-hidden shadow-[0_4px_12px_rgba(0,0,0,0.05)] transition-all duration-300 border-2 border-transparent hover:translate-y-[-4px] hover:shadow-[0_8px_24px_rgba(0,0,0,0.1)] hover:border-[#f093fb]"
      >
        <div class="flex items-center gap-3 py-4 px-5 bg-[linear-gradient(135deg,#F8F9FA_0%,#FFFFFF_100%)] border-b border-[#F0F0F0]">
          <div
            class="w-12 h-12 rounded-full flex items-center justify-center text-2xl text-white"
            :class="normalizeGender(student.gender) === '男' ? 'bg-[linear-gradient(135deg,#4FC3F7_0%,#29B6F6_100%)]' : 'bg-[linear-gradient(135deg,#f093fb_0%,#f5576c_100%)]'"
          >
            <UserOutlined />
          </div>
          <div class="flex-1 min-w-0">
            <div class="text-base font-600 text-[#2D3436]">{{ student.name }}</div>
            <div class="text-xs text-[#636E72] mt-0.5">{{ student.className }}</div>
          </div>
        </div>

        <div class="py-4 px-5 card-body">
          <div class="flex items-center gap-2 mb-2 text-[13px]">
            <CalendarOutlined class="text-sm text-[#f5576c] w-5" />
            <span class="text-[#636E72] flex-1">{{ calculateAge(student.birthDate) || '--' }}{{ student.birthDate ? '岁' : '' }}</span>
            <span
              class="py-0.5 px-2 rounded-[10px] text-[11px]"
              :class="normalizeGender(student.gender) === '男' ? 'bg-[#E3F2FD] text-[#1976D2]' : 'bg-[#FCE4EC] text-[#E91E63]'"
            >
              {{ normalizeGender(student.gender) }}
            </span>
          </div>
          <div class="flex items-center gap-2 mb-2 text-[13px]">
            <TeamOutlined class="text-sm text-[#f5576c] w-5" />
            <span class="text-[#636E72]">{{ student.parentName || '未设置' }}</span>
          </div>
          <div class="flex items-center gap-2 mb-2 text-[13px]">
            <PhoneOutlined class="text-sm text-[#f5576c] w-5" />
            <span class="text-[#636E72]">{{ student.parentPhone || '未设置' }}</span>
          </div>
          <div class="flex items-center gap-2 text-[13px]">
            <BookOutlined class="text-sm text-[#f5576c] w-5" />
            <span class="text-[#636E72]">参与课程 <strong class="text-[#f5576c]">{{ student.lessonCount || 0 }}</strong> 次</span>
          </div>
        </div>

        <div class="flex justify-end gap-2 py-3 px-5 border-t border-[#F0F0F0] bg-[#FAFAFA] card-actions">
          <a-button type="link" size="small" @click="handleEdit(student)" class="!py-1 !px-2 !h-auto inline-flex items-center gap-1">
            <EditOutlined /> 编辑
          </a-button>
          <a-button type="link" size="small" @click="handleTransfer(student)" class="!py-1 !px-2 !h-auto inline-flex items-center gap-1">
            <SwapOutlined /> 调班
          </a-button>
          <a-popconfirm
            title="确定要删除这位学生吗？"
            @confirm="handleDelete(student.id)"
          >
            <a-button type="link" size="small" danger class="!py-1 !px-2 !h-auto">
              <DeleteOutlined /> 删除
            </a-button>
          </a-popconfirm>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div class="flex flex-col items-center justify-center py-20 bg-white rounded-2xl empty-state" v-if="!loading && students.length === 0">
      <div class="w-20 h-20 rounded-full flex items-center justify-center mb-4 text-[40px] text-[#f5576c] bg-[linear-gradient(135deg,#FFF0F5_0%,#FCE4EC_100%)]">
        <InboxOutlined />
      </div>
      <p class="text-[#636E72] text-base mb-6">暂无学生数据</p>
      <a-button type="primary" class="!bg-[linear-gradient(135deg,#f093fb_0%,#f5576c_100%)] !border-0 rounded-xl" @click="showAddModal">
        添加第一位学生
      </a-button>
    </div>

    <!-- 加载状态 -->
    <div class="flex flex-col items-center justify-center py-20 loading-state" v-if="loading">
      <a-spin size="large" />
      <p class="text-[#636E72] mt-4">加载中...</p>
    </div>

    <!-- 分页 -->
    <div class="flex justify-center py-6 bg-white rounded-2xl pagination-wrapper" v-if="students.length > 0">
      <a-pagination
        v-model:current="pagination.current"
        v-model:pageSize="pagination.pageSize"
        :total="pagination.total"
        :show-size-changer="true"
        :show-total="(total: number) => `共 ${total} 条`"
        @change="handlePageChange"
      />
    </div>

    <!-- 添加/编辑学生模态框 -->
    <a-modal
      v-model:open="modalVisible"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
      :confirm-loading="submitting"
      :width="520"
    >
      <template #title>
        <span class="flex items-center gap-2">
          <component :is="isEdit ? EditOutlined : PlusOutlined" class="text-[#f5576c]" />
          {{ isEdit ? '编辑学生' : '添加学生' }}
        </span>
      </template>
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-item label="姓名" name="name">
          <a-input v-model:value="formState.name" placeholder="请输入学生姓名">
            <template #prefix><UserOutlined class="text-[#B2BEC3]" /></template>
          </a-input>
        </a-form-item>
        <a-form-item label="性别" name="gender">
          <a-radio-group v-model:value="formState.gender">
            <a-radio value="男"><UserOutlined class="mr-1 text-[#4FC3F7]" /> 男孩</a-radio>
            <a-radio value="女"><UserOutlined class="mr-1 text-[#f5576c]" /> 女孩</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="出生日期" name="birthDate">
          <a-date-picker
            v-model:value="formState.birthDate"
            class="w-full"
            value-format="YYYY-MM-DD"
            placeholder="选择出生日期"
          />
        </a-form-item>
        <a-form-item label="所在班级" name="classId">
          <a-select v-model:value="formState.classId" placeholder="请选择班级" :loading="classesLoading">
            <a-select-option v-for="cls in classes" :key="cls.id" :value="cls.id">
              {{ cls.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="家长姓名" name="parentName">
          <a-input v-model:value="formState.parentName" placeholder="请输入家长姓名">
            <template #prefix><TeamOutlined class="text-[#B2BEC3]" /></template>
          </a-input>
        </a-form-item>
        <a-form-item label="家长电话" name="parentPhone">
          <a-input v-model:value="formState.parentPhone" placeholder="请输入家长电话">
            <template #prefix><PhoneOutlined class="text-[#B2BEC3]" /></template>
          </a-input>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 学生调班模态框 -->
    <a-modal
      v-model:open="transferModalVisible"
      title="学生调班"
      :confirm-loading="transferSubmitting"
      @ok="handleTransferSubmit"
      @cancel="transferModalVisible = false"
      width="480px"
    >
      <div class="py-2 transfer-modal-content">
        <div class="py-3 px-4 bg-[#F8F9FA] rounded-lg mb-4 current-info">
          <span>当前学生：</span>
          <strong class="text-[#f5576c]">{{ selectedTransferStudent?.name }}</strong>
          <span class="text-[#888] text-xs">（{{ selectedTransferStudent?.className }}）</span>
        </div>
        <a-form layout="vertical">
          <a-form-item label="目标班级" required>
            <a-select
              v-model:value="transferTargetClassId"
              placeholder="请选择目标班级"
              :loading="classesLoading"
            >
              <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="调班原因">
            <a-textarea
              v-model:value="transferReason"
              placeholder="请输入调班原因（选填）"
              :rows="3"
            />
          </a-form-item>
        </a-form>

        <div class="mt-4 pt-4 border-t border-[#F0F0F0] transfer-history" v-if="transferHistory.length > 0">
          <div class="flex items-center gap-2 font-600 text-[#636E72] mb-3 history-header">
            <HistoryOutlined /> 调班历史
          </div>
          <div class="max-h-[150px] overflow-y-auto history-list">
            <div v-for="h in transferHistory" :key="h.id" class="flex items-center gap-2 py-2 px-3 bg-[#F8F9FA] rounded-md mb-2 text-[13px] history-item">
              <span class="text-[#888]">{{ h.fromClass?.name || '无' }}</span>
              <span class="text-[#B2BEC3]">→</span>
              <span class="text-[#2D3436] font-500">{{ h.toClass.name }}</span>
              <span class="ml-auto text-[#B2BEC3] text-[11px]">{{ formatDate(h.createdAt) }}</span>
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 批量导入模态框 -->
    <a-modal
      v-model:open="importModalVisible"
      :footer="null"
      width="560px"
    >
      <template #title>
        <span class="flex items-center gap-2">
          <DownloadOutlined class="text-[#f5576c]" />
          批量导入学生
        </span>
      </template>
      <div class="flex flex-col gap-4 import-content">
        <div class="p-4 bg-[#FFF8F0] rounded-xl import-tips">
          <div class="flex items-center gap-2 font-600 text-[#FF8C42] mb-2">
            <SolutionOutlined class="text-lg" />
            <span>导入说明</span>
          </div>
          <ol class="m-0 pl-5 text-[#636E72] text-[13px] tips-list">
            <li v-for="(note, index) in templateNotes" :key="index" class="mb-1">{{ note }}</li>
          </ol>
        </div>

        <a-button class="rounded-xl border-2 border-dashed border-[#f093fb] text-[#f5576c] hover:border-[#f5576c] hover:text-[#f5576c] hover:bg-[#FFF0F5]" @click="downloadTemplate">
          <DownloadOutlined class="mr-2" />
          下载导入模板
        </a-button>

        <a-upload-dragger
          :before-upload="beforeUpload"
          :show-upload-list="false"
          accept=".xlsx,.xls,.csv"
          class="upload-area rounded-xl"
        >
          <div class="py-6 text-center upload-content">
            <FileAddOutlined class="block text-[48px] text-[#f5576c] mb-3" />
            <p class="text-sm text-[#636E72] mb-1">点击或拖拽文件到此区域上传</p>
            <p class="text-xs text-[#B2BEC3]">支持 .xlsx, .xls, .csv 格式</p>
          </div>
        </a-upload-dragger>

        <div v-if="importFile" class="flex items-center gap-2 py-3 px-4 bg-[#F0F0F0] rounded-lg file-info">
          <FileOutlined class="text-xl text-[#f5576c]" />
          <span class="flex-1 text-[#636E72] text-[13px]">{{ importFile.name }}</span>
          <a-button type="link" size="small" @click="importFile = null">移除</a-button>
        </div>

        <div v-if="importFile" class="mt-2 default-class-select">
          <label class="block mb-2 text-[13px] text-[#636E72]">默认班级（用于未指定班级的学生）</label>
          <a-select
            v-model:value="importDefaultClassId"
            placeholder="选择默认班级"
            class="w-full"
            allow-clear
          >
            <a-select-option v-for="cls in classes" :key="cls.id" :value="cls.id">
              {{ cls.name }}
            </a-select-option>
          </a-select>
        </div>

        <a-button
          type="primary"
          :loading="importing"
          :disabled="!importFile"
          @click="handleImport"
          block
          class="h-11 rounded-xl text-[15px] font-600 !bg-[linear-gradient(135deg,#f093fb_0%,#f5576c_100%)] hover:!bg-[linear-gradient(135deg,#e080e8_0%,#e04a5d_100%)] !border-0"
        >
          <template v-if="!importing">
            <RocketOutlined class="mr-2" />
            开始导入
          </template>
          <span v-else>导入中...</span>
        </a-button>

        <div v-if="importResult" class="p-4 rounded-xl import-result" :class="importResult.failed === 0 ? 'bg-[#E8F5E9]' : 'bg-[#FFF8E1]'">
          <div class="flex items-center gap-2 font-600 mb-3 result-header">
            <component :is="importResult.failed === 0 ? CheckCircleOutlined : WarningOutlined" class="text-xl" :class="importResult.failed === 0 ? 'text-[#43A047]' : 'text-[#FF8C42]'" />
            <span>导入完成</span>
          </div>
          <div class="flex gap-4 mb-3 result-stats">
            <span class="text-[13px]" :class="importResult.failed === 0 ? 'text-[#43A047]' : ''">成功 {{ importResult.success }} 条</span>
            <span class="text-[13px] text-[#E53935]">失败 {{ importResult.failed }} 条</span>
          </div>
          <div v-if="importResult.errors.length > 0" class="max-h-[150px] overflow-y-auto py-3 px-3 bg-white rounded-lg text-xs text-[#636E72] result-errors">
            <p v-for="(error, index) in importResult.errors" :key="index" class="my-1">
              第 {{ error.row }} 行：{{ error.message }}
            </p>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import {
  SearchOutlined,
  TeamOutlined,
  UserOutlined,
  EditOutlined,
  DeleteOutlined,
  PlusOutlined,
  UploadOutlined,
  DownloadOutlined,
  CalendarOutlined,
  PhoneOutlined,
  BookOutlined,
  InboxOutlined,
  FileOutlined,
  RocketOutlined,
  CheckCircleOutlined,
  WarningOutlined,
  FileAddOutlined,
  SolutionOutlined,
  SwapOutlined,
  HistoryOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import type { FormInstance, UploadProps } from 'ant-design-vue';
import {
  getStudents,
  createStudent,
  updateStudent,
  deleteStudent,
  getClasses,
  getStudentImportTemplate,
  importStudents,
  transferStudent,
  getStudentClassHistory,
} from '@/api/school';
import type { Student, CreateStudentDto, ClassInfo, ImportResult, StudentClassHistory, TransferStudentDto } from '@/api/school';
import dayjs from 'dayjs';

const loading = ref(false);
const classesLoading = ref(false);
const submitting = ref(false);
const modalVisible = ref(false);
const isEdit = ref(false);
const formRef = ref<FormInstance>();
const selectedClassId = ref<number | undefined>();
const searchKeyword = ref('');

const columns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '性别', dataIndex: 'gender', key: 'gender' },
  { title: '年龄', key: 'age' },
  { title: '所在班级', dataIndex: 'className', key: 'className' },
  { title: '家长姓名', dataIndex: 'parentName', key: 'parentName' },
  { title: '家长电话', dataIndex: 'parentPhone', key: 'parentPhone' },
  { title: '参与课程', dataIndex: 'lessonCount', key: 'lessonCount' },
  { title: '操作', key: 'action', width: 150 },
];

const pagination = reactive({
  current: 1,
  pageSize: 12,
  total: 0,
  showSizeChanger: true,
  showTotal: (total: number) => `共 ${total} 条`,
});

const students = ref<Student[]>([]);
const classes = ref<ClassInfo[]>([]);

// 标准化性别显示
const normalizeGender = (gender?: string): string => {
  if (!gender) return '未知';
  const normalized = gender.toUpperCase();
  if (normalized === 'MALE' || gender === '男') return '男';
  if (normalized === 'FEMALE' || gender === '女') return '女';
  return gender;
};

const boysCount = computed(() => students.value.filter(s => {
  const g = s.gender?.toUpperCase();
  return g === 'MALE' || s.gender === '男';
}).length);
const girlsCount = computed(() => students.value.filter(s => {
  const g = s.gender?.toUpperCase();
  return g === 'FEMALE' || s.gender === '女';
}).length);

interface FormState {
  id?: number;
  name: string;
  gender: string;
  birthDate?: string | null;
  classId: number;
  parentName: string;
  parentPhone: string;
}

const formState = reactive<FormState>({
  name: '',
  gender: '男',
  birthDate: null,
  classId: 0,
  parentName: '',
  parentPhone: '',
});

const rules: Record<string, any[]> = {
  name: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  classId: [{ required: true, message: '请选择班级', trigger: 'change', type: 'number' }],
};

const calculateAge = (birthDate?: string | null): number | null => {
  if (!birthDate) return null;
  const birth = new Date(birthDate);
  const today = new Date();
  let age = today.getFullYear() - birth.getFullYear();
  const monthDiff = today.getMonth() - birth.getMonth();
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
    age--;
  }
  return age >= 0 ? age : null;
};

const loadStudents = async () => {
  loading.value = true;
  try {
    const result = await getStudents({
      page: pagination.current,
      pageSize: pagination.pageSize,
      classId: selectedClassId.value,
      keyword: searchKeyword.value || undefined,
    });
    students.value = result.items;
    pagination.total = result.total;
  } catch (error) {
    console.error('Failed to load students:', error);
  } finally {
    loading.value = false;
  }
};

const loadClasses = async () => {
  classesLoading.value = true;
  try {
    classes.value = await getClasses();
  } catch (error) {
    console.error('Failed to load classes:', error);
  } finally {
    classesLoading.value = false;
  }
};

const handlePageChange = (page: number, pageSize: number) => {
  pagination.current = page;
  pagination.pageSize = pageSize;
  loadStudents();
};

const handleClassChange = () => {
  pagination.current = 1;
  loadStudents();
};

const handleSearch = () => {
  pagination.current = 1;
  loadStudents();
};

const resetForm = () => {
  formState.id = undefined;
  formState.name = '';
  formState.gender = '男';
  formState.birthDate = null;
  formState.classId = 0;
  formState.parentName = '';
  formState.parentPhone = '';
};

const showAddModal = () => {
  isEdit.value = false;
  resetForm();
  modalVisible.value = true;
};

const handleEdit = (record: Student) => {
  isEdit.value = true;
  formState.id = record.id;
  formState.name = record.name;
  formState.gender = record.gender || '男';
  formState.birthDate = record.birthDate ? dayjs(record.birthDate).format('YYYY-MM-DD') : null;
  formState.classId = record.classId;
  formState.parentName = record.parentName || '';
  formState.parentPhone = record.parentPhone || '';
  modalVisible.value = true;
};

const handleModalOk = async () => {
  try {
    await formRef.value?.validate();
    submitting.value = true;

    if (isEdit.value && formState.id) {
      await updateStudent(formState.id, {
        name: formState.name,
        gender: formState.gender,
        birthDate: formState.birthDate,
        classId: formState.classId,
        parentName: formState.parentName,
        parentPhone: formState.parentPhone,
      });
      message.success('更新成功');
    } else {
      await createStudent({
        name: formState.name,
        gender: formState.gender,
        birthDate: formState.birthDate,
        classId: formState.classId,
        parentName: formState.parentName,
        parentPhone: formState.parentPhone,
      });
      message.success('添加成功');
    }

    modalVisible.value = false;
    loadStudents();
  } catch (error: any) {
    if (error?.response?.data?.message) {
      message.error(error.response.data.message);
    }
  } finally {
    submitting.value = false;
  }
};

const handleModalCancel = () => {
  modalVisible.value = false;
  formRef.value?.resetFields();
};

const handleDelete = async (id: number) => {
  try {
    await deleteStudent(id);
    message.success('删除成功');
    loadStudents();
  } catch (error: any) {
    message.error(error?.response?.data?.message || '删除失败');
  }
};

// ==================== 批量导入相关 ====================

const importModalVisible = ref(false);
const importFile = ref<File | null>(null);
const importDefaultClassId = ref<number | undefined>();
const importing = ref(false);
const importResult = ref<ImportResult | null>(null);
const templateNotes = ref<string[]>([
  '姓名为必填项',
  '性别可选：男/女，默认为男',
  '出生日期格式：YYYY-MM-DD',
  '班级ID为必填项，可在班级管理中查看',
  '家长姓名和家长电话为选填项',
]);

const showImportModal = () => {
  importFile.value = null;
  importDefaultClassId.value = undefined;
  importResult.value = null;
  importModalVisible.value = true;
};

const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  const isValidType = [
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    'application/vnd.ms-excel',
    'text/csv',
  ].includes(file.type) || file.name.endsWith('.xlsx') || file.name.endsWith('.xls') || file.name.endsWith('.csv');

  if (!isValidType) {
    message.error('只能上传 Excel 或 CSV 文件！');
    return false;
  }

  importFile.value = file;
  importResult.value = null;
  return false;
};

const downloadTemplate = async () => {
  try {
    const templateData = await getStudentImportTemplate();
    const csvContent = [
      templateData.headers.join(','),
      templateData.example.join(','),
    ].join('\n');

    const BOM = '\uFEFF';
    const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = '学生导入模板.csv';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
    message.success('模板下载成功');
  } catch (error) {
    const defaultHeaders = ['姓名', '性别', '出生日期', '班级ID', '家长姓名', '家长电话'];
    const defaultExample = ['张小明', '男', '2020-01-15', '1', '张三', '13800138000'];
    const csvContent = [
      defaultHeaders.join(','),
      defaultExample.join(','),
    ].join('\n');

    const BOM = '\uFEFF';
    const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = '学生导入模板.csv';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
    message.success('模板下载成功');
  }
};

const handleImport = async () => {
  if (!importFile.value) {
    message.warning('请先选择要导入的文件');
    return;
  }

  importing.value = true;
  importResult.value = null;

  try {
    const result = await importStudents(importFile.value, importDefaultClassId.value);
    importResult.value = result;

    if (result.success > 0) {
      loadStudents();
      loadClasses();
    }
  } catch (error: any) {
    message.error(error?.response?.data?.message || '导入失败');
  } finally {
    importing.value = false;
  }
};

// ==================== 学生调班相关 ====================

const transferModalVisible = ref(false);
const transferSubmitting = ref(false);
const selectedTransferStudent = ref<Student | null>(null);
const transferTargetClassId = ref<number | undefined>();
const transferReason = ref('');
const transferHistory = ref<StudentClassHistory[]>([]);

const handleTransfer = async (student: Student) => {
  selectedTransferStudent.value = student;
  transferTargetClassId.value = undefined;
  transferReason.value = '';
  transferModalVisible.value = true;

  // 加载调班历史
  try {
    transferHistory.value = await getStudentClassHistory(student.id);
  } catch (error) {
    console.error('Failed to load transfer history:', error);
    transferHistory.value = [];
  }
};

const handleTransferSubmit = async () => {
  if (!transferTargetClassId.value) {
    message.warning('请选择目标班级');
    return;
  }

  if (transferTargetClassId.value === selectedTransferStudent.value?.classId) {
    message.warning('目标班级与当前班级相同');
    return;
  }

  transferSubmitting.value = true;
  try {
    const dto: TransferStudentDto = {
      toClassId: transferTargetClassId.value,
      reason: transferReason.value || undefined,
    };
    await transferStudent(selectedTransferStudent.value!.id, dto);
    message.success('调班成功');
    transferModalVisible.value = false;
    loadStudents();
    loadClasses();
  } catch (error: any) {
    message.error(error?.response?.data?.message || '调班失败');
  } finally {
    transferSubmitting.value = false;
  }
};

const formatDate = (date: string) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  });
};

onMounted(() => {
  loadStudents();
  loadClasses();
});
</script>

<style scoped>
.filters :deep(.ant-select-selector),
.filters :deep(.ant-input-affix-wrapper) {
  border-radius: 12px;
  border: 2px solid #F0F0F0;
}
.filters :deep(.ant-select-selector:hover),
.filters :deep(.ant-input-affix-wrapper:hover) {
  border-color: #f093fb;
}

.card-actions :deep(.ant-btn-link) {
  padding: 4px 8px;
  height: auto;
}

.upload-area :deep(.ant-upload-drag) {
  border-radius: 12px;
  border: 2px dashed #E0E0E0;
  background: #FAFAFA;
}
.upload-area :deep(.ant-upload-drag:hover) {
  border-color: #f093fb;
}

</style>