<template>
  <el-row v-if="!showQuestionList" :gutter="20" type="flex" justify="space-between">
    <el-col :span="20" class="box">
      <el-card class="box-card" v-if="this.examInfo">
        <template #header>
          <div class="card-header" style="font-size: 20px">
            评测「{{ this.examInfo.examName }}」
          </div>
        </template>
        <el-row>评测ID: {{ this.examInfo.examId }}</el-row>
        <el-row>
          <el-col :span="12">
            评测邀请码：{{
              this.examInfo.inviteCode ? this.examInfo.inviteCode : '无'
            }}
          </el-col>
          <el-col :span="12">
            当前难度值：{{ this.examInfo.difficulty }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            开始时间：{{ this.examInfo.startTime }}
          </el-col>
          <el-col :span="12">
            结束时间：{{ this.examInfo.endTime }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            职位：{{ this.examInfo.position }}
          </el-col>
          <el-col :span="12">
            技能点：{{ this.examInfo.skills }}
          </el-col>
        </el-row>
        <el-row>备注：{{
            this.examInfo.comment ? this.examInfo.comment : '无'
          }}
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="20" class="box">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span style="font-size: 20px">试卷题目</span>
            <el-button
                v-if="hide"
                @click="onClickHideButton()"
                round
                style="float: right"
            >
              <el-icon>
                <ArrowUp/>
              </el-icon>
            </el-button>
            <el-button
                v-else
                @click="onClickShowButton()"
                round
                style="float: right"
            >
              <el-icon>
                <ArrowDown/>
              </el-icon>
            </el-button>
            <!--          响应事件是？-->
            <el-button
                v-if="!fetching"
                type="primary"
                style="float: right"
                :disabled="this.examState==='FINISHED'"
                @click="showQuestionList = true"
            >
              调整试题
            </el-button>
          </div>
        </template>
        <div v-if="!fetching">
          <exam-questions-info
              v-show="showQuestionInfo"
              :exam-questions="examQuestions"
          ></exam-questions-info>
        </div>
        <div v-else v-loading="loading"></div>
      </el-card>
    </el-col>
    <el-col :span="20" class="box">
      <el-card class="box-card">
        <span style="font-size: 20px">评测名单</span>
        <el-table :data="joinedUsers" style="width: 100%">
          <el-table-column type="index" width="100"/>
          <el-table-column prop="name" label="用户名" width="360"/>
          <el-table-column prop="email" label="邮箱" width="360"/>
          <el-table-column prop="score" label="成绩"/>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
  <question-list
      v-if="showQuestionList"
      :sample-questions="this.examQuestions"
      :question-and-score="this.examQuestionAndScore"
      :exam-id="this.examInfo.examId"
      :from-edit-page="false"
      @updatePaper="updatePaper"
      @leave="showQuestionList = false"
  ></question-list>
</template>

<script>
import examQuestionsInfo from "@/views/EvalPage/ExamQuestionsInfo.vue";
import questionList from "@/views/EvalPage/QuestionList.vue";
import dayjs from "dayjs";

export default {
  name: "teacherExamDetails",
  components: {
    examQuestionsInfo,
    questionList
  },
  data() {
    return {
      examId: 0,
      fetching: false,
      examInfo: [],
      examQuestions: [],
      joinedUsers: [],
      loading: true,
      hide: true,
      showQuestionInfo: true,
      showQuestionList: false,
      examQuestionAndScore: {},
      examState: ""
    };
  },
  computed: {

  },


  created() {
    this.examId = this.$route.params.examId;
    this.$apis.getExamById(this.examId).then(_res => {
      this.examInfo = _res.data.data.result;
      this.examInfo.skills = this.examInfo.skills.toString();
      this.examState=this.computeExamStateText(this.examInfo.startTime,this.examInfo.endTime);


    });
  },
  mounted() {
    this.getExamQuestions();
    this.getExamJoiners();
  },


  methods: {
    onClickHideButton() {
      this.showQuestionInfo = false;
      this.hide = false;
    },

    onClickShowButton() {
      this.showQuestionInfo = true;
      this.hide = true;
    },

    onClickChangePaperButton() {
      this.showQuestionList=true;
    },

    updatePaper(){
      this.showQuestionList = false;

      this.getExamQuestions();
    },

    getExamQuestions() {
      this.$apis.getExamQuestions(this.examId)
          .then(_res => {
            this.fetching = true;
            this.examQuestionAndScore = _res.data.data.result.questionAndScore;
            let questionsPromises = [];
            let questionsIds = Object.entries(_res.data.data.result.questionAndScore);
            questionsIds.forEach((v, ind) => {
              questionsPromises[ind] = this.$apis.getQuestionInfo(v[0]);
            });

            Promise.all(questionsPromises)
                .then((reps) => {
                  this.examQuestions = reps.map((value) => {
                    return value.data.data.result;
                  });
                })
                .catch()
                .finally(() => {
                  this.fetching = false;
                });
          })
          .catch(() => {
            this.$router.push({
              name: "edit-exams",
              params: {
                examId: this.examId
              }
            });
          });
    },

    getExamJoiners(){
      this.$apis.getExamJoinedUsers(this.examId).then(_res => {
        this.joinedUsers = _res.data.data.result;
        this.$apis.getAllReportByExamId(this.examId).then(res => {
          this.joinedUsers.forEach((user) => {
            res.data.data.result.forEach((report) => {
              if (report.userId === user.id) {
                user["score"]=report.score;
              }
            });
          });
        });
      });
    },


    computeExamStateText(startTime, endTime) {
      const TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
      const now = dayjs();
      const formattedStartTime = dayjs(startTime, TIME_FORMAT);
      const formattedEndTime = dayjs(endTime, TIME_FORMAT);

      if (formattedEndTime < now) {
        return "FINISHED";
      }
      if (formattedStartTime > now) {
        return "NOT_STARTED";
      }
      return "RUNNING";
    },

  },

};
</script>

<style scoped>
.box {
  height: 80%;
  /*overflow-y: auto;*/
  display: flex;
  flex-direction: column;
  margin-left: 150px;
}

.el-card {
  margin-bottom: 20px;
}
</style>