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

  .Exam-main {
    height: auto !important;
    overflow: hidden;
    margin: 20px 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;
  }
 .Exam_PaperNameV2{
    font-size:20px;
    font-weight: bold;
    margin-bottom:5px;
  }

</style>
<!--阅卷-->
<template>
  <div class="examPaper page-body">
    <div class="examPaperInfo_Top">
      <div style="width:80%;">
        <div>
          <div class="Exam_PaperNameV2">{{DataObj.PaperName}}</div>
          <div style="margin-bottom:10px;">
            题量：{{examNum}} &nbsp;&nbsp;&nbsp; 满分：{{examScore}}
            <span style="margin-left:30px;">学生总得分:{{studentScore}}</span>
          </div>
          <q-input v-model="DataObj.StuComment" filled type="textarea" placeholder="评语" />
        </div>
      </div>
      <div style="width:20%;text-align:right;">
        <q-btn color="accent" size="sm" class="q-mr-md" @click="submitTeacherScoring()" label="提交阅卷" />
        <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">
            <span>{{dIndex+1}}、</span>
            <span class="paper_Title" v-html="dItem.Title"></span>
            <span style="margin:10px 0;display:inline-block;">
              ({{dItem.Score}}分)
            </span>
            <!--单选题-->
            <v-single v-if="dItem.QuestionTypeKey=='single'||dItem.QuestionTypeKey=='single-number'"
              :questionObj="dItem" :isShowAnswer="isShowAnswer" :isShowStudentAnswer="isShowStudentAnswer"
              @getScore="calcPaper" :isEditStudentScore="isEditStudentScore">
            </v-single>
            <!--多选题-->
            <v-multiple v-if="dItem.QuestionTypeKey=='multiple'" :questionObj="dItem" :isShowAnswer="isShowAnswer"
              :isShowStudentAnswer="isShowStudentAnswer" @getScore="calcPaper" :isEditStudentScore="isEditStudentScore">
            </v-multiple>
            <!--填空题、分录题、资料题-->
            <v-fillin
              v-if="dItem.QuestionTypeKey=='fill-in'||dItem.QuestionTypeKey=='entry-problem'|| dItem.QuestionTypeKey=='data-question'"
              :questionObj="dItem" :isShowAnswer="isShowAnswer" :isShowStudentAnswer="isShowStudentAnswer"
              @getScore="calcPaper" :isEditStudentScore="isEditStudentScore">
            </v-fillin>
            <!--判断题-->
            <v-judge v-if="dItem.QuestionTypeKey=='judge'" :questionObj="dItem" :isShowAnswer="isShowAnswer"
              :isShowStudentAnswer="isShowStudentAnswer" @getScore="calcPaper" :isEditStudentScore="isEditStudentScore">
            </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"
              :isShowStudentAnswer="isShowStudentAnswer" @getScore="calcPaper" :isEditStudentScore="isEditStudentScore">
            </v-shortanswer>
            <!--连线题-->
            <v-matching v-if="dItem.QuestionTypeKey=='matching'" :questionObj="dItem" :isShowAnswer="isShowAnswer"
              :isShowStudentAnswer="isShowStudentAnswer" @getScore="calcPaper" :isEditStudentScore="isEditStudentScore">
            </v-matching>
            <!--排序题-->
            <v-sortingproblem v-if="dItem.QuestionTypeKey=='sorting-problem'" :questionObj="dItem"
              :isShowAnswer="isShowAnswer" :isShowStudentAnswer="isShowStudentAnswer" @getScore="calcPaper"
              :isEditStudentScore="isEditStudentScore">
            </v-sortingproblem>

            <!--完型填空-->
            <v-cloze v-if="dItem.QuestionTypeKey=='cloze'" :questionObj="dItem" :isShowAnswer="isShowAnswer"
              :isShowStudentAnswer="isShowStudentAnswer" @getScore="calcPaper" :isShowScore="isShowScore"
              :isEditStudentScore="isEditStudentScore"></v-cloze>

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

            <!--共用选择题-->
            <v-sharingchoose v-if="dItem.QuestionTypeKey=='sharing-choose'" :questionObj="dItem"
              :isShowAnswer="isShowAnswer" :isShowStudentAnswer="isShowStudentAnswer" @getScore="calcPaper"
              :isEditStudentScore="isEditStudentScore">
            </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 {
    queryPaperDetails,
    saveTeacherScoring,
  } from '../../api/teacher/index';
  export default {
    components: {
      vSingle,
      vMultiple,
      vFillin,
      vJudge,
      vShortanswer,
      vMatching,
      vSortingproblem,
      vCloze,
      vReadingcomprehensio,
      vSharingchoose
    },
    meta: {
      title: "阅卷"
    },
    watch: {

    },
    data() {
      return {
        msg: {
          GuestId: 0,
          PaperId: 0,
          PublishId: 0,
          isShowAnswer: true,
        },
        //试卷对象
        DataObj: {
          StuComment: "", //学员评语
          PaperId: 0, //试卷编号
          PaperName: '', //试卷名称
          GuestId: 0, //学员编号
          PublishId: 0, //考试编号
          GroupList: [], //试卷答题分类
        },
        PaperConfig: {}, //试卷配置
        isShowAnswer: true, //是否显示答案
        isShowStudentAnswer: true, //是否显示学生答案
        isShowScore: true, //是否显示完型填空、阅读理解、听力，小题分数
        isEditStudentScore: true, //是否可以编辑学生得分
        studentScore: 0, //学生总得分
        examScore: 0, //总分,
        examNum: 0, //总题量
      }
    },
    created() {
      if (this.$route.query) {
        if (this.$route.query.GuestId && this.$route.query.GuestId > 0) {
          this.msg.GuestId = this.$route.query.GuestId;
        }
        if (this.$route.query.PaperId && this.$route.query.PaperId > 0) {
          this.msg.PaperId = this.$route.query.PaperId;
        }
        if (this.$route.query.PublishId && this.$route.query.PublishId > 0) {
          this.msg.PublishId = this.$route.query.PublishId;
        }
      }
    },
    mounted() {
      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() {
        queryPaperDetails(this.msg).then(res => {
          var tempData = res.Data;
          if (res.Code == 1) {
            this.DataObj.PaperId = tempData.Paper.PaperId;
            this.DataObj.PaperName = tempData.Paper.PaperName;
            this.DataObj.GuestId = tempData.Paper.GuestId;
            this.DataObj.PublishId = tempData.Paper.PublishId;
            if (tempData.Paper.GroupList && tempData.Paper.GroupList.length > 0) {
              this.DataObj.GroupList = tempData.Paper.GroupList;
            }
            this.PaperConfig = tempData.Publish;
            this.calcPaper();
          }
        })
      },
      //计算试卷相关
      calcPaper() {
        this.examScore = 0;
        this.examNum = 0;
        this.studentScore = 0;
        if (this.DataObj && this.DataObj.GroupList) {
          this.DataObj.GroupList.forEach(x => {
            if (x.DetailsList && x.DetailsList.length > 0) {
              this.examNum += x.DetailsList.length;
              x.DetailsList.forEach(y => {
                this.examScore += Number(y.Score);
                if (y.QuestionTypeKey == "cloze" || y.QuestionTypeKey == "reading-comprehensio" || y
                  .QuestionTypeKey == "listening") {
                  var clozeScore = 0;
                  if (y.AnswerList && y.AnswerList.length > 0) {
                    y.AnswerList.forEach(qItem => {
                      var tempScore = 0;
                      if (qItem.StudentScore && qItem.StudentScore != '') {
                        tempScore = qItem.StudentScore;
                      }
                      clozeScore += Number(tempScore);
                    })
                  }
                  this.studentScore += Number(clozeScore)
                } else {
                  var tempScore = 0;
                  if (y.StudentScore && y.StudentScore != '') {
                    tempScore = y.StudentScore;
                  }
                  this.studentScore += Number(tempScore)
                }
              })
            }
          })
        }
      },
      //返回
      goBack() {
        var qMsg = {
          Id: this.msg.PublishId
        };
        this.$router.push({
          path: '/exam/examineeManager',
          query: qMsg
        });
      },
      //老师提交阅卷
      submitTeacherScoring() {
        var that = this;
        var message = "是否要提交阅卷?提交后将不能修改!";
        this.$q.dialog({
          title: '提示信息',
          message: message,
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          saveTeacherScoring(that.DataObj).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '阅卷成功!',
                position: 'top'
              })
              var qMsg = {
                Id: that.msg.PublishId
              };
              that.$router.push({
                path: '/exam/examineeManager',
                query: qMsg
              });
            }
          })
        })
      }
    }
  }

</script>
