/* 学生管理：增删改查 + 按学号/姓名/班级/顾问筛选
   注意：学号是后端按班级开课时间生成的，表单里不给填，新增成功后提示出来 */

window.PAGES.push({
  key: 'students',
  title: '学生管理',
  sub: '学生基本信息，学号由班级开课时间自动生成',
  group: '数据管理',
  icon: 'student',

  component: {
    name: 'StudentsPage',
    template: `
      <div>
        <div class="card">
          <div class="filters">
            <el-input v-model="filter.stu_no" placeholder="学号（模糊）" clearable style="width:150px" @keyup.enter="load" />
            <el-input v-model="filter.stu_name" placeholder="姓名（模糊）" clearable style="width:150px" @keyup.enter="load" />
            <el-select v-model="filter.class_id" placeholder="全部班级" clearable style="width:210px">
              <el-option v-for="c in classes" :key="c.class_id" :label="classLabel(c.class_id)" :value="c.class_id" />
            </el-select>
            <el-select v-model="filter.advisor_id" placeholder="全部顾问" clearable style="width:160px">
              <el-option v-for="a in advisors" :key="a.adv_id" :label="a.adv_name" :value="a.adv_id" />
            </el-select>
            <el-button type="primary" @click="load">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </div>

          <div class="card-head">
            <div>
              <div class="card-title">学生列表</div>
              <div class="card-hint">共 {{ rows.length }} 人</div>
            </div>
            <div class="card-tools">
              <el-button type="primary" @click="openCreate">＋ 新增学生</el-button>
            </div>
          </div>

          <el-table :data="pagedRows" v-loading="loading" border stripe row-key="stu_no"
                    :header-cell-style="{ background: '#F8FAFC' }">
            <el-table-column prop="stu_no" label="学号" width="120" fixed />
            <el-table-column prop="stu_name" label="姓名" width="100" />
            <el-table-column label="班级" width="180" show-overflow-tooltip>
              <template #default="{ row }">{{ className(row.class_id) }}</template>
            </el-table-column>
            <el-table-column label="顾问" width="100">
              <template #default="{ row }">{{ advisorName(row.advisor_id) }}</template>
            </el-table-column>
            <el-table-column label="性别" width="70">
              <template #default="{ row }">
                <el-tag v-if="row.stu_gender" size="small"
                        :type="row.stu_gender === '男' ? 'primary' : 'danger'" effect="light">
                  {{ row.stu_gender }}
                </el-tag>
                <span v-else class="muted">—</span>
              </template>
            </el-table-column>
            <el-table-column prop="stu_age" label="年龄" width="70">
              <template #default="{ row }">{{ dash(row.stu_age) }}</template>
            </el-table-column>
            <el-table-column prop="native_place" label="籍贯" width="100">
              <template #default="{ row }">{{ dash(row.native_place) }}</template>
            </el-table-column>
            <el-table-column prop="graduate_school" label="毕业学校" min-width="140" show-overflow-tooltip>
              <template #default="{ row }">{{ dash(row.graduate_school) }}</template>
            </el-table-column>
            <el-table-column prop="major" label="专业" width="120" show-overflow-tooltip>
              <template #default="{ row }">{{ dash(row.major) }}</template>
            </el-table-column>
            <el-table-column prop="edu" label="学历" width="80">
              <template #default="{ row }">{{ dash(row.edu) }}</template>
            </el-table-column>
            <el-table-column label="入学时间" width="110">
              <template #default="{ row }">{{ dash(fmtDate(row.in_time)) }}</template>
            </el-table-column>
            <el-table-column label="毕业时间" width="110">
              <template #default="{ row }">{{ dash(fmtDate(row.out_time)) }}</template>
            </el-table-column>
            <el-table-column label="操作" width="140" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="openEdit(row)">编辑</el-button>
                <el-button link type="danger" @click="remove(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pager">
            <el-pagination background layout="total, sizes, prev, pager, next"
                           :total="rows.length" v-model:current-page="page"
                           v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]" />
          </div>
        </div>

        <el-dialog v-model="dialog" :title="editing ? '编辑学生' : '新增学生'" width="720px" destroy-on-close>
          <el-form ref="formRef" :model="form" :rules="rules" label-width="88px">
            <div class="form-grid">
              <el-form-item label="班级" prop="class_id" class="span2">
                <el-select v-model="form.class_id" placeholder="请选择班级（学号按开班时间生成）" style="width:100%">
                  <el-option v-for="c in classes" :key="c.class_id" :label="classLabel(c.class_id)" :value="c.class_id" />
                </el-select>
              </el-form-item>
              <el-form-item label="姓名" prop="stu_name">
                <el-input v-model="form.stu_name" placeholder="学生姓名" maxlength="30" />
              </el-form-item>
              <el-form-item label="顾问">
                <el-select v-model="form.advisor_id" placeholder="可不选" clearable style="width:100%">
                  <el-option v-for="a in advisors" :key="a.adv_id" :label="a.adv_name" :value="a.adv_id" />
                </el-select>
              </el-form-item>
              <el-form-item label="性别">
                <el-select v-model="form.stu_gender" placeholder="可不选" clearable style="width:100%">
                  <el-option v-for="g in GENDER_OPTIONS" :key="g" :label="g" :value="g" />
                </el-select>
              </el-form-item>
              <el-form-item label="年龄">
                <el-input-number v-model="form.stu_age" :min="0" :max="100" controls-position="right" style="width:100%" />
              </el-form-item>
              <el-form-item label="籍贯">
                <el-input v-model="form.native_place" placeholder="如 广东 深圳" maxlength="50" />
              </el-form-item>
              <el-form-item label="学历">
                <el-select v-model="form.edu" placeholder="可不选" clearable filterable allow-create style="width:100%">
                  <el-option v-for="e in EDU_OPTIONS" :key="e" :label="e" :value="e" />
                </el-select>
              </el-form-item>
              <el-form-item label="毕业学校" class="span2">
                <el-input v-model="form.graduate_school" placeholder="毕业学校" maxlength="128" />
              </el-form-item>
              <el-form-item label="专业" class="span2">
                <el-input v-model="form.major" placeholder="所学专业" maxlength="64" />
              </el-form-item>
              <el-form-item label="入学时间">
                <el-date-picker v-model="form.in_time" type="date" value-format="YYYY-MM-DD"
                                placeholder="选择日期" style="width:100%" />
              </el-form-item>
              <el-form-item label="毕业时间">
                <el-date-picker v-model="form.out_time" type="date" value-format="YYYY-MM-DD"
                                placeholder="选择日期" style="width:100%" />
              </el-form-item>
            </div>
            <el-alert v-if="!editing" type="info" :closable="false" show-icon
                      title="学号不需要填写：后端会按所选班级的开课时间生成" />
          </el-form>
          <template #footer>
            <el-button @click="dialog = false">取消</el-button>
            <el-button type="primary" :loading="saving" @click="submit">保存</el-button>
          </template>
        </el-dialog>
      </div>
    `,

    setup() {
      const loading = ref(false);
      const saving = ref(false);
      const rows = ref([]);
      const classes = ref([]);
      const advisors = ref([]);
      const dialog = ref(false);
      const editing = ref(null);
      const formRef = ref(null);

      const filter = ref({ stu_no: '', stu_name: '', class_id: null, advisor_id: null });
      const page = ref(1);
      const pageSize = ref(10);

      const emptyForm = () => ({
        class_id: null, advisor_id: null, stu_name: '', native_place: '',
        graduate_school: '', major: '', in_time: null, out_time: null,
        edu: null, stu_age: null, stu_gender: null,
      });
      const form = ref(emptyForm());

      // 学号是后端生成的，所以班级必选；其余字段都可空
      const rules = {
        class_id: [{ required: true, message: '请选择班级', trigger: 'change' }],
        stu_name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
      };

      // 表格是客户端分页：接口本身没有分页参数，一次把命中的都取回来
      const pagedRows = computed(() => {
        const start = (page.value - 1) * pageSize.value;
        return rows.value.slice(start, start + pageSize.value);
      });

      const load = async () => {
        loading.value = true;
        try {
          rows.value = await StudentApi.list({
            stu_no: filter.value.stu_no,
            stu_name: filter.value.stu_name,
            class_id: filter.value.class_id,
            advisor_id: filter.value.advisor_id,
          });
          page.value = 1;
        } catch (e) { toastErr(e); }
        finally { loading.value = false; }
      };

      const reset = () => {
        filter.value = { stu_no: '', stu_name: '', class_id: null, advisor_id: null };
        load();
      };

      const openCreate = () => {
        editing.value = null;
        form.value = emptyForm();
        dialog.value = true;
      };

      const openEdit = (row) => {
        editing.value = row.stu_no;
        form.value = {
          class_id: row.class_id, advisor_id: row.advisor_id, stu_name: row.stu_name,
          native_place: row.native_place, graduate_school: row.graduate_school,
          major: row.major, in_time: fmtDate(row.in_time) || null,
          out_time: fmtDate(row.out_time) || null, edu: row.edu,
          stu_age: row.stu_age, stu_gender: row.stu_gender,
        };
        dialog.value = true;
      };

      const submit = async () => {
        if (!formRef.value) return;
        try { await formRef.value.validate(); } catch (e) { return; }
        saving.value = true;
        try {
          // pruneEmpty：没填的字段不下发，避免把可空字段写成空字符串
          const payload = pruneEmpty(form.value);
          if (editing.value) {
            await StudentApi.update(editing.value, payload);
            toastOk('修改成功');
          } else {
            const created = await StudentApi.create(payload);
            toastOk('新增成功，学号：' + created.stu_no);
          }
          Cache.invalidate('students');
          dialog.value = false;
          await load();
        } catch (e) { toastErr(e); }
        finally { saving.value = false; }
      };

      const remove = async (row) => {
        try {
          await ElementPlus.ElMessageBox.confirm(
            `确定删除学生「${row.stu_name || row.stu_no}」吗？`,
            '删除确认', { type: 'warning', confirmButtonText: '确定删除', cancelButtonText: '取消' });
        } catch (e) { return; }
        try {
          await StudentApi.remove(row.stu_no);
          toastOk('删除成功');
          Cache.invalidate('students');
          await load();
        } catch (e) { toastErr(e); }
      };

      // 班级/顾问下拉的数据先准备好，再拉学生列表
      onMounted(async () => {
        try {
          [classes.value, advisors.value] = await Promise.all([
            Cache.loadClasses(), Cache.loadAdvisors(),
          ]);
        } catch (e) { toastErr(e); }
        load();
      });

      return {
        loading, saving, rows, classes, advisors, dialog, editing, formRef,
        filter, form, rules, page, pageSize, pagedRows,
        load, reset, openCreate, openEdit, submit, remove,
        GENDER_OPTIONS, EDU_OPTIONS, dash, fmtDate, className, advisorName, classLabel,
      };
    },
  },
});