<template>
  <el-dialog
    class="modify-student-simple"
    :visible.sync="modalIsShow"
    title="添加学生"
    top="10px"
    width="900px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    destroy-on-close
  >
    <!-- select -->
    <select-simple-student
      ref="SelectSimpleStudent"
      v-model="selectedStudentIds"
      :exam-id="clazz.examId"
    ></select-simple-student>

    <div slot="footer">
      <el-button type="primary" :disabled="isSubmit" @click="submit"
        >确认</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { batchAddStudentSimple } from "../../api";
import SelectSimpleStudent from "./SelectSimpleStudent.vue";

export default {
  name: "modify-student-simple",
  components: { SelectSimpleStudent },
  props: {
    clazz: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      isSubmit: false,
      selectedStudentIds: [],
    };
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async submit() {
      if (!this.selectedStudentIds.length) {
        this.$message.error("请选择学生");
        return;
      }

      if (this.isSubmit) return;
      this.isSubmit = true;
      const data = await batchAddStudentSimple({
        teachClazzId: this.clazz.id,
        basicExamStudentIdList: this.selectedStudentIds,
      }).catch(() => {});
      this.isSubmit = false;

      if (!data) return;

      this.$message.success("添加成功！");
      this.selectedStudentIds = [];
      this.$refs.SelectSimpleStudent.clearSelection();
      this.$emit("modified");
      this.cancel();
    },
  },
};
</script>
