<template>
  <div class="multiple-exam">
    <div class="multiple-exam-header" v-if="exam.can_more">
      <div class="multiple-exam-header__history" v-if="historyScoreText">历史分数：{{ historyScoreText }}</div>
      <el-button type="primary" plain :disabled="!exam.can_next" @click="onNextExam">再次考试</el-button>
      <el-button plain :disabled="!maxScoreExamId" @click="onViewMaxScoreExam">查看历史最高分数试卷</el-button>
    </div>
    <container :title="exam.title" v-loading="loading">
      <template v-slot:header-aside v-if="isExamComplete">
        {{ $t('viewerWork.fraction') }}：{{ exam.score.total }}{{ $t('viewerWork.fractionUnit') }}
      </template>
      <div class="exam">
        <!-- 批改中 -->
        <div class="no-exam" v-if="isSubmited && !isExamComplete">{{ $t('viewerWork.examSubmitedTips') }}</div>
        <!-- 考试试题 -->
        <div class="exam-form" v-else>
          <el-form :disabled="isSubmited">
            <template v-for="items in questions">
              <exam-item
                v-for="(item, index) in items"
                :index="index"
                :type="item.type"
                :data="item"
                :value="item.formModel"
                :disabled="isSubmited"
                :key="item.id"
              ></exam-item>
            </template>
            <div class="exam-buttons">
              <el-tooltip effect="dark" :content="$t('viewerWork.examSubmitButtonTips')" placement="right">
                <el-button type="primary" :loading="submitLoading" @click="onSubmit">{{ submitText }}</el-button>
              </el-tooltip>
            </div>
          </el-form>
        </div>
      </div>
    </container>
  </div>
</template>

<script>
import Base64 from 'Base64'
// components
import Container from '../common/container.vue'
import ExamItem from './examItem.vue'
// api
import * as api from '../../api'

// 章节测试题
export default {
  name: 'ChapterMultipleExam',
  components: { Container, ExamItem },
  props: {
    // 当前选中的章节
    chapter: { type: Object, default: () => ({}) },
    // 课程详情接口返回的数据
    data: { type: Object, default: () => ({}) }
  },
  data() {
    return {
      loading: false,
      exam: {},
      questions: [],
      autoSubmitTimer: null, // 自动提交定时器
      submitLoading: false,
      messageInstance: null
    }
  },
  computed: {
    // 学期ID
    sid() {
      return this.$route.params.sid
    },
    // 课程ID
    cid() {
      return this.$route.params.cid
    },
    // 当前页面的ID
    pid() {
      return this.$route.params.id
    },
    // 是否是考试时间
    isExamTime() {
      if (!this.exam.dead_line) return true
      // 大于开始时间，小于结束时间
      const endTime = +new Date(this.exam.dead_line)
      const currentTime = new Date().getTime()
      return currentTime < endTime
    },
    // 考试按钮
    startExamButtonText() {
      return this.isExamTime ? this.$t('viewerWork.examStartButtonText') : this.$t('viewerWork.examEndButtonText')
    },
    // 考试完成
    isExamComplete() {
      // 考试完成，批改完成并且公布成绩
      return this.exam.is_published === 1 && this.exam.type === 2
    },
    // 是否提交
    isSubmited() {
      return this.exam.type === 1 || this.exam.type === 2
    },
    // 提交按钮文本
    submitText() {
      return this.isSubmited ? this.$t('viewerWork.submitedText') : this.$t('viewerWork.submitText')
    },
    // 历史分数
    historyScoreText() {
      if (!this.exam.history) return
      return this.exam.history.map(item => item.score).join('、')
    },
    // 最高分试卷ID
    maxScoreExamId() {
      if (!this.exam.history) return
      let maxScore = 0
      let maxItem = null
      this.exam.history.forEach(item => {
        if (item.score >= maxScore) {
          maxScore = item.score
          maxItem = item
        }
      })
      return maxItem ? maxItem.sheet_id : ''
    }
  },
  methods: {
    // 组装问题数据
    genQuestions(list) {
      if (!list) return []
      return list.map(data => {
        let { radioList = [], checkboxList = [], shortAnswerList = [], judgeList = [] } = data
        // 单选
        radioList = radioList.map(item => {
          const temp = { type: 1, formModel: { id: item.id, user_answer: item.user_answer || '' } }
          return Object.assign({}, item, temp)
        })
        // 多选
        checkboxList = checkboxList.map(item => {
          const temp = { type: 2, formModel: { id: item.id, user_answer: item.user_answer || [] } }
          return Object.assign({}, item, temp)
        })
        // 问答
        shortAnswerList = shortAnswerList.map(item => {
          const temp = {
            type: 3,
            formModel: {
              id: item.id,
              user_answer: item.user_answer ? Base64.decode(item.user_answer.replace(/ /gi, '+')) : '',
              attachments: item.attachments || []
            }
          }
          return Object.assign({}, item, temp)
        })
        // 判断题
        judgeList = judgeList.map(item => {
          const temp = { type: 4, formModel: { id: item.id, user_answer: item.user_answer || '' } }
          return Object.assign({}, item, temp)
        })
        return [...radioList, ...checkboxList, ...judgeList, ...shortAnswerList]
      })
    },
    // 获取考试结果
    getExamResult(params = {}) {
      this.loading = true
      api
        .getChapterMultipleExams(this.sid, this.cid, this.pid, params)
        .then(response => {
          // 设置问题列表数据
          if (response.code !== 8001) {
            this.exam = response
            this.questions = this.genQuestions(response.sheet)
            // 自动提交
            !this.isSubmited && this.autoSubmit()
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 再考一次
    onNextExam() {
      this.getExamResult({ is_new: 1 })
    },
    // 查看最高分试卷
    onViewMaxScoreExam() {
      this.getExamResult({ sheet_id: this.maxScoreExamId })
    },
    // 提交校验
    checkSubmit() {
      if (!this.questions.length) {
        return
      }
      for (let i = 0; i < this.questions.length; i++) {
        const questions = this.questions[i]
        for (let k = 0; k < questions.length; k++) {
          const value = questions[k].formModel.user_answer
          if (Array.isArray(value) ? !value.length : !value) {
            return false
          }
        }
      }
      return true
    },
    // 提交
    onSubmit() {
      // 校验
      if (!this.checkSubmit()) {
        this.messageInstance && this.messageInstance.close()
        this.messageInstance = this.$message.error(this.$t('viewerWork.examSubmitError'))
        return
      }
      // 提交的答案数据
      const answers = this.handleSubmitData()
      // 提交参数
      const params = { answers: JSON.stringify(answers), type: 1 }
      // 请求接口
      this.submitLoading = true
      this.handleSubmitRequest(params)
    },
    // 自动提交,10秒提交一次
    autoSubmit() {
      this.autoSubmitTimer && clearInterval(this.autoSubmitTimer)
      this.autoSubmitTimer = setInterval(() => {
        // 提交的答案数据
        const answers = this.handleSubmitData()
        const params = { answers: JSON.stringify(answers), type: 0 }
        // 请求接口
        this.handleSubmitRequest(params)
      }, 10000)
    },
    // 处理请求接口答案数据
    handleSubmitData() {
      return this.questions.map(questions => {
        return questions.reduce(
          (result, item) => {
            // 单选题
            if (item.type === 1) {
              result.radioList.push(item.formModel)
            }
            // 多选题
            if (item.type === 2) {
              result.checkboxList.push(item.formModel)
            }
            // 简答题
            if (item.type === 3) {
              const formModel = Object.assign({}, item.formModel, {
                user_answer: Base64.encode(item.formModel.user_answer)
              })
              result.shortAnswerList.push(formModel)
            }
            // 判断题
            if (item.type === 4) {
              result.judgeList.push(item.formModel)
            }
            return result
          },
          { radioList: [], checkboxList: [], shortAnswerList: [], judgeList: [] }
        )
      })
    },
    // 请求提交接口
    handleSubmitRequest(params) {
      params.paper_type = 0
      api
        .submitChapterMultipleExams(this.sid, this.cid, this.pid, this.exam.id, params)
        .then(response => {
          if (params.type === 0) {
            console.log('暂存成功')
            return
          }
          if (response.code === 200) {
            this.$message.success(this.$t('viewerWork.examSubmitSuccess'))
            this.autoSubmitTimer && clearInterval(this.autoSubmitTimer)
            this.getExamResult()
          } else {
            this.$message.error(response.data.error)
          }
        })
        .catch(error => {
          this.$message.error(error.message)
        })
        .finally(() => {
          this.submitLoading = false
        })
    }
  },
  beforeMount() {
    // 获取考试结果
    this.getExamResult()
  },
  destroyed() {
    this.autoSubmitTimer && clearInterval(this.autoSubmitTimer)
  }
}
</script>

<style lang="scss" scoped>
.multiple-exam {
  max-width: 900px;
  margin: 0 auto;
}
.multiple-exam-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 40px 0;
  padding: 40px;
  background-color: #f2f2f2;
}
.multiple-exam-header__history {
  flex: 1;
}
.exam-buttons {
  padding: 40px 0;
  text-align: center;
  .el-button {
    width: 240px;
    margin: 40px auto;
  }
}
.no-exam {
  padding: 100px;
  font-size: 30px;
  text-align: center;
}
.exam-welcome {
  padding: 40px;
  line-height: 30px;
  text-align: center;
  ::v-deep .el-button {
    margin-top: 30px;
  }
}
</style>
