<template>
  <view>
    <cu-custom bgColor="bg-gradual-blueness" :isBack="false">
      <block slot="backText">返回</block>
      <block slot="content">课程考试</block>
    </cu-custom>
    <view class="container">
      <view class="top">
        <view class="suject">
          <text>考试科目：{{ info.EXAMNAME }}</text>
        </view>
        <view class="questions">
          <text>当前试题{{ current + 1 }}/{{ options.length }}</text>
        </view>
        <view class="time">
          <text>考试剩余时间：</text>
<!--          -->
          <uni-countdown :minute="info.ANSWERSHEETTIME" @timeup="fnCountDownFinish" color="#fff" splitorColor="#fff"/>
        </view>
      </view>
      <view class="topic">
        <view class="title">
        <text>
          {{ current + 1 }}.{{ options[current].QUESTIONDRY }}
        </text>
          <text v-show="options[current].QUESTIONTYPE === '1'">
          (单选)
        </text>
          <text v-show="options[current].QUESTIONTYPE === '2'">
          (多选)
        </text>
          <text v-show="options[current].QUESTIONTYPE === '3'">
          (判断)
        </text>
          <text v-show="options[current].QUESTIONTYPE === '4'">
          (填空)
        </text>
        </view>
        <view
            class="options"
            v-show="options[current].QUESTIONTYPE === '1'"
        >
          <view
              class="item"
              @click="fnChooseTopic('radio', 'A')"
              :class="{ active: options[current].checked === 'A' }"
          >
            <text class="option">A</text>
            <text class="text">{{ options[current].OPTIONA }}</text>
          </view>
          <view
              class="item"
              @click="fnChooseTopic('radio', 'B')"
              :class="{ active: options[current].checked === 'B' }"
          >
            <text class="option">B</text>
            <text class="text">{{ options[current].OPTIONB }}</text>
          </view>
          <view
              class="item"
              @click="fnChooseTopic('radio', 'C')"
              :class="{ active: options[current].checked === 'C' }"
          >
            <text class="option">C</text>
            <text class="text">{{ options[current].OPTIONC }}</text>
          </view>
          <view
              class="item"
              @click="fnChooseTopic('radio', 'D')"
              :class="{ active: options[current].checked === 'D' }"
          >
            <text class="option">D</text>
            <text class="text">{{ options[current].OPTIOND }}</text>
          </view>
        </view>
        <view
            class="options"
            v-show="options[current].QUESTIONTYPE === '2'"
        >
          <view
              class="item"
              @click="fnChooseTopic('multiple', 'A')"
              :class="{
                active:
                  options[current].checked &&
                  options[current].checked.indexOf('A') !== -1,
              }"
          >
            <text class="option">A</text>
            <text class="text">{{ options[current].OPTIONA }}</text>
          </view>
          <view
              class="item"
              @click="fnChooseTopic('multiple', 'B')"
              :class="{
                active:
                  options[current].checked &&
                  options[current].checked.indexOf('B') !== -1,
              }"
          >
            <text class="option">B</text>
            <text class="text">{{ options[current].OPTIONB }}</text>
          </view>
          <view
              class="item"
              @click="fnChooseTopic('multiple', 'C')"
              :class="{
                active:
                  options[current].checked &&
                  options[current].checked.indexOf('C') !== -1,
              }"
          >
            <text class="option">C</text>
            <text class="text">{{ options[current].OPTIONC }}</text>
          </view>
          <view
              class="item"
              @click="fnChooseTopic('multiple', 'D')"
              :class="{
                active:
                  options[current].checked &&
                  options[current].checked.indexOf('D') !== -1,
              }"
          >
            <text class="option">D</text>
            <text class="text">{{ options[current].OPTIOND }}</text>
          </view>
        </view>
        <view
            class="options"
            v-show="options[current].QUESTIONTYPE === '3'"
        >
          <view
              class="item"
              @click="fnChooseTopic('judge', 'A')"
              :class="{ active: options[current].checked === 'A' }"
          >
            <text class="option">{{ options[current].OPTIONA }}</text>
            <text class="text"></text>
          </view>
          <view
              class="item"
              @click="fnChooseTopic('judge', 'B')"
              :class="{ active: options[current].checked === 'B' }"
          >
            <text class="option">{{ options[current].OPTIONB }}</text>
            <text class="text"></text>
          </view>
        </view>
        <view
            class="options"
            v-show="options[current].QUESTIONTYPE === '4'"
        >
          <view class="item">
            <textarea
                maxlength="255"
                v-model="options[current].checked"
                placeholder="请输入内容"
            />
          </view>
        </view>
      </view>
      <view class="footer">
        <button
            class="cu-btn"
            :style="{ width: '45%' }"
            v-show="current !== 0"
            @click="fnPreviousQuestion"
        >
          上一题
        </button>
        <button
            class="cu-btn bg-blue"
            :style="{ width: current === 0 ? '100%' : '45%' }"
            v-show="current !== options.length - 1"
            @click="fnNextQuestion"
        >
          下一题
        </button>
        <button
            class="cu-btn bg-blue"
            :style="{ width: '45%' }"
            v-show="current === options.length - 1"
            @click="fnHandInThePaper"
        >
          交卷
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import {basePath, loginUser} from "@/common/tool";
export default {
  data() {
    return {
      info: {
        ANSWERSHEETTIME:1
      },
      options: [{}],
      current: 0,
      STAGEEXAMPAPERINPUT_ID: '',
      STAGEEXAMPAPER_ID: '',
      CLASS_ID: '',
      POST_ID: '',
      STUDENT_ID: '',
      NUMBEROFEXAMS: '',
      entrySite: '',
    }
  },
  // onBackPress(event) {
  //   if (event.from === "backbutton") {
  //     uni.showToast({
  //       title:'正在答题中',
  //       icon:'none'
  //     })
  //     return true;
  //   }
  //   return false;
  // },
  onLoad(options) {
    this.STAGEEXAMPAPERINPUT_ID = options.STAGEEXAMPAPERINPUT_ID;
    this.STAGEEXAMPAPER_ID = options.STAGEEXAMPAPER_ID;
    this.CLASS_ID = options.CLASS_ID;
    this.POST_ID = options.POST_ID;
    this.STUDENT_ID = options.STUDENT_ID;
    this.NUMBEROFEXAMS = options.NUMBEROFEXAMS;
    this.entrySite = options.entrySite;
    this.fnGetData();
  },
  methods: {
    fnGetData() {
      uni.showLoading({
        title: '请稍候'
      })
      let url = ''
      let params = {}
      if(this.entrySite === "strengththen"){
        url = '/app/stageexam/getStrengthenExam'
        params = {
          STRENGTHEN_STAGEEXAMPAPER_INPUT_ID: this.STAGEEXAMPAPERINPUT_ID,
          CLASS_ID: this.CLASS_ID,
          POST_ID: this.POST_ID,
          STUDENT_ID: this.STUDENT_ID,
          NUMBEROFEXAMS: this.NUMBEROFEXAMS,
        }
      }else {
        url = '/app/stageexam/getExam'
        params = {
          STAGEEXAMPAPERINPUT_ID: this.STAGEEXAMPAPERINPUT_ID,
          STAGEEXAMPAPER_ID: this.STAGEEXAMPAPER_ID,
          CLASS_ID: this.CLASS_ID,
          POST_ID: this.POST_ID,
          STUDENT_ID: this.STUDENT_ID,
          NUMBEROFEXAMS: this.NUMBEROFEXAMS,
        }
      }
      uni.request({
        url: basePath + url,
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: params,
        success: (res) => {
          uni.hideLoading(); //结束加载中动画
          var resData = res.data;
          if (resData.result === 'success') {
            this.options = resData.inputQue;
            this.info = resData.pd;
            if (resData.NUMBEROFEXAMS > 0) {
              // uni.showModal({
              //   title: "温馨提示",
              //   content:`您还可以考试${resData.NUMBEROFEXAMS}次！`,
              //   showCancel:false
              // })
            } else if (resData.NUMBEROFEXAMS === "-9999") {
              uni.showModal({
                title: "温馨提示",
                content:`加强学习考试开始，限时60分钟，请注意答题时间！`,
                showCancel:false
              })
            } else {
              uni.showModal({
                title: "温馨提示",
                content:`您无考试次数！`,
                showCancel:false,
                success: (res) => {
                  if (res.confirm) {
                    uni.navigateBack()
                  }
                }
              })
            }
          }
        }
      })
    },
    fnChooseTopic(type, checked){
      if (!this.options[this.current].checked) {
        this.$set(this.options[this.current], "checked", "");
      }
      if (type === "judge" || type === "radio") {
        if (this.options[this.current].checked === checked) {
          this.options[this.current].checked = "";
        } else {
          this.options[this.current].checked = checked;
        }
      }
      if (type === "multiple") {
        if (this.options[this.current].checked) {
          const checkedArr = this.options[this.current].checked.split(",");
          if (checkedArr.indexOf(checked) !== -1) {
            checkedArr.splice(checkedArr.indexOf(checked), 1);
            this.options[this.current].checked = checkedArr.join(",");
          } else {
            checkedArr.push(checked);
            checkedArr.sort();
            this.options[this.current].checked = checkedArr.join(",");
          }
        } else {
          this.options[this.current].checked = checked;
        }
        console.log(this.options[this.current].checked)
      }
    },
    fnIsFinish(){
      if (!this.options[this.current].checked) {
        uni.showModal({
          title: "温馨提示",
          content: "请对本题进行作答。",
          showCancel:false
        })
        return false;
      }
      return true;
    },
    fnNextQuestion(){
      if (!this.fnIsFinish()) return;
      this.current++;
    },
    fnPreviousQuestion(){
      this.current--;
    },
    fnHandInThePaper(){
      if (!this.fnIsFinish()) return;
      this.fnSubmit();
    },
    fnCountDownFinish(){
      uni.showToast({
        title: '考试时间已结束',
        icon:'none'
      })
      for (let i = 0; i < this.options.length; i++) {
        if (!this.options[i].checked) {
          this.options[i].checked = "";
        }
      }
      this.fnSubmit();
    },
    fnSubmit(){
      for (let i = 0; i < this.options.length; i++) {
        if (this.options[i].QUESTIONTYPE === "2") {
          this.options[i].checked = this.options[i].checked.replace(/,/g, "");
        }
      }
      uni.request({
        url: basePath + '/app/stageexam/submit',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          USERNAME: loginUser.NAME,
          USER_ID: loginUser.USER_ID,
          STAGEEXAMPAPERINPUT_ID:this.STAGEEXAMPAPERINPUT_ID,
          STUDENT_ID:this.STUDENT_ID,
          CLASS_ID:this.CLASS_ID,
          NUMBEROFEXAMS:this.NUMBEROFEXAMS,
          entrySite:this.entrySite,
          PASSSCORE: this.info.PASSSCORE,
          EXAMSCORE: this.info.EXAMSCORE,
          EXAMTIMEBEGIN: this.info.EXAMTIMEBEGIN,
          options: JSON.stringify(this.options),
        },
        success: (res) => {
          uni.hideLoading(); //结束加载中动画
          var resData = res.data;
          if (resData.result === 'success') {
            if (resData.examResult === "0") {
              uni.showModal({
                title:'温馨提示',
                content:`您的成绩为${resData.examScore}分，很遗憾您没有通过本次考试，请再接再厉！`,
                showCancel:false,
                success: (res) => {
                  if (res.confirm) {
                    if (this.entrySite === "video_study")uni.navigateBack({delta:3})
                    else uni.navigateBack()
                  }
                }
              })
            } else {
              uni.showModal({
                title:'温馨提示',
                content:`您的成绩为${resData.examScore}分，恭喜您通过本次考试，请继续保持！`,
                showCancel:false,
                success: (res) => {
                  if (res.confirm) {
                    if (this.entrySite === "video_study") uni.navigateBack({delta:3})
                    else if (this.entrySite === "strengththen") uni.navigateBack({delta:2})
                    else uni.navigateBack()
                  }
                }
              })
            }
          }
        }
      })
    }
  },
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  background: #fff;
  padding: 20upx;
  box-sizing: border-box;
  min-height: 100vh;

  .top {
    background: url("/static/study/bgimg1.png");
    background-size: 100% 100%;
    border-radius: 20upx;
    padding: 40upx;
    text-align: center;

    .suject {
      color: #fff;
      font-weight: bold;
      font-size: 32upx;
    }

    .questions {
      color: #eeecec;
      font-size: 30upx;
      padding-top: 20upx;
    }

    .time {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      color: #eeecec;
      font-size: 28upx;
      padding-top: 20upx;

      .van-count-down {
        color: #eeecec;
        font-size: 28upx;
        line-height: normal;
      }
    }
  }

  .topic {
    margin-top: 20upx;
    margin-bottom: 80upx;
    padding: 20upx;
    box-sizing: border-box;

    .title {
      font-size: 32upx;
      font-weight: 600;

      .question-type {
        border-radius: 40upx;
        padding: 4upx 14upx;
        border: 1upx solid #3c9cff;
        font-size: 24upx;
        color: #3c9cff;
      }
    }

    .options {
      margin-top: 40upx;

      .item {
        position: relative;
        margin-top: 40upx;
        color: #696868;

        &.active {
          color: #3c9cff;

          .option {
            background-color: #3c9cff;
            color: #fff;
          }
        }

        .option {
          background-color: #eee;
          border-radius: 80upx;
          width: 65upx;
          height: 65upx;
          line-height: 65upx;
          text-align: center;
          font-size: 30upx;
          display: inline-block;
        }

        .text {
          margin-left: 30upx;
          height: 60upx;
          line-height: 60upx;
        }

        uni-textarea{
          width: 100%;
          border: 1px solid #ccc;
          padding: 10upx;
          border-radius: 10upx;
        }
      }
    }
  }

  .footer {
    display: flex;
    position: fixed;
    bottom: 0;
    justify-content: space-between;
    width: 100%;
    left: 0;
    padding: 20upx;
    box-sizing: border-box;
    background: #fff;

    button {
      border-radius: 10upx;
    }
  }
}
</style>
