<template>
  <el-dialog
    class="select-exam"
    :visible.sync="modalIsShow"
    title="历次学情"
    top="4vh"
    width="90%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    :lock-scroll="false"
    @open="visibleChange"
  >
    <div class="exam-list">
      <p
        v-for="exam in exams"
        :key="exam.examCode"
        :class="[
          'exam-item',
          { 'exam-item-act': exam.examCode === curExamCode }
        ]"
        @click="selectExam(exam)"
      >
        {{ exam.name }}
      </p>
    </div>
    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
export default {
  name: "select-exam",
  props: {
    selectedExam: {
      type: String
    },
    exams: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      modalIsShow: false,
      curExamCode: ""
    };
  },
  methods: {
    visibleChange() {
      this.curExamCode = this.selectedExam;
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    selectExam(exam) {
      this.curExamCode = exam.examCode;
      this.$emit("modified", exam);
      this.cancel();
    }
  }
};
</script>
