<template>
  <div class="course-exercise" 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="$router.replace({ path: '/online-course/my-course' })">返回课程</el-button>

    </div>
  </div>
</template>

<script>
import QuestionsList from '@/views/assessment-evaluation/online-test/begin-online-exam/index.vue'
import {
  getOneRecordExercisesAPI,
  submitAnswerAPI
} from '@/api/online-course/my-course'

export default {
  components: {
    QuestionsList
  },
  data () {
    return {
      recordId: 0,
      courseInfo: {},
      exercises: undefined,
      model: 0,
      viewModel: false,
      isLoading: false,
      createTime: null
    }
  },
  async activated () {
    this.createTime = new Date()
    this.recordId = this.$route.query.recordId
    this.viewModel = this.$route.query.viewer
    if (this.viewModel) {
      this.$refs.questionList.mode = 1
    }
    if (+this.recordId) {
      await this.getExerciseInfo()
    } else {
      this.isShowEveal = true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.questionList.$refs.AQCard &&
        (this.$refs.questionList.$refs.AQCard.style.display = 'none')
    })
  },
  methods: {
    async getExerciseInfo () {
      this.isLoading = true
      const { data } = await getOneRecordExercisesAPI(this.recordId)

      this.courseInfo = data
      this.exercises = this.courseInfo.exercise
      this.$set(this, 'exercises', data.exercise)
      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 || ['未回答']
          }
          return q.info
        })
        this.$refs.questionList.cancelThisExamBtnHandler =
          this.cancelThisExamBtnHandler
        this.$refs.questionList.submitExam = this.submitExam
        //  this.$refs.questionList.submitExam = this.submitExam
        this.isLoading = false
      })
      if (this.$refs.questionList.mode === 1) {
        this.viewModel = true
      } else {
        this.viewModel = false
      }
      // this.exercises =
    },
    async submitExam () {
      this.isLoading = true

      const answers = this.$refs.questionList.answers
      await submitAnswerAPI({
        coureseId: this.courseInfo.courseId,
        recordId: this.recordId,
        answer: answers,
        createTime: this.createTime
      })
      this.$refs.questionList.questions = []
      this.$refs.questionList.mode = 1
      this.getExerciseInfo()
      this.isLoading = false
    },
    cancelThisExamBtnHandler () {
      if (this.mode === 3) {
        return this.$router.go(-1)
      }
      return this.$confirm('未完成试卷，请补充完整或退出练习！', '警告', {
        type: 'error'
      })
        .then((res) => {
          this.$router.replace({ path: '/online-course/my-course' })
        })
        .catch((_) => {})
    },
    exerciseAgin () {
      this.createTime = new Date()
      this.$refs.questionList.mode = 0
      this.getExerciseInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
.course-exercise {
  height: 100%;
  overflow: hidden;
  // padding-bottom: 50px;
}
.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>
