<template>
  <div class="pager-index">
    <div class="q-num">共{{ items.length }}题</div>
    <div class="q-nth">问题{{ currentIndex + 1 }}</div>
    <single
      v-if="currentIssue.questionType === 1"
      :item="currentIssue"
      :isChecked="isChecked"
      @change="onAnswer"
    ></single>
    <multiple
      v-if="currentIssue.questionType === 2"
      :item="currentIssue"
      :isChecked="isChecked"
      @change="onAnswer"
    ></multiple>
    <Button
      v-if="!isSubmit"
      class="submit"
      :disabled="!isAnswered||checking"
      @click="checkAnswer"
    >
      {{ nextButtonText }}
    </Button>
  </div>
</template>

<script>
import single from "./single/index.vue";
import multiple from "./multiple/index.vue";
import {Button} from "vant";

export default {
  name: "paperIndex",
  props: {
    type: {
      type: Number,
      default: 1,
    },
    items: {
      type: Array,
      default() {
        return []
      },
    }
  },
  components: {
    Button,
    single,
    multiple,
  },
  data() {
    return {
      isSubmit: false,
      currentIndex: 0,
      // 当前问题是否已经验证过答案了
      isChecked: false,
      // 当前题是否已经回答过了
      isAnswered: false,
      // 判卷中
      checking: false,
      answerBoard: []
    }
  },
  computed: {
    // 当前题
    currentIssue() {
      if (this.currentIndex > this.items.length - 1) {
        this.currentIndex = this.items.length - 1;
        // 已经是最后一题
      }
      return this.items[this.currentIndex];
    },
    nextButtonText() {
      return this.currentIndex === this.items.length - 1 ? '提交' : '下一题';
    }
  },
  methods: {
    // 当单选提交后
    onAnswer(issue, answer) {
      this.isAnswered = answer.length > 0;
      let question = this.answerBoard.find(o => o.questionId === issue.questionId);
      if (question) {
        question.choiceAnswerIds = answer;
      } else {
        question = {
          questionId: issue.questionId,
          questionType: issue.questionType,
          choiceAnswerIds: answer,
        };
        this.answerBoard.push(question);
      }
    },
    // 检查答案
    checkAnswer() {
      this.checking = true;
      if (this.type === 1) {
        this.isChecked = true;
        setTimeout(() => {
          this.nextQuestion();
        }, 1500);
      } else {
        this.nextQuestion();
      }
    },
    nextQuestion() {
      // 检查答案，高亮正确，高亮错误，。。。
      this.isAnswered = false;
      if (this.currentIndex === this.items.length - 1) {
        this.isSubmit = true;
        this.handleSubmit()
        if (this.isChecked) return false;
      } else {
        this.currentIndex++;
      }
      this.isChecked = false;
      this.checking = false;
    },
    // 完成
    handleSubmit() {
      this.$emit('onFinished', this.answerBoard);
    }
  }
}
</script>

<style lang="scss" scoped>
.pager-index {
  width: 6.9rem;
  min-height: 11.36rem;
  background-color: #ffffff;
  border-radius: 0.45rem;
  padding-bottom: .5rem;

  // 共 n 题
  .q-num {
    width: 1.72rem;
    height: .85rem;
    background: #8293ab;
    color: #fff;
    border-radius: 0 0 0.85rem 0.85rem;
    margin: auto;
    text-align: center;
    line-height: .7rem;
    font-size: 0.28rem;
  }

  .q-nth {
    width: 1.24rem;
    height: 0.41rem;
    background: #8293ab;
    color: #fff;
    font-size: 0.25rem;
    line-height: 0.41rem;
    border-radius: 0 0.2rem 0.2rem 0;
  }

  .qa {
    width: 100%;
    height: 15rem;
    position: relative;
    overflow: hidden;
  }

  .submit {
    width: 6.2rem;
    height: 0.9rem;
    line-height: 0.9rem;
    text-align: center;
    margin: auto;
    border-radius: 0.1rem;
    color: #fff;
    background: #495975;

    &:disabled {
      color: #959595;
      background: #eaebf0 !important;
    }
  }
}
</style>
