<template>
  <div class="liuyan">
    <back title="考试中心"></back>
    <div class="lx">
      <div v-if="current_question_data.type == 13">
        <div class="lianxiTiMu">
          <span class="lianxiTiMu1">是非题</span>
          <span>{{ current_question_data.name }}</span>
        </div>
        <div
          class="lianxiTiMu"
          v-for="(item, index) in current_question_data.content"
          :key="index"
          @click="responseQ(item)"
        >
          <span
            class="lianxiXueZe"
            v-bind:class="{ active: current_question_data.response == item }"
            >{{ xuhao[index] }}</span
          >
          <span class="lianxiXueZe1">{{ item }}</span>
        </div>
        <div
          class="lianxiTiMu cuoti"
          v-if="current_question_data.response != current_question_data.answer"
        >
          正确答案：{{ current_question_data.answer }}<br />错题解释：<br />{{
            current_question_data.wrong_text
          }}
        </div>
      </div>
      <div v-if="current_question_data.type == 3">
        <div class="lianxiTiMu">
          <span class="lianxiTiMu1">单选题</span>
          <span>{{ current_question_data.name }}</span>
        </div>
        <div
          class="lianxiTiMu"
          v-for="(item, index) in current_question_data.content"
          :key="index"
          @click="responseQ(item)"
        >
          <span
            class="lianxiXueZe"
            v-bind:class="{ active: current_question_data.response == item }"
            >{{ xuhao[index] }}</span
          >
          <span class="lianxiXueZe1">{{ item }}</span>
        </div>
        <div
          class="lianxiTiMu cuoti"
          v-if="current_question_data.response != current_question_data.answer"
        >
          正确答案：{{ current_question_data.answer }}<br />错题解释：<br />{{
            current_question_data.wrong_text
          }}
        </div>
      </div>
      <div v-if="current_question_data.type == 4">
        <div class="lianxiTiMu">
          <span class="lianxiTiMu1">多选题</span>
          <span>{{ current_question_data.name }}</span>
        </div>
        <div
          class="lianxiTiMu"
          v-for="(item, index) in current_question_data.content"
          :key="index"
          @click="responseS(index)"
        >
          <span
            class="lianxiXueZe"
            v-bind:class="{
              active: current_question_data.response.indexOf(index) != -1,
            }"
            >{{ xuhao[index] }}</span
          >
          <span class="lianxiXueZe1">{{ item }}</span>
        </div>
        <div
          class="lianxiTiMu cuoti"
          v-if="current_question_data.response != current_question_data.answer"
        >
          正确答案：{{ current_question_data.answer }}<br />错题解释：<br />{{
            current_question_data.wrong_text
          }}
        </div>
      </div>
      <div v-if="current_question_data.type == 12">
        <div class="lianxiTiMu">
          <span class="lianxiTiMu1">填空题</span>
          <span>{{ current_question_data.name }}</span>
          <div
            class="tiankong"
            v-for="(i, key) in tiankongdata"
            :key="key"
            v-if="i != null"
          >
            <div v-for="(item, index) in i.length" :key="index">
              <input
                type="text"
                class="tiank"
                maxlength="1"
                v-model="i[index]"
                :id="'tk' + index"
              />
            </div>
          </div>
        </div>
        <div
          class="lianxiTiMu cuoti"
          v-if="current_question_data.response != current_question_data.answer"
        >
          正确答案：{{ current_question_data.answer }}<br />错题解释：<br />{{
            current_question_data.wrong_text
          }}
        </div>
      </div>
      <div class="lianxiBottom">
        <div class="lianxiBottomL">
          <div @click="prevQ">上一题</div>
          <div @click="nextQ">下一题</div>
          <!--<div @click="subQ">交卷</div>-->
        </div>

        <div class="lianxiBottomR" @click="popupVisible = true">
          <img src="../../../static/img/gengduo.png" alt="" /><span>{{
            current_question + 1
          }}</span
          >/{{ questions.length }}
        </div>
      </div>
    </div>
    <mt-popup v-model="popupVisible" position="bottom">
      <div class="order_number">
        <div
          v-for="(item, index) in questions"
          :key="index"
          @click="goQ(index)"
          v-bind:class="{
            error: item.response != item.answer && current_question != index,
            active: current_question == index,
          }"
        >
          {{ index + 1 }}
        </div>
        <!-- error: !item.response && current_question != index, -->
      </div>
    </mt-popup>
  </div>
</template>

<script>
import Back from "../common/Back";
import { getStore } from "@/utils/storage";
import { Toast } from "mint-ui";
import { MessageBox } from "mint-ui";
export default {
  name: "LiuYan",
  components: { Back },
  data() {
    return {
      exam_data: {},
      xuhao: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
      ],
      questions: [],
      current_question: 0,
      current_question_data: {},
      popupVisible: false,
      tiankongdata: [],
    };
  },
  methods: {
    start(id, type) {
      this.getData("/Question/getExamDetail", {
        token: getStore("token"),
        id: id,
        type: type,
      }).then(
        (data) => {
          if (data.code == 1 && data.data != null) {
            let _this = this;
            // console.log(data.data)
            this.questions = data.data;
            this.current_question_data = data.data[0];
            if (this.current_question_data.type == 12) {
              this.tk(this.current_question_data.response);
            }
          } else {
            Toast(data.msg);
          }
        },
        (err) => {}
      );
    },
    tk(daan) {
      if (typeof daan == "string") {
        this.tiankongdata = daan.split("*");
      } else {
        this.tiankongdata = [];
      }
    },
    prevQ() {
      if (this.current_question <= 0) {
        Toast("已是第一题");
      } else {
        this.current_question--;
        this.current_question_data = this.questions[this.current_question];

        if (this.current_question_data.type == 12) {
          this.tk(this.current_question_data.response);
        }
      }
    },
    nextQ() {
      if (this.current_question >= this.questions.length - 1) {
        Toast("已是最后一题");
      } else {
        this.current_question++;
        this.current_question_data = this.questions[this.current_question];

        if (this.current_question_data.type == 12) {
          this.tk(this.current_question_data.response);
        }
      }
    },
    responseQ(item) {
      this.questions[this.current_question].response = item;
      this.current_question_data = {};
      this.current_question_data = this.questions[this.current_question];
    },
    responseS(item) {
      let arr = this.questions[this.current_question].response;
      if (!arr) {
        this.questions[this.current_question].response = [item];
        return;
      }
      let index;
      index = arr.indexOf(item);
      if (index == -1) {
        this.questions[this.current_question].response.push(item);
      } else {
        this.questions[this.current_question].response.splice(index, 1);
      }
      this.current_question_data = {};
      this.current_question_data = this.questions[this.current_question];
    },
    goQ(index) {
      this.current_question = index;
      this.current_question_data = this.questions[this.current_question];
    },
  },
  mounted() {
    let id = this.$route.query.id;
    let type = this.$route.query.type;
    this.start(id, type);
  },
};
</script>

<style lang="scss" scoped>
.liuyan {
  padding-top: 5rem;
}
.lx {
  padding-bottom: 5rem;
  .lianxiTiMu {
    width: 90%;
    margin: 2rem auto;
    font-size: 1.56rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    text-align: left;
    line-height: 2.5rem;
    color: #333333;
    .lianxiTiMu1 {
      width: 4.9rem;
      line-height: 1.7rem;
      color: #0375e4;
      border: 0.05rem solid #0375e4;
      border-radius: 1rem 0rem 1rem 0rem;
      display: inline-block;
      text-align: center;
      font-size: 1.04rem;
      font-family: MicrosoftYaHei;
      font-weight: 400;
    }
    .lianxiXueZe {
      color: #5e5e5e;
      width: 2.5rem;
      line-height: 2.5rem;
      border: 0.05rem solid #5e5e5e;
      border-radius: 50%;
      display: inline-block;
      font-size: 1.56rem;
      font-family: ArialMT;
      font-weight: 400;
      text-align: center;
      margin-right: 1rem;
      &.active {
        background: #0083ff;
      }
    }
    .lianxiXueZe1 {
      color: #5e5e5e;
    }
    &.cuoti {
      color: red;
    }
    .tiankong {
      display: flex;
      flex-wrap: wrap;
      .tiank {
        width: 3rem;
        height: 3rem;
        border: 0.05rem solid #9c9c9c;
        margin: 0.5rem;
        text-align: center;
      }
      .tianks {
        background: red;
      }
    }
  }
  .lianxiBottom {
    width: 100%;
    height: 5rem;
    border-top: 0.05rem solid #9c9c9c;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    font-size: 1.56rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    background: white;
    img {
      width: 1.5rem;
      height: 1.5rem;
      margin-right: 0.5rem;
    }
    .lianxiBottomL {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 60%;
      div {
        padding: 0 0.5rem;
        background: #0083ff;
        color: white;
        line-height: 2rem;
        &.disable {
          background: grey;
        }
      }
    }
    .lianxiBottomR {
      color: #a5a5a5;
      span {
        color: #333333;
      }
    }
  }
}
.order_number {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  > div {
    width: 10vw;
    font-size: 1.5rem;
    height: 10vw;
    line-height: 10vw;
    border: 1px solid black;
    box-sizing: border-box;
    &.active {
      background: #31a6ff;
    }
    &.error {
      background: red;
    }
  }
}
</style>
