<template>
  <div class="app-container">
    <div class="box">
      <div class="filter">
        <el-form :model="form" ref="formRef" :inline="true">
          <el-form-item label="班级" :prop="form.selectClassId">
            <el-select
              v-model="form.selectClassId"
              placeholder="请选择班级"
              clearable
              style="width: 200px"
              :disabled="isExtracting"
              @change="changeClass"
            >
              <el-option
                v-for="op in classOption"
                :key="op.id"
                :label="op.className"
                :value="op.id"
              /> </el-select
          ></el-form-item>
          <el-form-item v-if="form.selectClassId">
            <el-button
              type="primary"
              @click="clickExtract"
              :disabled="isExtracting"
              >随机抽取</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div v-loading="loading" class="class">
        <span
          :class="{ class_student: true, active: activeId === i.stuId }"
          v-for="i in classStudents"
          :key="i.stuId"
          >{{ i.stuName }}</span
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { getClassList, getStudentList } from "@/api";
import { onUnmounted } from "vue";
const { proxy } = getCurrentInstance();
const form = ref({
  selectClassId: "",
});
const classOption = ref([]);

const classStudents = ref([]);
const loading = ref(false);
const activeId = ref(""); // 抽中学生
// 随机抽取
const timer = ref(null);
const delayer = ref(null);
const isExtracting = ref(false); // 正在抽取
const randomIndex = () => {
  const index = Math.floor(Math.random() * classStudents.value.length);
  return index;
};
function clickExtract() {
  if (!form.value.selectClassId) {
    proxy.$modal.msgError("请选择班级");
    return;
  }
  if (classStudents.value.length === 0) {
    proxy.$modal.msgWarning("该班级无学生");
    return;
  }
  if (delayer.value) {
    clearInterval(delayer.value);
    activeId.value = "";
  }
  let delay = 120;
  isExtracting.value = true;
  delayer.value = setInterval(() => {
    activeId.value = classStudents.value[randomIndex()].stuId;
    delay += 30;
  }, delay);

  timer.value = setTimeout(() => {
    clearInterval(delayer.value);
    isExtracting.value = false;
  }, 2000);
}
async function init() {
  try {
    const res = await getClassList();
    classOption.value = res.data;
    form.value.selectClassId = res.data.length > 0 ? res.data[0].id : "";
    await nextTick();
    initClassStudents(form.value.selectClassId);
  } catch (err) {
    console.log(err);
  }
}
// 获取班级学生
async function initClassStudents(classId) {
  loading.value = true;
  try {
    const res = await getStudentList({ classIdList: [classId] });
    classStudents.value = res.rows;
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
}
const changeClass = (val) => {
  activeId.value = "";
  initClassStudents(val);
};
onMounted(() => {
  init();
});
onUnmounted(() => {
  clearInterval(delayer.value);
  clearTimeout(timer.value);
});
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 4px;

  .class {
    &_student {
      display: inline-block;
      padding: 12px 24px;
      margin: 12px 18px 0 0;
      border: 1px solid #2e87a9;
      background-color: #30c0b4;
      color: #fff;
      font-size: 24px;
    }
    .active {
      background-color: #e54c5e;
    }
  }
}
</style>
