<style>
  .examPaperInfo_Top {
    height: 83px;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 100px;
  }

  .Exam-main {
    height: auto !important;
    overflow: hidden;
    margin: 0 100px;
  }

  .Exam-left {
    width: 29%;
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    border-radius: 3px;
    border-top: 1px solid #d9d9d9;
    background: #f0f0f0;
    padding-top: 20px;
    padding-bottom: 0px;
  }

  .f1 {
    float: left;
  }

  .Exam-right {
    width: 65%;
    min-height: 795px;
    background: #fff;
    border-radius: 3px;
    overflow-y: auto;
    border: 1px solid #d9d9d9;
    margin-left: 20px;
  }

  .Left-ptitel {
    font-size: 14px;
    color: #777;
    padding-left: 18px;
  }

  .Left-ptitel span {
    font-size: 14px;
    color: #333;
  }

  .Left-ptitel i {
    color: #c90000;
    font-style: normal;
  }

  .Left-list {
    width: 100%;
    border-top: 1px solid #d9d9d9;
  }

  .List-ul {
    margin: 0;
    padding: 0;
  }

  .List-ul li {
    height: 33px;
    border-bottom: 1px solid #f3f3f3;
    list-style-type: none;
  }

  .List-ul-li-checked {
    background: #a6a6a6;
    color: #333;
    width: 328px;
  }

  .List-ul li {
    display: block;
    padding-left: 25px;
    line-height: 33px;
    font-size: 12px;
    height: 33px;
    border-bottom: 1px solid #f3f3f3;
    color: #555;
    text-decoration: none;
    display: flex;
  }

  .List-ul-li-checked b {
    color: #000;
  }

  .Showbtn {
    display: block;
    width: 90px;
    float: right;
    padding-top: 8px;
    z-index: 1000;
  }

  .Left-btn {
    height: 58px;
    padding: 20px 0 20px 20px;
    width: 100%;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .List-bt {
    width: 100%;
    height: 27px;
    margin-left: 1px;
    background: #fdfdfd;
    font-size: 14px;
    line-height: 27px;
    padding-left: 10px;
  }

  .List-bt i {
    position: relative;
    top: 1px;
    left: 5px;
  }

  .List-bt i:hover {
    color: #2961fe;
    cursor: pointer;
  }

  .List-ul li:hover {
    background: #a6a6a6;
    color: #333;
  }

  .checkUl {
    background: #a6a6a6;
    color: #333;
  }

  .List-ul li:hover .exam_ListSHow {
    display: block;
  }

  .left-btn-list {
    padding: 5px 10px;
    display: inline-block;
    color: #555;
    border-radius: 3px;
    font-size: 14px;
    border: 1px solid #999;
    margin-right: 10px;
    cursor: pointer;
  }

  #btn1 {
    background: #26a69a !important;
  }

  .difficulty_Degree {
    display: inline-block;
    width: 80px;
    text-align: right;
    line-height: 56px;
  }

  .Left-list::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: #F5F5F5;
  }

  /*!*定义滚动条轨道 内阴影+圆角*!*/
  .Left-list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*!*定义滑块 内阴影+圆角*!*/
  .Left-list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-color: #0ae;
  }

  .commonDalei {
    display: flex;
    align-content: center;
    margin-bottom: 20px;
  }

  .examPaper .edui-editor {
    z-index: 99 !important;
  }

  .List-bt input {
    outline: none;
    height: 25px;
  }

  .exam_DetailList {
    width: 80%;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 5px;
  }

  .exam_ListSHow {
    display: none;
  }

  .exam_ListSHow i:hover {
    color: #2961fe;
  }

  .pGroupName {
    color: #202020;
    font-size: 16px;
  }

  .paper_Title p {
    display: inline;
  }

  .pGNameDiv {
    font-size: 12px;
    margin-top: 20px;
  }

  .Exam-main .common_TiTable {
    border-spacing: 0;
  }

  .examPaperInfo_Top .vClozeQuestion .clozeTest_question_tit {
    margin: 15px 0;
  }

</style>
<template>
  <div class="examPaper page-body">
    <div class="examPaperInfo_Top">
      <div>
        <div>
          {{DataObj.PaperName}} <br />
          创建人：{{DataObj.CreateByName}} &nbsp;&nbsp;&nbsp;题量：{{examNum}} &nbsp;&nbsp;&nbsp; 满分：{{examScore}}
          <q-checkbox size="xs" v-model="isShowAnswer" label="显示答案" />
        </div>
      </div>
      <div style="width:20%;text-align:right;">
        <q-btn color="accent" size="sm" class="q-mr-md" @click="goBack()" label="返回" />
      </div>
    </div>
    <div class="Exam-main">
      <template v-if="DataObj&&DataObj.GroupList&&DataObj.GroupList.length>0">
        <div v-for="(gItem,gIndex) in DataObj.GroupList" :key="gIndex">
          <div class="pGNameDiv"><span class="pGroupName">{{NoToChinese(gIndex+1)}}、{{gItem.GroupName}}</span> （共
            {{gItem.DetailsList.length}} 题，{{gItem.GScore}}分）</div>
          <div v-for="(dItem,dIndex) in gItem.DetailsList" :key="dIndex">
            <div style="display:flex;align-items:top;margin:20px 0;">
              <span>{{dIndex+1}}、</span>
              <span class="paper_Title" v-html="dItem.Title"></span>
              <span style="display:inline-block;min-width:40px;">
                ({{dItem.Score}}分)
              </span>
            </div>
            <!--单选题-->
            <v-single v-if="dItem.QuestionTypeKey=='single'||dItem.QuestionTypeKey=='single-number'"
              :questionObj="dItem" :isShowAnswer="isShowAnswer">
            </v-single>
            <!--多选题-->
            <v-multiple v-if="dItem.QuestionTypeKey=='multiple'" :questionObj="dItem" :isShowAnswer="isShowAnswer">
            </v-multiple>
            <!--填空题、分录题、资料题-->
            <v-fillin v-if="dItem.QuestionTypeKey=='fill-in'||dItem.QuestionTypeKey=='entry-problem'|| dItem.QuestionTypeKey=='data-question'" 
            :questionObj="dItem" :isShowAnswer="isShowAnswer">
            </v-fillin>
            <!--判断题-->
            <v-judge v-if="dItem.QuestionTypeKey=='judge'" :questionObj="dItem" :isShowAnswer="isShowAnswer"></v-judge>

            <!--简答题、名词解释、论述题、计算题、口语题、其它-->
            <v-shortanswer v-if="dItem.QuestionTypeKey=='short-answer'||dItem.QuestionTypeKey=='noun-explanation'||dItem.QuestionTypeKey=='essay-question'
            ||dItem.QuestionTypeKey=='calculation' || dItem.QuestionTypeKey=='spoken'|| dItem.QuestionTypeKey=='other'
            " :questionObj="dItem" :isShowAnswer="isShowAnswer"> </v-shortanswer>
            <!--连线题-->
            <v-matching v-if="dItem.QuestionTypeKey=='matching'" :questionObj="dItem" :isShowAnswer="isShowAnswer">
            </v-matching>
            <!--排序题-->
            <v-sortingproblem v-if="dItem.QuestionTypeKey=='sorting-problem'" :questionObj="dItem"
              :isShowAnswer="isShowAnswer"></v-sortingproblem>

            <!--完型填空-->
            <v-cloze v-if="dItem.QuestionTypeKey=='cloze'" :questionObj="dItem" :isShowAnswer="isShowAnswer" :isShowScore="true"></v-cloze>

            <!--阅读理解、听力题-->
            <v-readingcomprehensio
              v-if="dItem.QuestionTypeKey=='reading-comprehensio'||dItem.QuestionTypeKey=='listening'"
              :questionObj="dItem" :isShowAnswer="isShowAnswer" :isShowScore="true"></v-readingcomprehensio>

            <!--共用选择题-->
            <v-sharingchoose v-if="dItem.QuestionTypeKey=='sharing-choose'" :questionObj="dItem"
              :isShowAnswer="isShowAnswer">
            </v-sharingchoose>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
  import vSingle from '../../components/questiontype/v-single'
  import vMultiple from '../../components/questiontype/v-multiple'
  import vFillin from '../../components/questiontype/v-fillin'
  import vJudge from '../../components/questiontype/v-judge'
  import vShortanswer from '../../components/questiontype/v-shortanswer'
  import vMatching from '../../components/questiontype/v-matching'
  import vSortingproblem from '../../components/questiontype/v-sortingproblem'
  import vCloze from '../../components/questiontype/v-cloze'
  import vReadingcomprehensio from '../../components/questiontype/v-readingcomprehensio'
  import vSharingchoose from '../../components/questiontype/v-sharingchoose'
  import {
    GetPaper,
  } from '../../api/teacher/index';
  export default {
    components: {
      vSingle,
      vMultiple,
      vFillin,
      vJudge,
      vShortanswer,
      vMatching,
      vSortingproblem,
      vCloze,
      vReadingcomprehensio,
      vSharingchoose
    },
    meta: {
      title: "试卷详情"
    },
    watch: {

    },
    data() {
      return {
        msg: {
          PaperId: 0
        },
        //试卷对象
        DataObj: {
          PaperId: 0, //试卷编号
          PaperName: '', //试卷名称
          QuestionBandIds: "", //关联题库编号
          DifficultyType: 1, //试卷难易程度
          GenerateType: 2, //组卷类型(1-智能组卷，2-手动组卷，3-智能导入)
          CreateNum: 1, //生成试卷套数
          PaperType: 2, //试卷类型(1-文件夹，2-试卷)
          ParentId: 0, //父节点编号,
          GroupList: [], //试卷答题分类
          CreateByName: "", //创建人
        },
        isShowAnswer: false, //是否显示答案
        examScore: 0, //总分,
        examNum: 0, //总题量
      }
    },
    created() {
      if (this.$route.query && this.$route.query.Id) {
        this.msg.PaperId = decodeURI(this.$route.query.Id)
      }
    },
    mounted() {
      if (this.msg.PaperId && this.msg.PaperId > 0) {
        this.GetPaperInfo()
      }
    },
    methods: {
      NoToChinese(str) {
        str = str + '';
        var len = str.length - 1;
        var idxs = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿'];
        var num = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
        return str.replace(/([1-9]|0+)/g, function ($, $1, idx, full) {
          var pos = 0;
          if ($1[0] != '0') {
            pos = len - idx;
            if (idx == 0 && $1[0] == 1 && idxs[len - idx] == '十') {
              return idxs[len - idx];
            }
            return num[$1[0]] + idxs[len - idx];
          } else {
            var left = len - idx;
            var right = len - idx + $1.length;
            if (Math.floor(right / 4) - Math.floor(left / 4) > 0) {
              pos = left - left % 4;
            }
            if (pos) {
              return idxs[pos] + num[$1[0]];
            } else if (idx + $1.length >= len) {
              return '';
            } else {
              return num[$1[0]]
            }
          }
        });
      },
      //获取试卷详情
      GetPaperInfo() {
        GetPaper(this.msg).then(res => {
          var tempData = res.Data;
          if (res.Code == 1) {
            this.DataObj.PaperId = tempData.PaperId;
            this.DataObj.PaperName = tempData.PaperName;
            this.DataObj.QuestionBandIds = tempData.QuestionBandIds;
            this.DataObj.DifficultyType = tempData.DifficultyType;
            this.DataObj.GenerateType = tempData.GenerateType;
            this.DataObj.CreateNum = tempData.CreateNum;
            this.DataObj.PaperType = tempData.PaperType;
            this.DataObj.ParentId = tempData.ParentId;
            this.DataObj.CreateByName = tempData.CreateByName;
            if (tempData.GroupList && tempData.GroupList.length > 0) {
              this.DataObj.GroupList = tempData.GroupList;
            }
            this.calcPaper();
          }
        })
      },
      //计算试卷相关
      calcPaper() {
        this.examScore = 0;
        this.examNum = 0;
        if (this.DataObj && this.DataObj.GroupList) {
          this.DataObj.GroupList.forEach(x => {
            x.isShowEdit = false;
            if (x.DetailsList && x.DetailsList.length > 0) {
              this.examNum += x.DetailsList.length;
              x.DetailsList.forEach(y => {
                if (y.Score) {
                  this.examScore += Number(y.Score);
                }
              })
            }
          })
        }
      },
      //返回
      goBack(){
        this.$router.push({
            path: '/exam/examPaper'
        })
      }
    }
  }

</script>
