<template>
  <div class="aq-card-inner">
    <div class="gy-area-title">答题卡</div>

    <div class="tips-card" v-if="![1,3].includes(mode)">
      <div class="tips-item"> 已作答 <div class="color-card success"></div>
      </div>
      <div class="tips-item" v-if="mode !== 5"> 标记 <div class="color-card flag"></div>
      </div>
      <div class="tips-item"> 未作答 <div class="color-card unwrite"></div>
      </div>
    </div>
    <div class="tips-card" v-else>
      <div class="tips-item"> 正确 <div class="color-card success"></div>
      </div>
      <div class="tips-item"> 错误 <div class="color-card flag"></div>
      </div>
      <!-- <div class="tips-item"> 未作答 <div class="color-card unwrite"></div>
      </div> -->
    </div>
    <div v-if="(mode === 1)" style="display: flex;justify-content:space-between;margin: 10px 0;font-size:12px" >
      <div class="gy-label">试卷总分：{{ examScore }} 分</div>
      <div class="gy-label">您的得分：{{ userTotalScore }} 分</div>
    </div>
    <div style="overflow: auto;">
      <div v-for="(item, ind) in questionList?.classify" :key="ind">
        <p style="padding:10px  0;font-weight: bold;font-size: 14px;">
          {{ item.title }}
          <span style="font-size: 12px;font-weight: normal;display: inline-block;margin-left: 10px;color:#999">
            (共{{ questionList.questions[item.title].length }}题)
          </span>
        </p>
        <div class="serial-list" v-if="![1,3].includes(mode)">
          <div
            :class="['serial-item', { 'flag': flag.includes(questionItem.id), 'success': localAnswers.includes(questionItem.id) }]"
            v-for="(questionItem, ind) in questionList.questions[item.title]" @click="itemOnClick(questionItem)"
            :key="questionItem.id" :questionInfo="questionItem">{{ ind + 1 }}</div>
        </div>
        <div class="serial-list" v-else>
          <div
            :class="['serial-item', { 'error': questionItem.score > questionItem.userScore, 'success': questionItem.score <= questionItem.userScore }]"
            v-for="(questionItem, ind) in questionList.questions[item.title]" @click="itemOnClick(questionItem)"
            :key="questionItem.id" :questionInfo="questionItem">{{ ind + 1 }}</div>
        </div>
      </div>
    </div>
    <div v-if="mode === 5">
      <div class="action-btn-group">
        <el-button round type="primary" @click="handler('submit')">提交答题</el-button>
        <el-button plain round type="danger" @click="handler('cancel')">退出</el-button>
      </div>
    </div>
    <div v-if="(mode === 1)">
      <div class="action-btn-group">
        <el-button plain round type="danger" @click="handler('cancel')">退出预览</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import '@/views/assessment-evaluation/utils/gyStyle.scss'
export default {
  props: {
    questions: {},
    flag: {
      type: Array,
      default: () => []
    },
    answers: {
      type: Object,
      default: _ => ({})
    },
    mode: {
      type: Number,
      default: 0
    }
  },
  data: _ => ({
    // 已回答的问题 ID 数组。
    localAnswers: [],
    // 计算属性。
    questionList: null,
    // 用于计算考试的总分。
    originQuestionList: null
  }),
  computed: {
    // 用于计算考试总分的计算属性。
    examScore () {
      if (this.originQuestionList && this.originQuestionList.length > 0) {
        return this.originQuestionList.reduce((prev, item) => {
          return prev + item.score
        }, 0)
      } else {
        return '无'
      }
    },
    // 用于计算考试总分的计算属性。
    userTotalScore () {
      if (this.originQuestionList && this.originQuestionList.length > 0) {
        return this.originQuestionList.reduce((prev, item) => {
          return prev + item.userScore
        }, 0)
      } else {
        return '无'
      }
    }
  },
  watch: {
    // 包含问题答案的对象。
    answers: {
      deep: true,
      handler (nv) {
        this.localAnswers = nv.map(item => item.questionId)
      }
    },
    // 从父组件传入的 prop。
    questions: {
      deep: true,
      immediate: true,
      handler (nv) {
        // const questionArr = Object.keys(this.questionList.questions).reduce((prev, item) => {
        //   return prev.concat(this.questionList.questions[item])
        // }, [])
        if (nv) {
          this.questionList = this.formatQuestions(nv)
          this.originQuestionList = nv
        }
      }
    }
  },
  methods: {
    handler (emit) {
      this.$emit(emit)
    },
    // 当用户单击问题时调用的方法。
    itemOnClick (question) {
      this.$emit('smooth', question)
    },
    // 获取一组问题并返回一个具有两个属性的对象：`classify` 和 `questions`。
    formatQuestions (questionList) {
      // const questionsClassify = {}
      const resQ = questionList.reduce((prev, item) => {
        if (prev.classify.findIndex(j => j.title === item.type) === -1) prev.classify.push({ title: item.type, score: item.score })
        if (Object.keys(prev.questions).includes(item.type)) prev.questions[item.type].push(item)
        else prev.questions[item.type] = [item]
        return prev
      }, { classify: [], questions: {} })
      return resQ
    }
  }

}
</script>

<style lang="scss" scoped>
.action-btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.serial-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .serial-item {
    width: 30px;
    height: 30px;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 4px;
    background-color: #999999;
    cursor: pointer;
    user-select: none;

    &.success {
      background-color: #00c781;
    }

    &.flag,
    &.error {
      background-color: #ee0000;
    }

  }
}

.aq-card-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tips-card {
  width: 100%;
  padding: 10px 5px;
  border-radius: 4px;
  background-color: #f1f5fe;
  display: flex;
  justify-content: space-around;
  font-size: 12px;

  .tips-item {
    display: flex;
  }

  .color-card {
    width: 12px;
    height: 12px;
    margin: 0 5px;

    &.success {
      background-color: #00c781;
    }

    &.flag,
    &.error {
      background-color: #ee0000;
    }

    &.unwrite {
      background-color: #999999;
    }
  }
}
</style>
