<template>
  <div class="paper" :class="(showPaperCorrection||cardVisabled)?'no-scroll':''" :style="{minHeight:windowHeight+'px'}" v-if="loaded">
  <!-- <div class="paper" :class="showPaperCorrection?'no-scroll':''" :style="($store.state.vesion!='saas'& {minHeight:windowHeight+'px'})||($store.state.vesion!='saas' && cardVisabled & {height:windowHeight-44+'px'})||($store.state.vesion!='saas' && !cardVisabled & '')"> -->
    <!-- 头部标题 -->
    <!-- <div class="collectBank-box__head">
      <van-nav-bar :title="paper_title" left-arrow @click-left="onClickLeft()" class="van-nav-new"/>
      <dropdown-menu title="每日一练" :day="day" top="0" :arrays="dateList" v-if="$route.name=='DoPracticeDaily'" @callback="setDay"></dropdown-menu>
    </div> -->
    <div v-if="$route.name=='DoPracticeDaily' && dateInfoList[currentData] && dateInfoList[currentData].is_test">
      <paper-medal :value="dateInfoList[currentData].testdata.zhunquelv" unit="%" name="正确率"/>
      <div class="paper-opear2 clearfix">
        <div class="paper-opear2__right">
          <div class="paper-icon-sign paper-icon-sign--color5">
            <i></i>正确{{dateInfoList[currentData].testdata.success_tknum}}道题
          </div>
          <div class="paper-icon-sign paper-icon-sign--color2">
            <i></i>错误{{dateInfoList[currentData].testdata.error_num}}道题
          </div>
        </div>
      </div>
      <div class="paper-contianer">
          <p>本次共练习<font class="green-font">{{dateInfoList[currentData].testdata.tk_num}}</font>道题</p>
          <p>做题时间：<font class="red-font">{{dateInfoList[currentData].testdata.adddate}}</font></p>
          <p>练习用时：<font class="red-font">{{Math.floor(dateInfoList[currentData].testdata.exam_time/3600)>=10?Math.floor(dateInfoList[currentData].testdata.exam_time/60):'0'+Math.floor(dateInfoList[currentData].testdata.exam_time/60)}}:{{Math.floor(dateInfoList[currentData].testdata.exam_time/60)>=10?Math.floor(item.time/60):'0'+Math.floor(dateInfoList[currentData].testdata.exam_time/60)}}:{{dateInfoList[currentData].testdata.exam_time%60>=10?dateInfoList[currentData].testdata.exam_time%60:'0'+dateInfoList[currentData].testdata.exam_time%60}}</font></p> 
      </div>
    </div>
    <div v-else>
      <div class="paper-header ktj-line">
        <div class="paper-header__second">{{time}} &nbsp; &nbsp; {{pageTuning}}/{{recode.length}}</div>
        <div class="paper-header__card" @click="sheetclick">
          <img src="../../assets/exam/exam_card.png">
        </div>
        <div class="paper-header-sumbit paper-header-save" v-if="is_saveanswer==1" @click="save(2)">保存</div>
        <div class="paper-header-sumbit" @click="save">交卷</div>
      </div>
      <div class="paper-contianer" v-if="paperTkList.length" :class="(is_righttfStatu&&is_righttf==1)&&'dont_copy'">
        <transition name="fade">
          <div class="paper-slide-tips" v-if="showPaperSlideTips">
            <div class="paper-slide-tips__inner">
              <img src="../../assets/exam/icon-slide.png">
              滑动切换上下题
              <van-button @click="iKnow">我知道啦</van-button>
            </div>
          </div>
        </transition>
        <transition name="fade">
          <div class="paper-slide-tips" style="position: fixed;" v-if="showPaperCorrection && showClass">
            <div class="paper-slide-tips__inner correction-con">
                <img src="../../assets/exam/close2.png" class="correction-close" @click="showPaperCorrection=false">
                <div class="correction-box">
                  <h3>题目纠错</h3>
                  <p>一直在完善，从未停歇过，但有些题目可能仍然存在瑕疵，对您造成的不便我们深表歉意！</p>
                  <p>您纠错的题目ID:{{correctionid}}</p>
                </div>
                <div class="correction-option">
                  <p>为方便我们排查错误，请您详细描述本题错误，例如：</p>
                  <van-radio-group v-model="redressType">
                    <van-radio :name="item.id" checked-color="#ff795c" v-for="item in radioOption" :key="item.id">{{item.name}}</van-radio>
                  </van-radio-group>
                  <div class="correction-textarea">
                    <textarea rows="5" v-model="redresscon" class="redress-textarea"></textarea>
                  </div>
                  <div class="correction-btn">
                      <van-button type="default" @click="submitError" style="width: 100%;">提交纠错</van-button>
                  </div>
                </div>
            </div>
          </div>
        </transition>
        <swiper :options="swiperOption" ref="choice">
          <swiper-slide
            v-for="(item,i) in paperTkList"
            :key="i"
            :style="{minHeight:windowHeight-143+'px'}"
          >
            <div v-if="item.type == 'dt'">
              <div class="paper-contianer__bigtitle">{{item.title}}</div>
              <div
                class="paper-contianer__desc"
                v-if="$route.name === 'TestPage'"
              >本大题下有{{item.tklist.length}}小题，共{{item.dtscore}}分</div>
              <div class="paper-contianer__intro" v-html="item.dtintro"></div> 
            </div>
            <div v-else-if="item.type == 'xt'">
              <question-title :type-name="item.tktype_name" :title="item.title" :is_hearing="item.is_hearing" :audiofile="item.tkinfo.audiofile"/>
              <div class="paper-option-box" v-if="item.tktype == 1">
                <!--简答题-->
                <short-answer :item="item" @callback="handleShortAnswer"/>
              </div>
              <div
                class="paper-option-box"
                v-else-if="item.tktype == 2 || item.tktype == 3 || item.tktype == 4"
              >
                <!--单选、多选、判断-->
                <multiple-choice :item="item" :userAnswer="item.useranswer" @change="handleChoiced"/>
              </div>

              <div class="paper-option-box" v-if="item.tktype == 5">
                <!--填空题-->
                <fill-blanks :item="item" @callback="handleFillBlankAnswer"/>
              </div>

              <div v-if="item.tktype == 6">
                <!--组合题-->
                <div
                  class="paper-xt"
                  :class="xtindex < item.tkinfo.childtk.length-1 && 'line'"
                  v-for="(make,xtindex) in item.tkinfo.childtk"
                  :key="xtindex"
                >
                  <div class="paper-xt__title">{{xtindex+1}})、 <font v-html="make.title"><!--{{make.title}}--></font></div>
                  <div v-if="make.tktype == 1">
                    <short-answer :item="make" @callback="handleShortAnswer"/>
                  </div>
                  <div v-else-if="make.tktype == 2 || make.tktype == 3 || make.tktype == 4">
                    <multiple-choice
                      :is-combination-question="true"
                      :item="make"
                      @change="handleChoiced"
                      :userAnswer="make.useranswer"
                      :parenttkid="item.tkid"
                    />
                  </div>

                  <div v-else-if="make.tktype == 5">
                    <fill-blanks :item="make" @callback="handleFillBlankAnswer"/>
                  </div>
                  <!--题目解析-->
                  <!-- <div
                    class="tk-analysis"
                    v-if="$route.name === 'DoError' || $route.name === 'DoFavtest'"
                  >
                    <div align="right">
                      <div
                        class="tk-analysis__button"
                        v-if="!make.analysis_flag"
                        @click="viewAnalysis(make)"
                      >查看解析</div>
                    </div>
                    <analysis-info :item="make" v-if="make.analysis_flag"/>
                  </div> -->
                  <div
                    class="tk-analysis"
                   v-if="isShow">
                    <div align="right">
                      <div
                        class="tk-analysis__button"
                        v-if="!make.analysis_flag && $route.name=='TestPage'"
                        @click="viewAnalysis(make,item.tkid,xtindex)"
                      >查看解析</div>
                      <div
                        class="tk-analysis__button"
                        v-else-if="!make.analysis_flag && $route.name!='TestPage'"
                        @click="lookAnswer(make)"
                      >查看解析</div>
                    </div>
                    <analysis-info :item="make" v-if="make.analysis_flag" :parenttkid="item.tkid"/>
                  </div>
                  <!--题目解析结束-->
                </div>
              </div>
              <div
                class="tk-analysis" v-if="isShow"
                >

                <!--题目解析-->
                <div align="right">
                  <div
                    class="tk-analysis__button"
                    v-if="!item.analysis_flag && item.tktype!=6 && $route.name=='TestPage'"
                    @click="viewAnalysis(item)"
                  >查看解析</div>
                  <div
                    class="tk-analysis__button"
                    v-if="!item.analysis_flag && item.tktype!=6 && $route.name!='TestPage'"
                    @click="lookAnswer(item)"
                  >查看解析</div>
                </div>
                <analysis-info :item="item" v-if="item.analysis_flag"/>

                <!--题目解析结束-->
              </div>
              <div class="paper-opear">
                <div class="paper-opear__correction" @click="correction(item.tkid)" v-if="item.iscorrection">
                  <img src="../../assets/exam/correction.png" style="width:14px;">纠错此题
                </div>
                <div class="paper-opear__sign" style="margin-left:10px;" @click="sign(i)" :class="{signed:item.signed}">
                  <img src="../../assets/exam/exam_sign.png" v-if="item.signed==false"><img src="../../assets/exam/exam_active_sign.png" v-else-if="item.signed==true">标记此题
                </div>
                <div
                  class="paper-opear__collect"
                  @click="collect(item)"
                  :class="{collected:item.collect}"
                  v-if="isshow_collect"
                >
                  <img src="../../assets/exam/exam_collected.png" v-if="item.collect==0"><img src="../../assets/exam/exam_active_collected.png" v-if="item.collect==1">{{item.is_collection?'已收藏':'收藏此题'}}
                </div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
        <answer-sheet :visible.sync="cardVisabled" ref="sheet" @callback="handleCardClick"/>
      </div>
      <van-popup v-model="showPopup" class="payinfo-popup">
        <div class="payinfo-tips">{{payInfo}}</div>
        <div class="payinfo-btn">
          <van-button type="primary" @click="buyExam" style="margin-right:0.5rem;">购买</van-button>
          <van-button type="default" @click="cancelPay">取消</van-button>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>

import { isArrayOrObject,getLetterIndex } from "@/utils";
import PaperMedal from "./PaperComponent/PaperMedal"; 
import {
  GetPaperDetail,
  SetPaperCollect,
  SetPaperAnswer,
  GetTestTk,
  EndTest,
  GetDailyTestDateList,
  GetDailyTestPaper,
  EndDailyTest,
  SubmitPaperAnswer,
  PayPaper,
  GetPaperErrortype,
  SetTkCorrection
} from "@/api/paper";
import {
  
} from "@/api/paper";
/**答题卡组件 */
import AnswerSheet from "./AnswerSheet";
/**题目标题组件 */
import QuestionTitle from "./PaperComponent/QuestionTitle";
/**解析内容组件 */
import AnalysisInfo from "./PaperComponent/AnalysisInfo";
/**多选、单选、判断组件 */
import MultipleChoice from "./PaperComponent/MultipleChoice";
/**填空题组件 */
import FillBlanks from "./PaperComponent/FillBlanks";
/**简答题组件 */
import ShortAnswer from "./PaperComponent/ShortAnswer";
export default {
  name: "PaperTestPage",
  components: {
    AnswerSheet,
    MultipleChoice,
    FillBlanks,
    ShortAnswer,
    QuestionTitle,
    AnalysisInfo,
    PaperMedal
  },
  data() {
    return {
      isSwiperFirsetEnd: false,
      windowHeight: window.innerHeight,
      /**轮播参数 */
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 15,
        autoHeight: true,
        on: {
          transitionEnd: () => {
            this.slideFlag = true;
            /**是否已滑动最后一条 */
            let isLast = this.pageTuning == this.recode.length;
            let _tkids = [];
            let swiperRealIndex = this.getSwiper().realIndex;
            this.paperTkList.map((item, index) => {
              if (item.type === "xt") {
                _tkids.push(item.tkid);
                if (index === swiperRealIndex) {
                  this.pageTuning = item.num;
                }
              }
            });

            if (
              isLast &&
              this.$route.name === "Exercise" &&
              this.$route.query.type != 6 &&
              !this.isSwiperFirsetEnd
            ) {
              this.isSwiperFirsetEnd = true;
              this.$showLoading("加载更多题目中");
              let params = {
                categoryid: this.categoryid,
                type: this.$route.query.type,
                isrand:this.$route.query.isrand,
                tktype:this.$route.query.tktype || 0,
                tkids: _tkids
              };
              switch(Number(this.$route.query.type)){
                case 4:
                  params.sectionid = this.$route.query.sectionid
                  break
                case 5:
                  params.knowledgeid = this.$route.query.knowledgeid
                  break
                case 7:
                  params.courseid = this.$route.query.courseid
                  params.typeid = this.$route.query.typeid
                  break
              }
              GetTestTk(params).then(res => {
                this.$hideLoading();
                if (res.result) {
                  let tmlist = res.data.tmlist[0];
                  if (tmlist) {
                    let tkindex = this.paperTkList.length;
                   
                    let xtArr = [];
                    tmlist.tklist.map(item => {
                      if(item.look_analysis_free){
                        this.isShow = true
                      }else{
                        this.isShow = false
                      }
                      let xt = this.tkItemInit(item, 0, tkindex + xtArr.length);
                      xtArr.push(xt);
                    });
                    this.paperTkList = this.paperTkList.concat(xtArr);
                  }
                  this.isSwiperFirsetEnd = false;
                } else {
                  this.$toast(res.msg);
                }
              });
            }
          }
        }
      },
      /**是否显示告知用户滑动切换上下题的提示 */
      showPaperSlideTips: false,
      /**试卷题目列表 */
      paperTkList: [],
      /**判断正规试卷是否单题查看解析的参数 */
      isShow:false,
      /**标题 */
      paper_title:'',
      /**试卷id */
      paperid: 0,
      /**显示答题卡 */
      cardVisabled: false,
      /**记录题目选中数组*/
      recode: [],
      /**试卷翻页记录长度 */
      pageTuning: 0,

      /**考试时间 */
      time: "00:00:00",
      /**当前秒数，用于计时 */
      second: 0,
      /**
       * 阅卷类型
       * 1自动阅卷
       * 2手动阅卷
       */
      scoreout: null,
      /**当前分类id */
      categoryid: 0,
      /**小题数量（递增） */
      xtnum: 0,
      /**自动滑到一下题的状态，当处于滑动状态开关将关闭，滑动结束开启 */
      slideFlag:true,
      /**是否禁止copy 0:不禁止，1禁止 */
      is_righttf:0,
      is_righttfStatu:false,
      /**每日一练的日期 */
      dateList:[],
      dateInfoList:[],
      currentData:0,//当前时间
      day:'',//当天时间
      loaded:false,
      correctionid:0,//纠错题库id
      showPaperCorrection:false,//纠错窗口
      redresscon:'',
      redressType:19,
      radioOption:[],
      showClass:true,
      showPopup:false,
      payInfo:{},
      isshow_collect:0,
      look_tkanalysis_isfree_tips:'',//练习的查看答案权限判断
      set_time:0,//练习规定用时 
      dailyid:0,//每日一练提交时候的id
      is_saveanswer:0,//是否开启保存功能
    };
  },
  activated() {
    this.dataInit();
    if(this.$route.name=='TestPage'){
      this.loadPage()
    }else{
      /**练习题需要确认用户登录才可进入 */
      this.$store.ready((state)=>{
        if(state.userid != 0){
          this.loadPage()
        }else{
          this.$toast('您还未登录，请登录后做题！').then(() => {
            this.$router.back();
          });
        }
      })
    }
    
  },
  mounted() {
    this.start();
    //获取纠错的类型
    GetPaperErrortype().then(res=>{
        if(res.result){
            this.radioOption = res.data
        }else{
            this.radioOption = []
        }
    })
  },
  methods: {
    /**
     * 数据初始化
     */
    dataInit() {
      this.pageTuning = 0;
      this.xtnum = 0;
      this.paper_title = ''
      this.categoryid = this.$route.query.categoryid;
      this.paperid = this.$route.query.paperid;
      this.paperTkList = [];
      this.recode = [];
      this.time = "00:00:00";
      this.second = 0;
      this.$store.ready(state => {
        let userid = state.userid;
        if (localStorage[`EXAM_SLIDE_TIPS_${userid}`] != 1) {
          this.showPaperSlideTips = true;
        }
      });
    },
    /**
     * 每日一练的试卷请求
     */
    getDoPracticeDaily(){
      document.title = this.$route.query.title || '';
      this.paper_title = this.$route.query.title || '';
      let params = {
        categoryid: this.categoryid,
        day:this.$route.query.day
      };
      this.$showLoading();
      GetDailyTestPaper(params).then(res => {
        if (res.result) {
          this.look_tkanalysis_isfree_tips = res.data.look_analysis_free;
          if(res.data.is_righttf){
            this.is_righttf = res.data.is_righttf
            this.is_righttfStatu = true
          }
          this.dailyid = res.dailyid
          this.set_time = res.set_time
          this.$hideLoading();
          let paperTkList = res.data.tmlist;
          if (paperTkList.length) {
            let _tkList = [];
            paperTkList.map((dt, index) => {
              dt.type = "dt";
              dt.prentKey = index;
              _tkList.push(dt);
              dt.tklist.map((xt, xtIndex) => {
                let _xt = this.tkItemInit(xt, dt.prentKey, _tkList.length);
                _tkList.push(_xt);
              });
            });
            this.pageTuning = 1;
            this.paperTkList = _tkList;
          } else {
            this.$toast("未找到任何题目").then(() => {
              this.$router.back();
            });
          }
          this.scoreout = res.data.scoreout;
        } else {
          this.$toast(res.msg).then(() => {
            this.$router.back();
          });
        }
        this.loaded = true
      });
    },

    /**查看解析 */
    lookAnswer(item) {
      if (this.look_tkanalysis_isfree_tips.result) {
        if (!item.analysis_flag) {
          item.analysis_flag = true;
        }
      } else {
        
        this.$toast(this.look_tkanalysis_isfree_tips.msg);
      }
    },
    /**
     * 加载做题页面
     */
    loadPage(){
      let API;
      let params = {};
      switch(this.$route.name){
        case "TestPage":
          this.paper_title = this.$route.query.title
          API = GetPaperDetail;
          params = {
            categoryid: this.categoryid,
            paperid: this.paperid,
          };
          break
        case "Exercise":
          API = GetTestTk;
          params = {
            categoryid: this.categoryid,
            type: this.$route.query.type,
            isrand:this.$route.query.isrand,
            tktype:this.$route.query.tktype || 0,
            tkids: []
          };
          switch(Number(this.$route.query.type)){
            case 1:
              this.paper_title = '题库练习'
              break
            case 2:
              this.paper_title = '错题练习'
              break
            case 3:
              this.paper_title = '收藏练习'
              break
            case 4:
              this.paper_title = '自定义题库练习'
              params.sectionid = this.$route.query.sectionid
              break
            case 5:
              this.paper_title = '知识点练习'
              params.knowledgeid = this.$route.query.knowledgeid
              break
            case 6:
              this.paper_title = '每日一练'
              break
            case 7:
              this.paper_title = '课时题库练习'
              params.courseid = this.$route.query.courseid
              params.typeid = this.$route.query.typeid
              break
          }
          break
      }
      document.title = this.paper_title
      if (API) {

        if(this.$route.query.type == 6){
          /**每日一练单独处理 */
          GetDailyTestDateList({
              categoryid:this.$route.query.categoryid
            }).then(res=>{
              this.dateInfoList = res.data
              res.data.map((item,i)=>{
                
                if(item.day==this.$route.query.day){
                  
                  this.currentData = i
                  this.day = item.day
                  if(item.is_test){
                    this.loaded = true;
                  }else{
                    this.getDoPracticeDaily()
                  }
                }
              })
          })
        }else{
          this.$showLoading()
          API(params).then(res => {
            if (res.result) {
              if(this.$route.name=="TestPage"){
                this.is_saveanswer = res.data.is_saveanswer
                this.set_time = res.data.exam_time
                if(res.data.realtest == 0 && res.data.is_tjda==1){
                  this.isShow = true
                }else{
                  this.isShow = false
                }
              }else{
                this.look_tkanalysis_isfree_tips = res.data.look_analysis_free;
                this.isShow = true
              }
              this.isshow_collect = res.data.isshow_collect
              if(res.data.is_righttf){
                this.is_righttf = res.data.is_righttf
                this.is_righttfStatu = true
              }
              this.$hideLoading();
              let paperTkList = res.data.tmlist;
              if (paperTkList.length) {
                let _tkList = [];
                paperTkList.map((dt, index) => {
                  dt.type = "dt";
                  dt.prentKey = index;
                  _tkList.push(dt);
                  dt.tklist.map((xt, xtIndex) => {
                    let _xt = this.tkItemInit(xt, dt.prentKey, _tkList.length);
                    _tkList.push(_xt);
                  });
                });
                this.pageTuning = 1;
                this.paperTkList = _tkList;
              } else {
                this.$toast("未找到任何题目").then(() => {
                  this.$router.back();
                });
              }
              this.scoreout = res.data.scoreout;
              this.loaded = true
            } else {
              this.$hideLoading();
              if(res.returncode==1002||res.returncode==1062){
                this.$toast(res.msg).then(() => {
                  window.location.href = res.url;
                });
              }else if(res.returncode==1063||res.returncode==1064||res.returncode==1065){
                this.payInfo = res.msg
                this.showPopup = true
              }else{
                this.$toast(res.msg).then(() => {
                  this.$router.back();
                });
              }
              this.loaded = true
            }
          });
        }
      }
    },
    /**
     * 初始化题目字段
     * @param {Object} 题目对象
     * @param {Number} 归属大题的索引值
     * @param {Number} 绑定轮播图的索引值，用于快速滑到对应题号
     */
    tkItemInit(tkItem, dtIndex, swiperIndex) {
      this.xtnum++;
      /**小题标志 */
      tkItem.type = "xt";

      /**是否已标记 */
      tkItem.signed = false;
      /**储存当前选中的答案 */
      if(tkItem.useranswer instanceof Array){
        tkItem.useranswer = tkItem.useranswer;
      }else{
        tkItem.useranswer = []
      }
      
      /**即时显示答题对错状态 */
      tkItem.showAnswerStatus = false;
      /**用于找到答题卡对应的题号，增加标志、已做等样式 */
      tkItem.num = this.xtnum;

      /**当前大题的索引值*/
      tkItem.subKey = dtIndex;
      /**增加解析开关 */
      tkItem.analysis_flag = false;
      if (tkItem.tktype == 5) {
        let topicSplitArr = tkItem.title.split(/_{3,}/)
        if(!tkItem.tkinfo.answer){
          tkItem.tkinfo.answer = []
          topicSplitArr.map((text,i)=>{
            if(i>0){
              tkItem.tkinfo.answer.push({
                options:""
              })
            }
          })
        }else{
          tkItem.tkinfo.answer.map(arrItems => {
            arrItems.options = "";
          });
        }
      } else if (tkItem.tktype == 6) {
        tkItem.tkinfo.childtk.map(child => {
          child.analysis_flag = false;
          child.showAnswerStatus = false;
          child.num = this.xtnum;
          if(child.useranswer instanceof Array){
            child.useranswer = child.useranswer;
          }else{
            child.useranswer = []
          }
          //child.useranswer = [];
        });
      }

      /**
       * 答题卡
       */
      this.recode.push({
        bindSwiperIndex: swiperIndex,
        num: this.xtnum,
        sign: false,
        answered: false
      });
      
      return tkItem;
      
    },
    /**
     * 获取当前轮播对象
     */
    getSwiper() {
      return this.$refs.choice.swiper || {};
    },
    /**
     * 单选、多选、判断选择触发回调
     * @param {Object} 题目对象
     * @param {Array} 选项值数组
     * @param {Boolean} 是不是组合题
     */
    handleChoiced(item, optionArr, isCombinationQuestion) {
      this.recode[item.num - 1].answered = true;
      item.useranswer = optionArr;
      if (item.tktype == 2 || item.tktype == 4) {
        if (!isCombinationQuestion) {
          this.goNext();
        }
      }
    },
    /**
     * 切换到下一题
     */
    goNext() {
      if(this.slideFlag){
        this.slideFlag = false;
        setTimeout(() => {
          this.getSwiper().slideNext(400);
        }, 400);
      }
    },
    /**
     * 填空题提交答案
     * @param {Object} 题目对象
     */
    handleFillBlankAnswer(item) {
      let anserArr = [];
      item.tkinfo.answer.map(res => {
        anserArr.push(res.options);
      });
      this.recode[item.num - 1].answered = true;
      item.useranswer = anserArr;
    },
    /**
     * 简答题提交答案
     * @param {Object} 简答题对象
     **/
    handleShortAnswer(item) {
      this.recode[item.num - 1].answered = true;
    },

    /**
     * 答题卡信息传值
     */
    sheetclick() {
      if (this.cardVisabled) {
        this.cardVisabled = false;
      } else {
        this.cardVisabled = true;
        this.$nextTick(() => {
          this.$refs.sheet.reset({
            answerList: this.recode,
            swiperChoice: this.$refs.choice
          });
        });
      }
    },
    /**
     * 答题卡回调跳转当前选中题
     * @param {Number} 题目索引值
     */
    handleCardClick(index) {
      this.getSwiper().slideTo(index, 500, false);
      this.cardVisabled = false;
    },
    /**
     * 标记当前题目
     * @param {Number} 当前题目索引值
     */
    sign(index) {
      let signItem;
      this.recode.map(item=>{
        if(item.bindSwiperIndex == index){
          signItem = item
        }
      })
      if(!signItem){
        return
      }
      if (signItem.sign == false) {
        signItem.sign = true;
        this.paperTkList.map((item, i) => {
          if (i == index) {
            item.signed = true;
          }
        });
      } else {
        signItem.sign = false;
        this.paperTkList.map((item, i) => {
          if (i == index) {
            item.signed = false;
          }
        });
      }
    },
    /**
     * 收藏题目
     * @param {Object} 题目对象
     */
    collect(item) {
      if(item.collect==0){
        item.collect=1
      }else{
        item.collect=0
      }
      
      SetPaperCollect({
        type: 2, //1试卷 2题目
        categoryid: this.categoryid,
        infoid: item.tkid,
        collect:item.collect
      }).then(res => {
        if (res.result) {
          // item.collect = !item.collect;
        }
      });
    },
    /**
     * 纠错题目
     * @param {Number} 题目id
     */
    correction(tkid){
      this.correctionid = tkid
      this.showPaperCorrection = true
    },
    /**
     * 查看解析
     * @param {Object} 题目对象
     */
    viewAnalysis(item,parenttkid,xtindex) {
      let tkid=0
      if(parenttkid){
        tkid = parenttkid
      }else{
        tkid = item.tkid
      }
      if(this.$route.name=='TestPage'){
        /**单题交卷 */
        this.$set(item,'analysis_flag',false)
        let useranswer = []
        
        if(item.tktype==1){
            
            if(item.useranswer!=''){
                useranswer = [item.useranswer.toString()]
            }else{
                this.$toast('请输入答案')
                return false
                //useranswer = []
            }
            
        }else if(item.tktype == 2 || item.tktype == 3){
          
          /**获取打乱后的真实答案 */
          if(item.useranswer && item.useranswer.length){
              item.useranswer.map(letter=>{
                let index = getLetterIndex(letter);
                
                if(parenttkid){
                  useranswer.push(letter)  
                }else{
                  useranswer.push(item.tkinfo.real_answer[index])  
                }
                //useranswer.push(item.tkinfo.real_answer[index])  
              })
          }else{
              this.$toast('请选择答案')
              return false
          }
        }else{
            
            if(item.useranswer&&item.useranswer.length){
                useranswer = item.useranswer
            }else{
                this.$toast('请选择答案')
                return false
            }
            
        }
        
        SubmitPaperAnswer({
            paperid:this.paperid,
            tkid:tkid,
            xttkid:xtindex||0,
            useranswer:useranswer
        }).then(res=>{
            
            if(res.result){
                item.analysis_flag = true
                item.showAnswerStatus = true;
                item.userscore = res.data.userscore
                item.tkinfo.analysis = res.data.analysis
                item.tkinfo.answer = res.data.answer
                item.score_rule = res.data.score_rule

            }else{
                item.analysis_flag = false
                this.$toast(res.msg)
            }
        })
      }else{
        item.analysis_flag = true;
        item.showAnswerStatus = true;
      }
      
    },
    /**
     * 触发滑动提示的我知道按钮
     */
    iKnow() {
      this.$store.ready(state => {
        let userid = state.userid;
        localStorage[`EXAM_SLIDE_TIPS_${userid}`] = 1;
      });
      this.showPaperSlideTips = false;
    },
    /**返回上一页 */
    onClickLeft() {
      this.$router.go(-1);
    },
    /**每日一练设置日期 */
    setDay(name,index,isActive){
      this.day=name
      this.currentData = index
      if(!isActive){
        this.getDoPracticeDaily()
      }
      
    },
    /**
     * 交卷type=1代表练习时间已到自动交卷 type=2代表保存 type=0代表提交
     */
    save(type) {

      /**构造大题数组 */
      let answerResult = [];
      this.paperTkList.map((item, i) => {
        if (item.type == "dt") {
          answerResult.push({
            title: item.title,
            tklist: []
          });
        }
      });
      /**填充小题 */
      this.paperTkList.map((item, i) => {
        if (item.type == "xt") {
          let answerItem = [];
          if (item.tktype == 6) {
            item.tkinfo.childtk.map((child, i) => {
              answerItem.push({
                tktype: child.tktype,
                score: child.score,
                useranswer:
                  isArrayOrObject(child.useranswer) !== "Array"
                    ? [child.useranswer]
                    : child.useranswer
              });
            });
          } else {
            answerItem =
              isArrayOrObject(item.useranswer) !== "Array"
                ? [item.useranswer]
                : item.useranswer;
          }
          answerResult[item.subKey].tklist.push({
            tkid: item.tkid,
            useranswer: answerItem,
            tktype: item.tktype,
            score: item.score
          });
        }
      });
      let API;
      let params = {};
      let flag = 1 //0是保存 1是交卷
      switch (this.$route.name) {
        case "TestPage":
          API = SetPaperAnswer;
          
          if(type==2){
            flag = 0
          }else{
            flag = 1
          }
          params = {
            categoryid: this.categoryid,
            paperid: this.paperid,
            flag:flag,
            answer: answerResult,
            time: this.second,
            workid:this.$route.query.workid,
            stu:this.$route.query.stu
          };
          break;
        case "Exercise":
          API = EndTest;
          params = {
            categoryid: this.categoryid,
            answer: answerResult,
            examtime: this.second,
            type: this.$route.query.type,
            isrand:this.$route.query.isrand
          };
          switch(Number(this.$route.query.type)){            
            case 4:
              params.sectionid = this.$route.query.sectionid
              break
            case 5:
              params.knowledgeid = this.$route.query.knowledgeid
              break
            case 6:
              API = EndDailyTest
              params.dailyid = this.dailyid
              params.day = this.day
              break
            case 7:
              params.courseid = this.$route.query.courseid,
              params.typeid = this.$route.query.typeid
              break
          }
          break
      }
      if (API) {
        this.$showLoading("正在交卷");
        API(params).then(res => {
          this.$hideLoading();
          if (res.result) {
            let savetips = ''
            if(type==1){
              savetips = '时间已到，自动交卷成功'
            }else if(type==2){
              savetips = '保存成功'
            }else{
              savetips = '交卷成功'
            }
            this.$toast(savetips, "success").then(() => {
              switch (this.$route.name) {
                case "TestPage":
                  if(type!=2){
                    if(res.subjective_count){
                      this.$router.push({
                        path:'/exam/OwnScore',
                        query:{
                          answerid:res.id,
                          title:this.paper_title,
                          paperid:this.paperid,
                          type:1,
                          categoryid:this.categoryid,
                        }
                      })
                    }else{
                      this.$router.push({
                        path: "/exam/result",
                        query: {
                          id: res.id,
                          type: 1,
                          paperid:this.paperid,
                          categoryid:this.categoryid,
                          title:this.paper_title
                        }
                      });
                    }
                  }
                  
                  break;
                case "Exercise":
                  this.$router.push({
                    path: "/exam/result",
                    query: {
                      type: 2,
                      id: res.id,
                      categoryid:this.categoryid,
                      title:'查看解析'
                    }
                  });
                  break;
              }
            });
          }
        });
        
      }
    },
    /**
     * 获取时间 格式 hh:mm:ss
     * @param {Number} 秒
     */
    getTime(second) {
      let hour, minute;
      hour = Math.floor(second / 3600);
      second = second - hour * 3600;
      minute = Math.floor(second / 60);
      second = second - minute * 60;
      let _hour = hour < 10 ? "0" + hour : hour;
      let _minute = minute < 10 ? "0" + minute : minute;
      let _second = second < 10 ? "0" + second : second;
      this.time = _hour + ":" + _minute + ":" + _second;
      
    },
    /**
     * 启动计时器
     */
    start() {
      let timer = setInterval(() => {
        this.second += 1;
        this.getTime(this.second);
        
        if(this.$route.name=='TestPage'||this.$route.query.type == 6){
            if(this.second==(this.set_time*60)){
              this.save(1)
            }
        }
      }, 1000);
      
    },
    /**提交纠错 */
    submitError(){
        SetTkCorrection({
            tkid:this.correctionid,
            categoryid:this.categoryid,
            content:this.redresscon,
            errortype:this.redressType,
        }).then(res=>{
            this.showPaperCorrection=false
            if(res.result){
                  this.$toast("提交成功", "success").then(() => {
                      this.redresscon = ''
                  })
            }else{
                  this.$toast("提交失败", "fail").then(() => {
                      this.redresscon = ''
                  })
            }
        })
    },
    /**取消购买试卷 */
    cancelPay(){
      this.$router.back();
    },
    /**购买试卷*/
    buyExam(){
      this.showPopup = false
      PayPaper({
          paperid:this.$route.query.paperid
      }).then(res=>{
          if(res.result){
              this.$toast('支付成功').then(() => {
                this.loadPage()
              });
          }else{
              this.$toast(res.msg).then(() => {
                this.$router.back();
              });
          }
      })
    } 
  },
  watch:{
      'redressid'(){
          this.showClass = false;
          this.$nextTick(()=>{
              this.showClass = true
              this.redresscon = ''
          })
      }
  },
  filters: {
    /**
     * 参考答案内容过滤
     */
    answer(val, tktype) {
      val = val.toString();
      if (val === "") {
        return "无";
      } else {
        if (tktype == 4) {
          return val === "1" ? "正确" : "错误";
        } else {
          return val;
        }
      }
    }
  }
};
</script>
<style scoped>
.paper {
  background: #fff;
  min-height:100%;
  position: relative;
  overflow: hidden;
}
.van-icon-arrow-left{
    color: #4d4c4c !important;
}
.paper-slide-tips {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
  line-height: 34px;
  display: flex;
  align-items: center;
}
.paper-slide-tips img {
  height: 160px;
}

.paper-slide-tips .ktj-button {
  background: none;
  color: #fff;
  border: 1px solid #fff;
  margin-top: 80px;
}

.paper-slide-tips__inner {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  text-align: center;
}

.paper-header {
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 57px;
  font-size: 13px;
}
.paper-header__second {
  color: #525b67;
  padding-right: 10px;
  flex: 1;
}
.paper-header__card {
  padding-right: 15px;
  line-height: 20px;
}
.paper-header__card img {
  height: 20px;
  float: left;
  margin-right: 5px;
}
.paper-header-sumbit {
  padding: 0 20px;
  background: #ff795c;
  color: #fff;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  border-radius: 2px;
}
.paper-header-save{
  margin-right: 0.5rem;
  background: #fff;
  color: #ff795c;
  border: 0.05rem solid #ff795c;
  box-sizing: border-box;
  line-height: 24px;
}
.paper-contianer {
  padding: 20px 15px;
}

.paper-xt__title {
  font-size: 14px;
  color: #3e4754;
  line-height: 1.6;
}

.paper-contianer__bigtitle {
  font-size: 16px;
  font-weight: bold;
}
.paper-contianer__desc {
  line-height: 24px;
  color: #999;
  margin-top: 5px;
}
.paper-contianer__intro {
  font-size: 14px;
  line-height: 24px;
  padding-top: 10px;
}
.paper-xt,
.paper-option-box {
  padding: 15px 0;
}
.paper-option,
.paper__answer-area {
  padding: 10px 0;
  line-height: 32px;
  color: #3e4754;
  font-size: 14px;
}
.paper-option span {
  width: 32px;
  height: 32px;
  text-align: center;
  font-size: 15px;
  color: #3e4754;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  margin-right: 15px;
}
.paper-opear {
  text-align: right;
}
.paper-opear__sign,.paper-opear__correction {
  display: inline-block;
}
.paper-opear__sign img,.paper-opear__correction img {
  width: 11px;
  padding-right: 5px;
  position: relative;
  top: 2px;
}
.paper-opear__collect {
  display: inline-block;
  margin-left: 10px;
}

.paper-opear__collect img {
  width: 11px;
  padding-right: 5px;
}
.paper-contianer {
  position: relatives;
}
.actived {
  background: #ff795c;
  color: #fff !important;
}
.signed,
.collected {
  color: #ff795c;
}
.paper-option-textarea {
  display: block;
  resize: vertical;
  padding: 5px 15px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 100%;
  height: 10rem;
  font-size: inherit;
  color: #606266;
  background-color: #fff;
  background-image: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  margin: 10px 0;
}
.paper-option-input {
  margin-left: 10px;
  height: 30px;
  line-height: 30px;
  border: 0px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  width: 75%;
}
/**解析*/
.tk-analysis {
  padding: 15px 0;
}
.tk-analysis__button {
  height: 30px;
  line-height: 30px;
  background: #fff1ee;
  display: inline-block;
  border: 1px solid #ffbcad;
  border-radius: 4px;
  color: #ff795c;
  padding: 0 15px;
}
.dont_copy{
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}
.paper-opear2 {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 0;
  background: #f1f1f1;
}
.paper-opear2__right {
  float: right;
  margin-right: 15px;
}
.paper-icon-sign {
  display: inline-block;
  padding-left: 20px;
  font-size: 13px;
  color: #8f8f8f;
  position: relative;
  margin-left: 20px;
}
.paper-icon-sign i {
  position: absolute;
  left: 0;
  top: 1px;
  width: 14px;
  height: 14px;
  display: block;
  border-radius: 50%;
}
.paper-icon-sign--color1 i {
  background: #ffb03b;
}
.paper-icon-sign--color2 i {
  background: #ed7c78;
}
.paper-icon-sign--color3 i {
  background: #fff;
  border: 1px solid #dcdcdc;
}
.paper-icon-sign--color4 i {
  background: #dcdcdc;
}
.paper-icon-sign--color5 i {
  background: #32d432;
  border: 1px solid #32d432;
}
.paper-contianer p{
  line-height: 30px;
  font-size: 13px;
  color: #888;
}
.green-font{
  color: #32d432;
}
.red-font{
  color: #ff795c;
}
.van-nav-new{
  z-index:inherit !important;
}
.van-nav-bar__left {
  z-index: 3000;
}
.correction-con{
  background: #fff;
  width: 90%;
  height: 70%;
  position: relative;
}

.correction-close{
  width: 30px;
  height: 30px !important;
  position: absolute;
  right: -15px;
  top: -30px;
}
.correction-box h3{
  color: #333;
  line-height: 50px;
}
.correction-option{
  height: 70%;
  overflow-y: auto;
}
.correction-box p{
  padding: 0 15px;
  text-align: left;
  line-height: 25px;
  color: #666;
  margin-bottom: 10px;
  font-size: 14px;
}
.correction-box{
  border-bottom: 1px solid #eee;
}
.correction-option {
  text-align: left;
  padding: 15px;
}
.correction-option .van-radio-group .van-radio{
  display: inline-block;
  margin-right: 20px;
}
.redress-textarea{
  border: 1px solid #eee;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  color: #333;
}
.no-scroll{
  overflow: hidden;
  height: 100%;
  position: fixed;
  left: 0;
  width: 100%;
}
.payinfo-popup{
  width: 80%;
  font-size: 14px;
  line-height: 25px;
}
.payinfo-tips{
  padding: 15px;
}
.payinfo-btn{
  text-align: center;
  padding: 10px;
  border-top: 1px solid #eee;
}
.payinfo-btn .van-button{
  height: 30px;
  line-height: 30px;
}
</style>
<style>
.paper-contianer__intro p {
  margin-top: 10px;
}
.correction-option .van-radio__label{
  font-size: 14px;
}
.correction-option .van-radio__icon{
  display: inline-block;
  vertical-align: middle;
}
</style>