<template>
  <el-dialog
    class="modify-course-simple"
    :visible.sync="modalIsShow"
    title="添加课程"
    top="10px"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @open="visibleChange"
  >
    <div class="tips-markedness mb-2">
      <p>
        请先选择开课学院后点击查询按钮，在查询结果列表里勾上需要添加的课程，再点击确认按钮。
      </p>
    </div>
    <!-- select -->
    <div class="tab-body">
      <select-simple-course
        ref="SelectSimpleCourse"
        v-model="selectedCourseIds"
        :exam-id="course.examId"
      ></select-simple-course>
    </div>
    <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 { batchAddCourseSimple } from "../../api";
import SelectSimpleCourse from "./SelectSimpleCourse.vue";

export default {
  name: "modify-course-simple",
  components: { SelectSimpleCourse },
  props: {
    course: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      isSubmit: false,
      curTab: "select",
      selectedCourseIds: [],
    };
  },
  methods: {
    visibleChange() {
      this.selectedCourseIds = [];
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async submit() {
      if (!this.selectedCourseIds.length) {
        this.$message.error("请选择课程");
        return;
      }

      if (this.isSubmit) return;
      this.isSubmit = true;
      const data = await batchAddCourseSimple({
        courseIds: this.selectedCourseIds,
        examId: this.course.examId,
      }).catch(() => {});
      this.isSubmit = false;

      if (!data) return;

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