<template>
  <view>
    <view class="ext-bg">
      <!-- <view class="extin-bg">
        <cu-custom bgColor="bg-gradual-no" :isBack="true" :isRingt="true" :backUrl="backUrl">
          <block slot="backText">返回</block>
          <block slot="content">习题练习</block>
        </cu-custom>
      </view> -->
      <view class="extin-bg">
        <view class="cu-bar fixed bg-gradual-no">
          <view class="action" @tap="BackPage">
            <text class="cuIcon-back"></text>
            <slot name="backText">返回</slot>
          </view>
          <view class="content" :style="[{top:StatusBar + 'px'}]">
            <slot name="content">习题练习</slot>
          </view>
          <view class="right">
            <slot name="right"></slot>
          </view>
          <!-- <slot name="right"></slot> -->
        </view>
      </view>
      <view class="ext-box">
        <view class="ext-topic">
          <view class="ext-title">
            第{{ sindex + 1 }}题
          </view>
          <view class="ext-content">
            <view class="ext-text">
              <text v-if="form.QUESTIONTYPE[sindex] === '1'" class="mark">(单选题)</text>
              <text v-if="form.QUESTIONTYPE[sindex] === '2'" class="mark">(多选题)</text>
              <text v-if="form.QUESTIONTYPE[sindex] === '3'" class="mark">(判断题)</text>
              {{ form.QUESTIONLIST[sindex].QUESTIONDRY }}
            </view>
            <view class="ext-select">
              <radio-group v-if="form.QUESTIONTYPE[sindex] == '1'" class="ext-group" v-model="form.ANSWER[sindex]"
                           @change="radioQuestionChange($event,sindex)">
                <label class="answer-lable">
                  <radio class="blue"
                         :class="(form.ANSWER[sindex]=='A'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')"
                         :checked="form.ANSWER[sindex]=='A'?true:false" :disabled="isDisabled"
                         value="A"></radio>
                  <text class="title">A.{{ form.QUESTIONLIST[sindex].OPTIONA }}</text>
                </label>
                <label class="answer-lable">
                  <radio class="blue"
                         :class="(form.ANSWER[sindex]=='B'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')"
                         :checked="form.ANSWER[sindex]=='B'?true:false" :disabled="isDisabled"
                         value="B"></radio>
                  <text class="title">B.{{ form.QUESTIONLIST[sindex].OPTIONB }}</text>
                </label>
                <label class="answer-lable">
                  <radio class="blue"
                         :class="(form.ANSWER[sindex]=='C'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')"
                         :checked="form.ANSWER[sindex]=='C'?true:false" :disabled="isDisabled"
                         value="C"></radio>
                  <text class="title">C.{{ form.QUESTIONLIST[sindex].OPTIONC }}</text>
                </label>
                <label class="answer-lable">
                  <radio class="blue"
                         :class="(form.ANSWER[sindex]=='D'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')"
                         :checked="form.ANSWER[sindex]=='D'?true:false" :disabled="isDisabled"
                         value="D"></radio>
                  <text class="title">D.{{ form.QUESTIONLIST[sindex].OPTIOND }}</text>
                </label>
              </radio-group>
              <checkbox-group v-if="form.QUESTIONTYPE[sindex] == '2'" class="ext-group checkbox"
                              @change="checkQuestionChange($event,sindex)">
                <label class="answer-lable">
                  <checkbox :disabled="isDisabled" value="A" :class="form.ANSWER[sindex].includes('A')?'checked':''"
                            :checked="(form.ANSWER[sindex].includes('A') ? true : false)"></checkbox>
                  <text class="title">A.{{ form.QUESTIONLIST[sindex].OPTIONA }}</text>
                </label>
                <label class="answer-lable">
                  <checkbox :disabled="isDisabled" value="B" :class="form.ANSWER[sindex].includes('B')?'checked':''"
                            :checked="(form.ANSWER[sindex].includes('B') ? true : false)"></checkbox>
                  <text class="title">B.{{ form.QUESTIONLIST[sindex].OPTIONB }}</text>
                </label>
                <label class="answer-lable">
                  <checkbox :disabled="isDisabled" value="C" :class="form.ANSWER[sindex].includes('C')?'checked':''"
                            :checked="(form.ANSWER[sindex].includes('C') ? true : false)"></checkbox>
                  <text class="title">C.{{ form.QUESTIONLIST[sindex].OPTIONC }}</text>
                </label>
                <label class="answer-lable">
                  <checkbox :disabled="isDisabled" value="D" :class="form.ANSWER[sindex].includes('D')?'checked':''"
                            :checked="(form.ANSWER[sindex].includes('D') ? true : false)"></checkbox>
                  <text class="title">D.{{ form.QUESTIONLIST[sindex].OPTIOND }}</text>
                </label>
              </checkbox-group>
              <radio-group v-if="form.QUESTIONTYPE[sindex] == '3'" class="ext-group" v-model="form.ANSWER[sindex]"
                           @change="radioQuestionChange($event,sindex)">
                <label class="answer-lable">
                  <radio
                      :class="(form.ANSWER[sindex]=='A'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')"
                      :checked="form.ANSWER[sindex]=='A'?true:false" :disabled="isDisabled"
                      value="A"></radio>
                  <text class="title">A.{{ form.QUESTIONLIST[sindex].OPTIONA }}</text>
                </label>
                <label class="answer-lable">
                  <radio
                      :class="(form.ANSWER[sindex]=='B'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')"
                      :checked="form.ANSWER[sindex]=='B'?true:false" :disabled="isDisabled"
                      value="B"></radio>
                  <text class="title">B.{{ form.QUESTIONLIST[sindex].OPTIONB }}</text>
                </label>
              </radio-group>

            </view>
          </view>
        </view>
        <view v-if="isShowAnswer" class="ext-answer">
          <view class="title">
            正确答案
          </view>
          <view class="content">
            <view class="mb12">
              正确答案：{{ form.ANSWERRIGHT[sindex] }}
            </view>
            <!-- <view class="">
              题目解析：A
            </view> -->
          </view>
        </view>
        <view class="ext-btns"
              :class="(sindex!=-1 && sindex!=0 && sindex != (form.QUESTIONLIST.length-1)) ? 'ext-between' : 'ext-center'">
          <button v-if="sindex!=-1 && sindex!=0" :disabled="isCheckDisabled" class="cu-btn bg-yellow"
                  @click="questionPrevious">上一题
          </button>
          <button v-if="form.QUESTIONTYPE[sindex] == '2' && form.ANSWER[sindex]" class="cu-btn bg-green"
                  @click="$noMultipleClicks(confirmCheck)">查看结果
          </button>
          <button v-if="sindex != (form.QUESTIONLIST.length-1)" :disabled="isCheckDisabled" class="cu-btn bg-yellow"
                  @click="questionNext">下一题
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  basePath,
  corpinfoId,
  deptId,
  loginSession,
  formatDate,
  loginUser
} from '@/common/tool.js';

export default {
  components: {},
  data() {
    return {
      backUrl: '/pages/application/onlinexxks/my-study',
      showRight: false,
      dataFlag: 'noData',
      isDisabled: false,
      isShowAnswer: false,
      isAnswered: false,
      isCheckDisabled: false,
      form: {
        STUDYTASK_ID: '',
        CURRICULUMID: '', // 课程ID
        COURSEWAREID: '', //课件ID
        COURSEWARETYPE: '', //课件分类
        STAGESTUDENTRELATION_ID: '', //课程学员关系ID
        CURRICULUMNAME: '', // 课程名称
        CURRICULUMINTRODUCE: '', // 课程介绍
        CURRICULUMAIM: '', // 课程目的
        STARTTIME: '', // 开始时间
        ENDTIME: '', // 结束时间
        CURRICULUMUSERS: '', // 适用人员
        QUESTION_ID: [], // 试题ID数组
        QUESTIONTYPE: [], // 试题类型数组
        ANSWER: [], // 学员答案
        ANSWERRIGHT: [], // 正确答案
        QUESTIONLIST: [{
          QUESTIONTYPE: '', // 试题类型（单选题、多选题、判断题）
          QUESTIONDRY: '', // 题干
          OPTIONA: '', // 选项A
          OPTIONB: '', // 选项B
          OPTIONC: '', // 选项C
          OPTIOND: '', // 选项D
          ANSWER: '',// 答案
        }] //考题List
      },
      subForm: {},
      noClick: true,
      sindex: 0
    }
  },
  onLoad(event) { //页面第一次加载时触发，从跳转页面返回时不能触发，可以传递参
    this.form.STUDYTASK_ID = event.STUDYTASK_ID
    this.form.COURSEWAREID = event.COURSEWAREID
    this.form.COURSEWARETYPE = event.COURSEWARETYPE
    this.form.CURRICULUMID = event.CURRICULUM_ID
    this.form.STAGESTUDENTRELATION_ID = event.STAGESTUDENTRELATION_ID
    // console.info('页面加载')
    console.info(this.form)
    this.backUrl = '/pages/application/onlinexxks/my-study?STAGESTUDENTRELATION_ID=' + event.STAGESTUDENTRELATION_ID
    this.getData()
    loginSession()
  },
  onBackPress(options) {
    this.BackPage()
    return true
  },
  methods: {
    getData() {
      var _this = this;
      uni.showLoading({
        title: '请稍候...'
      })
      uni.request({
        url: basePath + '/app/mycurriculum/findForStudyByCoursewareId',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          CURRICULUMID: _this.form.CURRICULUMID,
          COURSEWAREID: _this.form.COURSEWAREID,
          COURSEWARETYPE: _this.form.COURSEWARETYPE,
          CORPINFO_ID: loginUser.CORPINFO_ID,
          USER_ID: loginUser.USER_ID,
        },
        success: (res) => {
          uni.hideLoading(); //结束加载中动画
          if ("success" == res.data.result) {
            // _this.pd = res.data.pd;
            _this.form = Object.assign(_this.form, res.data.pd)
            // console.info('getData取值')
            // console.info(this.form)
            if (_this.form.QUESTIONLIST.length > 0) {
              _this.sindex = 0
            }
          } else {
            uni.showToast({
              title: res.data.message,
              duration: 2000
            });
          }
        }
      })
    },
    radioQuestionChange(e, i) {
      this.form.ANSWER[i] = e.detail.value
      this.isDisabled = true
      this.isShowAnswer = true
      this.isAnswered = true

      console.info(this.form.ANSWER[i])
      console.info(this.form.ANSWERRIGHT[i])
      console.info(this.form.ANSWER[i] == this.form.ANSWERRIGHT[i])
    },
    checkQuestionChange(e, i) {
      this.form.ANSWER[i] = e.detail.value
      if (this.trimSpace(this.form.ANSWER[i]).length > 0) {
        this.isCheckDisabled = true
      } else {
        this.isCheckDisabled = false
      }
      this.$forceUpdate()
    },
    confirmCheck() {
      this.isDisabled = true
      this.isShowAnswer = true
      this.isAnswered = true
      this.isCheckDisabled = false
    },
    questionPrevious() {
      this.isCheckDisabled = false
      this.sindex = this.sindex - 1
      var ANSWER_STR = ''
      if (this.form.QUESTIONTYPE[this.sindex] == '2') {
        ANSWER_STR = this.trimSpace(this.form.ANSWER[this.sindex]).length
      } else {
        ANSWER_STR = this.form.ANSWER[this.sindex]
      }
      console.log('ANSWER_STR:' + ANSWER_STR)
      console.log(this.form.ANSWER[this.sindex])
      console.log('ANSWER.includes(\'A\'):' + this.form.ANSWER[this.sindex].includes('A'))
      console.log('ANSWER.includes(\'B\'):' + this.form.ANSWER[this.sindex].includes('B'))
      if (ANSWER_STR) {
        this.isDisabled = true
        this.isShowAnswer = true
      } else {
        this.isDisabled = false
        this.isShowAnswer = false
      }
    },
    questionNext() {
      this.isCheckDisabled = false
      this.sindex = this.sindex + 1
      var ANSWER_STR = ''
      if (this.form.QUESTIONTYPE[this.sindex] == '2') {
        ANSWER_STR = this.trimSpace(this.form.ANSWER[this.sindex]).length
      } else {
        ANSWER_STR = this.form.ANSWER[this.sindex]
      }
      // console.log('ANSWER_STR:'+ANSWER_STR)
      // console.log(this.form.ANSWER[this.sindex])
      // console.log('ANSWER.includes(\'A\'):'+this.form.ANSWER[this.sindex].includes('A'))
      // console.log('ANSWER.includes(\'B\'):'+this.form.ANSWER[this.sindex].includes('B'))
      if (ANSWER_STR) {
        this.isDisabled = true
        this.isShowAnswer = true
      } else {
        this.isDisabled = false
        this.isShowAnswer = false
      }
    },
    assignSubFormData() {
      var ANSWER_STR = ''
      for (let i = 0; i < this.subForm.ANSWER.length; i++) {
        if (this.subForm.QUESTIONTYPE[i] == '2') {
          ANSWER_STR += (this.subForm.ANSWER[i] == '-' ? '-' : this.subForm.ANSWER[i].join('')) + ','
        } else {
          ANSWER_STR += this.subForm.ANSWER[i] + ','
        }
      }
      this.subForm.ANSWER = ANSWER_STR.length > 0 ? ANSWER_STR.slice(0, ANSWER_STR.length - 1) : ''
      this.subForm.QUESTION_ID = this.subForm.QUESTION_ID.join(',')
      this.subForm.QUESTIONTYPE = this.subForm.QUESTIONTYPE.join(',')
      this.subForm.COURSEWAREID = this.subForm.COURSEWAREID.join(',')
      this.subForm.COURSEWARETYPE = this.subForm.COURSEWARETYPE.join(',')
      this.subForm.ANSWERRIGHT = this.subForm.ANSWERRIGHT.join(',')
      this.subForm.QUESTIONLIST = ''
      this.subForm.CORPINFO_ID = corpinfoId
      this.subForm.USER_ID = loginUser.USER_ID
      this.subForm.USERNAME = loginUser.USERNAME
    },
    submitForm() {
      uni.showLoading({
        title: '处理中'
      })
      uni.request({
        url: basePath + '/app/coursestudy/submit',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          ...this.subForm,
          CORPINFO_ID: loginUser.CORPINFO_ID,
          USER_ID: loginUser.USER_ID,
        },
        success: (res) => {
          uni.hideLoading();
          uni.redirectTo({
            url: this.backUrl,
          })
        }
      })
    },
    trimSpace(array) {
      for (var i = 0; i < array.length; i++) {
        if (array[i] == '' || array[i] == null || typeof (array[i]) == 'undefined') {
          array.splice(i, 1)
          i = i - 1
        }
      }
      return array
    },
    BackPage() {
      if (this.isAnswered) {
        this.subForm = Object.assign({}, this.form)
        // console.info('this.subForm转换')
        // console.info(this.form)
        for (let i = 0; i < this.subForm.ANSWER.length; i++) {
          if (this.subForm.QUESTIONTYPE[i] == '2') {
            this.subForm.ANSWER[i] = this.trimSpace(this.subForm.ANSWER[i])
            this.subForm.ANSWER[i] = this.subForm.ANSWER[i].length > 0 ? this.subForm.ANSWER[i].sort() : []
            if (this.subForm.ANSWER[i].length == 0) {
              this.subForm.ANSWER[i] = '-'
            }
          } else {
            if (this.subForm.ANSWER[i].length == 0) {
              this.subForm.ANSWER[i] = '-'
            }
          }
        }
        this.assignSubFormData()
        this.submitForm()
      } else {
        uni.redirectTo({
          url: this.backUrl,
        })
      }
    }
  }
}
</script>

<style>
.ext-bg {
  background-image: linear-gradient(180deg, #0006ff, #0078ff);
  height: 100vh;
  width: 750upx;
  background-size: 100% 100%;
  position: relative;
}

.extin-bg {
  background: url(../../../static/ksbgx.png) no-repeat;
  height: 368upx;
  background-size: 100% 100%;
}

.ext-box {
  position: absolute;
  top: 440upx;
  width: 100%;
  padding: 0 50upx;
}

.ext-topic {
  border-radius: 10upx;
  background-color: #fff;
  width: 100%;
}

.ext-topic .ext-title {
  padding: 20upx 0;
  text-align: center;
  font-weight: bold;
  border-bottom: 1upx dashed #ccc;
}

.ext-topic .ext-content {
  padding: 30upx 30upx;
}

.ext-topic .ext-content .ext-text {
  margin-bottom: 20upx;
  line-height: 1.6;
}

.ext-group {
  display: flex;
  flex-direction: column;
}

.ext-group .answer-lable {
  display: flex;
  align-items: center;
  margin-bottom: 20upx;
}

.ext-group .answer-lable .title {
  margin-left: 14upx;
}

.ext-group .answer-lable:last-child {
  margin-bottom: 0;
}

.ext-answer {
  border-radius: 10upx;
  background-color: #fff;
  width: 100%;
  margin-top: 20upx;
}

.ext-answer .title {
  padding: 20upx 0;
  text-align: center;
  font-weight: bold;
  border-bottom: 1upx dashed #ccc;
  color: #008000;
}

.ext-answer .content {
  padding: 30upx 30upx;
}

.ext-btns {
  display: flex;
  align-items: center;
  padding: 50upx 30upx;
}

.ext-btns button {
  margin-left: 20upx;
}

.ext-btns button:first-child {
  margin-left: 0;
}

.ext-between {
  justify-content: space-between;
}

.ext-center {
  justify-content: center;
}
</style>
