
<template>
  <div class="live-answering-question" v-loading="isLoading">
    <QuestionsList
      style="height: 100%"
      :questions="exercises"
      @flag="flagListChanged"
      @answers="userAnswerChanged"
      :mode="mode"
      :paperStyle="0"
      ref="questionList"
      @evalChanged="evalListChanged"
    ></QuestionsList>
    <div v-if="viewModel" class="course-exercise-floor">
      <el-button type="primary" @click="exerciseAgin">再次练习</el-button>
      <el-button @click="backLiveRoom">返回课程</el-button>
    </div>
  </div>
</template>

<script>
import {
  getLiveQuestionAPI,
  liveAnsweringQuestionAPI
} from '@/api/online-teaching/live-student'
import QuestionsList from '@/views/assessment-evaluation/online-test/begin-online-exam/index.vue'

export default {
  components: {
    QuestionsList
  },
  data () {
    return {
      liveId: 0,
      courseInfo: {},
      exercises: undefined,
      model: 0,
      viewModel: false,
      isLoading: false,
      createTime: null
    }
  },
  async created () {
    this.createTime = new Date()
    this.isLoading = true

    this.liveId = this.$route.query.liveId
    if (+this.liveId) {
      await this.getExerciseList()
    } else {
      this.isShowEveal = true
      this.isLoading = false
    }
  },
  mounted () {
    this.createTime = new Date()

    this.$nextTick(() => {
      this.$refs.questionList.$refs.AQCard &&
        (this.$refs.questionList.$refs.AQCard.style.display = 'none')
    })
  },
  methods: {
    async getExerciseList () {
      const { data } = await getLiveQuestionAPI(this.liveId)
      this.exercises = data

      this.$nextTick(() => {
        this.$refs.questionList.questions = this.exercises.map((q) => {
          q.info.typeId = q.info.type
          q.info.type = q.info.typeInfo.name
          q.info.classify = q.info.classifyId
          q.info.element = q.info.typeInfo.element
          q.info.score = q.score
          if (this.$refs.questionList.mode === 1) {
            q.info.userAnswer = q.answer?.userAnswer || ['未回答']
            this.viewModel = true
          } else {
            this.viewModel = false
          }
          return q.info
        })
        this.$refs.questionList.cancelThisExamBtnHandler = this.exitExercises
        this.$refs.questionList.submitExam = this.submitExam
        //  this.$refs.questionList.submitExam = this.submitExam
        this.isLoading = false
      })
    },
    exitExercises () {
      return this.$confirm('是否退出本次练习', '提醒', {
        type: 'warning'
      })
        .then((res) => {
          window.opener = null
          window.close()
        })
        .catch((_) => {})
    },
    async submitExam () {
      this.isLoading = true
      const answers = this.$refs.questionList.answers
      await liveAnsweringQuestionAPI({
        liveId: this.liveId,
        answerInfo: answers,
        createTime: this.createTime
      })
      this.$refs.questionList.questions = []
      this.$refs.questionList.mode = 1
      this.getExerciseList()
      this.isLoading = false
    },
    exerciseAgin () {
      this.createTime = new Date()
      this.$refs.questionList.mode = 0
      this.getExerciseList()
    },
    backLiveRoom () {
      window.opener = null
      window.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.live-answering-question {
  height: 100%;
  overflow: hidden;
}
.course-exercise-floor {
  width: 100%;
  height: 50px;
  position: sticky;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  > :first-child {
    margin-right: 50px;
  }
}
</style>
