[测评系统]--前端(用户答题页面)
84702473
2023-03-31 dc2c454c2ae3fdfdddcad0fd609e1a0def3b67a5
src/views/exam/paper/values.vue
@@ -1,25 +1,41 @@
<template>
  <div>
   <div>
      <el-container class="app-item-contain step1" v-if="step === 'step1'">
         <el-header class="">
           <h1>{{$t('values_title')}}</h1>
            <h1>{{$t('values_title')}}</h1>
         </el-header>
         <el-main class="" style="padding-top: 3%;">
         <el-main class="">
            <div>
              {{$t('values_title_description')}}
               <div>{{$t('values_title_description')}}</div>
               <div>{{$t('values_title_description_1')}}<img class="tools-button" src="@/assets/exam-paper/good.png" style="width: 15px;"/></div>
               <div>{{$t('values_title_description_2')}}<img class="tools-button" src="@/assets/exam-paper/nogood.png" style="width: 15px;"/></div>
               <div>{{$t('values_title_description_3')}}<img class="tools-button" src="@/assets/exam-paper/question.png" style="width: 15px;"/></div>
            </div>
            <div style="display: flex;justify-content: flex-start;padding: 10px 0;">
          <el-button @click="step1_start" type="primary" v-if="!step1Start">{{$t('start')}}</el-button>
               <el-button style="margin-top: 12px;" @click="step1_next" v-if="(step1Start && itemSize>0)">{{$t('next')}}</el-button>
               <el-button style="margin-top: 12px;" @click="step1_start" type="primary" round v-if="!step1Start">{{$t('start')}}</el-button>
               <el-button style="margin-top: 12px;" type="primary" round @click="step1_next"
                  v-if="(step1Start && itemSize>0)">
                  {{$t('next')}}
               </el-button>
            </div>
            <div class="mullinediv" v-if="step1Start">
               <div v-for="question in questionItems" class="mullinediv-item" v-if="isNull(question.analyze)">
                   <el-image  :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]"></el-image>
                     <div style="display: flex; justify-content: space-between;padding: 5px 10px;margin-top: -5px;">
                        <i class="el-icon-success" @click="likeMe(question.id)"></i>
                        <i class="el-icon-question" @click="iAmNotSure(question.id)"></i>
                        <i class="el-icon-error" @click="unLikeMe(question.id)"></i>
                     </div>
               <div v-for="(question,index1) in questionItems" class="mullinediv-item"
                  v-if="isNull(question.content)">
                  <div style="display: flex; justify-content: flex-end;margin-right: -20px;margin-top: -10px;">
                     <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                        @click="previewImg('qImg'+question.id,question.id)"></el-image>
                  </div>
                  <el-image :ref="'qImg'+question.id" :src="question.imgUrl" lazy
                     :preview-src-list="[question.imgUrl]"></el-image>
                  <div style="display: flex; justify-content: space-between;">
                     <el-image class="tools-button" :src="require('@/assets/exam-paper/nogood.png')"
                        @click="unLikeMe(question.id)"></el-image>
                     <el-image class="tools-button" :src="require('@/assets/exam-paper/question.png')"
                        @click="iAmNotSure(question.id)"></el-image>
                     <el-image class="tools-button" :src="require('@/assets/exam-paper/good.png')"
                        @click="likeMe(question.id)"></el-image>
                  </div>
               </div>
            </div>
         </el-main>
@@ -28,1528 +44,1508 @@
         <el-main class="">
            <div>
               <div class="tag-group">
                 <span class="tag-group__title" style="padding-right: 20px;">{{$t('values_cur_step')}}({{step2SubStep}} / {{step2ScoreRanges.length}})</span>
                 <el-tag
                   v-for="item in step2ScoreRanges"
                   :key="item.itemOrder"
                   :type="getStep2StepTagType(item.step)"
                     style="margin: 0 2px;font-size: 26px;"
              size="large"
                   effect="light">
                   {{ item.quantity }}
                 </el-tag>
                  <span class="tag-group__title"
                     style="padding-right: 20px;font-size: 26px;">{{$t('values_cur_step')}}({{step2SubStep}} /
                     {{step2ScoreRanges.length}})</span>
                  <el-tag v-for="item in step2ScoreRanges" :key="item.itemOrder"
                     :type="getStep2StepTagType(item.step)" style="margin: 0 2px;font-size: 26px;" size="large"
                     effect="light">
                     {{ item.quantity }}
                  </el-tag>
               </div>
               <div style="display: flex;justify-content: space-between;">
                  <div style="line-height: 50px;text-indent: 2em;">
              {{$t('values_step_tips1')}}{{(step2SubStep % 2 == 0)?$t('values_step_tips4'):''}}{{$t('values_step_tips2')}}{{getStep2StepItem(step2SubStep).quantity}}{{$t('values_step_tips3')}}
                     <span
                        v-if="(step2SubStep == step2ScoreRanges.length) && (step2ScoreRanges.length % 2 == 1)">
                        {{$t('values_step_tips_for_3').replace('%N',getStep2StepItem(step2SubStep).quantity)}}
                     </span>
                     <span v-else>
                        {{(step2SubStep % 2 == 1)?$t('values_step_tips_for_1').replace('%N',getStep2StepItem(step2SubStep).quantity):$t('values_step_tips_for_2').replace('%N',getStep2StepItem(step2SubStep).quantity)}}
                     </span>
                  </div>
                  <div style="display: flex;justify-content: flex-end;">
                     <el-button style="" @click="step2_pre" v-if="step2SubStep>1">{{$t('pre')}}</el-button>
                     <el-button style="" @click="step2_next">{{$t('next')}}</el-button>
                     <el-button type="primary" round @click="step2_pre" v-if="step2SubStep>1">{{$t('pre')}}
                     </el-button>
                     <el-button type="primary" round @click="step2_next">{{$t('next')}}</el-button>
                  </div>
               </div>
            </div>
            <div>
               <el-divider content-position="left"><span :style="'padding: 0 10px;background-color: ' + ((getStep2StepItem(step2SubStep).selected>getStep2StepItem(step2SubStep).quantity)?'red;':'#c8c3c3;')">{{getStep2StepItem(step2SubStep).selected}} / {{getStep2StepItem(step2SubStep).quantity}}</span> </el-divider>
               <el-divider content-position="left"><span
                     :style="'padding: 0 10px;background-color: ' + ((getStep2StepItem(step2SubStep).selected>getStep2StepItem(step2SubStep).quantity)?'red;':'#c8c3c3;')">{{getStep2StepItem(step2SubStep).selected}}
                     / {{getStep2StepItem(step2SubStep).quantity}}</span> </el-divider>
               <div style="">
                  <div class="inlinediv">
                     <div v-for="question in questionItems" class="mullinediv-item" v-if="getStep2StepItem(step2SubStep).itemOrder == question.subjectId">
                        <el-image  :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]"></el-image>
                        <div style="display: flex;justify-content: center;padding: 5px 10px;"><!--/*background-color: #c8c3c3;*/-->
                           <i class="el-icon-delete" @click="step2Delete(question.id,getStep2StepItem(step2SubStep).itemOrder)"></i>
                           <!-- <i class="el-icon-zoom-in"></i> -->
                     <div v-for="(question,index2) in questionItems" class="mullinediv-item"
                        v-if="getStep2StepItem(step2SubStep).itemOrder == question.subjectId">
                        <el-image :ref="'q2SelectImg'+question.id" :src="question.imgUrl" :preview-src-list="[question.imgUrl]"></el-image>
                        <div style="display: flex; justify-content: space-between;">
                           <el-image class="tools-button" :src="require('@/assets/exam-paper/no.png')"
                              @click="step2Delete(question.id,getStep2StepItem(step2SubStep).itemOrder)">
                           </el-image>
                           <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                              @click="previewImg('q2SelectImg'+question.id)"></el-image>
                        </div>
                     </div>
                  </div>
               </div>
            <el-divider content-position="left">{{$t('values_select_tips')}}</el-divider>
            <div style="height: auto;overflow: auto;">
            <div class="mullinediv" style="" v-if="questionItems && questionItems.length>0">
               <div v-for="question in questionItems" class="mullinediv-item" v-if="isNull(question.subjectId)">
                  <el-image  :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]"></el-image>
                     <div style="display: flex; justify-content: center;padding: 5px 10px;margin-top: -5px;">
                        <el-checkbox @change="checked=>step2Add(checked,question.id,getStep2StepItem(step2SubStep).itemOrder)">{{$t('values_select')}}</el-checkbox>
                        <!-- <i class="el-icon-check"></i> -->
                        <!-- <i class="el-icon-zoom-in"></i> -->
               <el-divider content-position="left">{{$t('values_select_tips')}}</el-divider>
               <div style="height: auto;overflow: auto;">
                  <div class="mullinediv" style="" v-if="questionItems && questionItems.length>0">
                     <div v-for="(question,index3) in questionItems" class="mullinediv-item"
                        v-if="isNull(question.subjectId)">
                        <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
                           :preview-src-list="[question.imgUrl]"></el-image>
                        <div style="display: flex; justify-content: space-between;">
                           <el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
                              @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
                           </el-image>
                           <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                              @click="previewImg('q2Img'+question.id)"></el-image>
                        </div>
                     </div>
                  </div>
                  <div class="mullinediv" style="" v-if="sumStep2UnSelectedNum()<=0">
                     {{$t('values_no_select')}}
                  </div>
               </div>
            </div>
            <div class="mullinediv" style="" v-if="sumUnSelectedNum()<=0">
               {{$t('values_no_select')}}
            </div>
            </div>
            </div>
         </el-main>
      </el-container>
      <el-container class="app-item-contain step3" v-if="step === 'step3'">
         <el-main class="">
        <div style="display:flex;">
          <div style="display: inline-block;min-width: 110px;text-align: right;">
              <div class="mul-inlinediv-row mul-inlinediv-lineheight" v-for="(item,index) in step2ScoreRanges">
                 {{(index == 0)?$t('values_mostLikeMe'):''}}{{(index == (step2ScoreRanges.length-1))?$t('values_mostUnLikeMe'):''}} {{item.deviate}}
              </div>
          </div>
          <div class="mul-inlinediv-box">
            <div style="position: fixed;z-index: 999; width:90%; top: 56px;">
               <div style="display: flex;justify-content: flex-end;padding: 10px;background-color: #f5f7fa;">
                  <div style="padding-right: 20px;" v-html="$t('values_pic_tmpArea_desc')"></div>
                  <div style="padding: 0 10px;">{{$t('values_pic_tmpArea')}}</div>
                  <draggable animation="300" class="pic-tmparea-div"
                     style="border: 1px solid gray;padding: 10px;width: 50%;"
                     :list="step3EWEIArea[0]" :options="{group:{name:'EWEIArea',pull:'clone'}}"
                     @start="ev=>step3TmpAreaStart(ev,0)"
                     @end="step3TmpAreaMoveEnd">
                     <div v-for="q in step3EWEIArea[0]" :key="q.id" class="mullinediv-item2"
                        :questionID="q.id" :questionIMGURL="q.imgUrl">
                        <el-image :src="q.imgUrl" :preview-src-list="[q.imgUrl]" fit="fill"></el-image>
                     </div>
                  </draggable>
                  <el-button type="primary" round style="height: fit-content;margin: 0 10px;"
                     @click="step3_commit" :disabled="submitDisable">
                     {{$t('commit')}}
                  </el-button>
               </div>
            </div>
            <div style="display:flex;margin-top: 160px;">
               <div style="display: inline-block;min-width: 150px;text-align: right;">
                  <div class="mul-inlinediv-row mul-inlinediv-lineheight"
                     v-for="(item,index) in step2ScoreRanges">
                     {{(index == 0)?$t('values_mostLikeMe'):' '}}{{(index == (step2ScoreRanges.length-1))?$t('values_mostUnLikeMe'):' '}}&nbsp;&nbsp;
                  </div>
               </div>
               <div style="display: inline-block;width: 20px;margin-top: 4px;">
                  <div class="mul-inlinediv-row mul-inlinediv-lineheight mul-inlinediv-down"
                     v-for="(item,index) in step2ScoreRanges">
                  </div>
               </div>
               <div style="display: inline-block;min-width: 20px;text-align: right;">
                  <div class="mul-inlinediv-row mul-inlinediv-lineheight"
                     v-for="(item,index) in step2ScoreRanges">
                     {{item.deviate}}
                  </div>
               </div>
               <div class="mul-inlinediv-box">
                  <div class="mul-inlinediv" v-for="item in step2ScoreRanges">
                     <div class="mul-inlinediv-row">
                     <div v-for="question in questionItems" class="mullinediv-item" v-if="question.subjectId == item.itemOrder">
                        <el-image  :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]"></el-image>
                        <div style="display: flex;justify-content: center;padding: 5px 10px;"><!--/*background-color: #c8c3c3;*/-->
                           <el-checkbox v-model="question['checked']" @change="checked=>step3Change(checked,question)" :disabled="(step3ChangeSrc.subjectId != question.subjectId || step3ChangeSrc.id == question.id)?false:true">
                              {{(step3ChangeSrc.id==null)?$t('values_select'):(question.id==step3ChangeSrc.id)?$t('values_select'):$t('values_select_exchange')}}
                           </el-checkbox>
                        </div>
                     </div>
                        <draggable animation="300" classa="pic-eweiarea-div" :class="'pic-eweiarea-div-'+item.itemOrder"
                           :list="step3EWEIArea[item.itemOrder]"
                           :options="{group:{name:'EWEIArea',pull:'clone'}}" filter=".undraggable"
                           @end="ev=>step3EWEIAreaMoveEnd(ev,item.itemOrder)" :scoreRangeId="item.itemOrder">
                           <div v-for="q in step3EWEIArea[item.itemOrder]" :key="q.id"
                              class="mul-inlinediv-item" :questionID="q.id" :questionIMGURL="q.imgUrl">
                              <el-image :src="q.imgUrl" :preview-src-list="[q.imgUrl]" v-if="q.imgUrl">
                              </el-image>
                           </div>
                           <div v-if="item.quantity >= step3EWEIArea[item.itemOrder].length">
                           <div class="mul-inlinediv-item"
                              v-for="c in (item.quantity - step3EWEIArea[item.itemOrder].length)">
                              <el-image :src="require('@/assets/exam-paper/none.png')" class="undraggable">
                              </el-image>
                           </div>
                           </div>
                        </draggable>
                     </div>
                  </div>
          </div>
        </div>
         <div style="display: flex;justify-content: center;">
            <el-button style="margin-top: 12px;" @click="step3_commit" :disabled="submitDisable">{{$t('commit')}}</el-button>
         </div>
               </div>
            </div>
         </el-main>
      </el-container>
    <el-row class="do-exam-title footer">
      <el-col :span="24">
        <span class="do-exam-time">
        </span>
      </el-col>
    </el-row>
  </div>
      <el-row class="do-exam-title footer">
         <el-col :span="24">
            <span class="do-exam-time">
            </span>
         </el-col>
      </el-row>
   </div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
import { formatDate } from '@/utils'
import examPaperApi from '@/api/examPaper'
import examPaperAnswerApi from '@/api/examPaperAnswer'
import demographyApi from '@/api/demography'
   import {
      mapState,
      mapGetters,
      mapMutations
   } from 'vuex'
   import {
      formatDate
   } from '@/utils'
   import examPaperApi from '@/api/examPaper'
   import examPaperAnswerApi from '@/api/examPaperAnswer'
   import demographyApi from '@/api/demography'
   import draggable from 'vuedraggable'
export default {
  name: 'values',
  data () {
    return {
         step:'step1',
         step1Start:false,
         step1SelectedNum:0,
      step2ScoreRanges: [
          // {
          //     "itemOrder": 1,
          //     "quantity": 2,
          //     "score": 5,
          //     "completed": false,
          //     "questionReports": null
          // }
      ],
      step2ScoreRangesDefault: [
          {
              "itemOrder": 0,
              "quantity": 0,
              "score": 0,
              "completed": false,
              "questionReports": null,
              "step":0,
              "selected":0
          }
      ],
      step2SubStep:1,
      step3ChangeSrc:{
        "id": null,
        "subjectId": null,
      },
      form: {
        "id": 92,
        "level": 1,
        "subjectId": null,
        "paperType": 1,
        "name": "VAQ",
        "suggestTime": null,
        "limitDateTime": null,
        "titleItems": [
            {
                "guide": "",
                "name": "",
                "description": "",
                "permanentId": null,
                "questionOrder": 0,
                "questionReport": null,
                "questionItems": [
                    {
                        "id": 786,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "麻将桌",
                        "gradeLevel": null,
                        "items": [
                            {
                                "prefix": "1",
                                "content": "0",
                                "score": "0"
                            }
                        ],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 1,
                        "questionOrder": 0,
                        "permanentId": "VAQ00001",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 1,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
                    },
                    {
                        "id": 787,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "麻将桌2",
                        "gradeLevel": null,
                        "items": [
                            {
                                "prefix": "1",
                                "content": "0",
                                "score": "0"
                            }
                        ],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 2,
                        "questionOrder": 1,
                        "permanentId": "VAQ00002",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 2,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2022/12/26/123f79ad0cc38507368c22b8a7ec9b09.jpg"
                    },
                    {
                        "id": 788,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "测试1",
                        "gradeLevel": null,
                        "items": [
                            {
                                "prefix": "1",
                                "content": "0",
                                "score": "0"
                            }
                        ],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 3,
                        "questionOrder": 2,
                        "permanentId": "VAQ00003",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 3,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2023/01/09/6b80baab47a9eba6ceeec5a723397109.jpg"
                    },
                    {
                        "id": 789,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "测试2",
                        "gradeLevel": null,
                        "items": [
                            {
                                "prefix": "1",
                                "content": "0",
                                "score": "0"
                            }
                        ],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 4,
                        "questionOrder": 3,
                        "permanentId": "VAQ00004",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 4,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2023/01/09/3f8e18280f1d47362c69b18e80ddf1a3.jpg"
                    },
                    {
                        "id": 790,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "测试3",
                        "gradeLevel": null,
                        "items": [
                            {
                                "prefix": "1",
                                "content": "0",
                                "score": "0"
                            }
                        ],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 5,
                        "questionOrder": 4,
                        "permanentId": "VAQ00005",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 5,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2023/01/09/447616cb14745241f0ac700b56d0770b.jpg"
                    }
                ],
                "startTime": null,
                "endTime": null,
                "parts": [],
                "scoreRanges": [
                    {
                        "itemOrder": 1,
                        "quantity": 2,
                        "score": 5,
                        "completed": false,
                        "questionReports": null
                    },
                    {
                        "itemOrder": 2,
                        "quantity": 1,
                        "score": 10,
                        "completed": false,
                        "questionReports": null
                    },
                    {
                        "itemOrder": 3,
                        "quantity": 2,
                        "score": 5,
                        "completed": false,
                        "questionReports": null
                    }
                ]
            }
        ],
        "score": null,
        "guide": "VAQ",
        "questionOrder": [
            0,
            1,
            2,
            3,
            4
        ],
        "parts": [],
        "questionTemplateId": "values",
        "reportTemplateId": "61",
        "memberName": "test4",
        "optionOrder": null,
        "timeOut": null,
        "jobDescriptionFile": null
      },
      formLoading: false,
      answer: {
        questionId: null,
        doTime: 0,
        answerItems: [],
        verifyStatus: 2
      },
      timer: null,
      titleItemsLength: 0,
      remainTime: 0,
      titleItemName: '', // 考试第二标题
      itemOrder: '', // 题目的序号
      questionItem: {}, // 题目
      questionItems: [], // 题目集
      itemSize: '', // 题目长度
      titleItems: [],
      order: 0,
      guide: false,
      answered: [],
      submitDisable: false,
      doTime: 0,
      preDisable: false,
      nextDisable: false,
      partOrder: 0,
      parts: [],
      guideTitle: '',
      guideDescirption: '',
      isCallTain: '',
      memberName: '',
      startDoDisable: true,
    }
  },
  created: function () {
    console.log("created......",this.$route.query.formDo,typeof(this.$route.query.formDo))
    //console.log(".....................Test. config start......................")
    //if(this.memberToken == '' || this.memberToken == undefined) this.setMemberTocken("4bdcf437-185c-4f4e-9528-382c99509ea6")
    //console.log(".....................Test. config ednd.......................")
    let _this = this
    // 多语言
    _this.setLangFlag(false)
    _this.form = this.$route.query.formDo
    if (_this.form !== {} && _this.form !== undefined && typeof(_this.form) !== "string") {
      _this.formLoading = true
      _this.remainTime = _this.form.suggestTime * 60
      _this.titleItemsLength = _this.form.titleItems.length
      _this.titleItems.push(_this.form.titleItems[0])
      _this.questionItem = _this.form.titleItems[0].questionItems[0]
         _this.questionItems = _this.form.titleItems[0].questionItems
      _this.partOrder = _this.questionItem.partOrder
      _this.itemOrder = _this.form.titleItems[0].questionItems[0].itemOrder
         _this.itemSize = _this.form.titleItems[0].questionItems.length
      _this.timeReduce()
      _this.initAnswer()
      _this.formLoading = false
      _this.memberName = _this.form.memberName
         _this.initStep2ScoreRanges(_this.form.titleItems[0].scoreRanges)
    } else {
      _this.formLoading = true
      // 防止刷新成了不同的语言
      demographyApi.queryDemographyParamInfo(_this.memberToken).then(
        re => {
               console.log('queryDemographyParamInfo...',re)
          if (re.response[0].langType !== null || re.response[0].langType.trim() !== '') {
            _this.setLangType(re.response[0].langType)
          }
          // 加载题目
          examPaperApi.select(_this.memberToken, _this.langType).then(re => {
                  console.log('select...',re)
            _this.form = re.response
            _this.remainTime = re.response.suggestTime * 60
            _this.titleItemsLength = _this.form.titleItems.length
            _this.titleItems.push(_this.form.titleItems[0])
            _this.itemOrder = _this.form.titleItems[0].questionItems[_this.order].itemOrder
            _this.itemSize = _this.form.titleItems[0].questionItems.length
            _this.questionItem = _this.form.titleItems[0].questionItems[_this.order]
            _this.questionItems = _this.form.titleItems[0].questionItems
            _this.partOrder = _this.questionItem.partOrder
            _this.initAnswer()
            _this.formLoading = false
            _this.memberName = _this.form.memberName
                  _this.initStep2ScoreRanges(_this.form.titleItems[0].scoreRanges)
            examPaperApi.selectTokenId(_this.memberToken).then(re => {
              _this.answered = re.response.examItemOrderAndContentList
              _this.doTime = re.response.doTime
              _this.timeReduce()
              if (_this.answered !== null) {
                _this.answered.forEach(it => {
                  _this.answer.answerItems[parseInt(it.itemOrder) - 1].content = it.content
                  _this.answer.answerItems[parseInt(it.itemOrder) - 1].completed = true
                })
              }
              for (let i = 0; i < _this.answer.answerItems.length; i++) {
                if (!_this.answer.answerItems[i].completed || _this.answer.answerItems[i].content === null || _this.answer.answerItems[i].content === '') {
                  _this.questionItem = _this.form.titleItems[0].questionItems[i]
                  _this.partOrder = _this.questionItem.partOrder
                  _this.itemOrder = _this.form.titleItems[0].questionItems[i].itemOrder
                  _this.order = i
                  _this.preDisable = true
                  break
                }
                if (_this.isForFinish(i)) {
                  _this.$router.push({ path: '/exam/finish', query: { name: '', content: _this.$t('finishMsg'), tokenId: _this.memberToken } })
                }
              }
              // 如果上一题不是本段,则不能返回上一段
              if (this.isDiffPartOrder()) {
                _this.preDisable = false
              }
              if (this.isDiffPartOrder()) {
                _this.showNextGuide(re.response.signalObject, false)
              }
            }).catch(e => {
              // _this.$message.error('题目查询异常')
            })
          }).catch(e => {
            _this.$message.info(_this.$t('noquestionMsg'))
          })
        }
      ).catch(e => {
      })
    }
  },
  mounted () {
    //console.log("mounted......")
  },
  beforeDestroy () {
    window.clearInterval(this.timer)
  },
  methods: {
    step1_start(){
       this.step = "step1"
         this.step1Start = true
         this.questionItems.sort(function(i2, i1){return (i2.id - i1.id)})
         //console.log('step1_start...',this.questionItems)
    },
      step1_next(){
         this.step = "step2"
         this.sortQuestions()
         this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
   export default {
      name: 'values',
      components: {
         draggable
      },
      step2_pre(){
      if(this.step2SubStep > 1){
        this.step2SubStep = this.step2SubStep - 1
      }
      },
      step2_next(){
         let _this = this
      let stepItem = this.getStep2StepItem(this.step2SubStep)
      if(stepItem.selected == stepItem.quantity || this.sumUnSelectedNum() == 0 ){
            _this.answer.verifyStatus = 2
            _this.submitSubAnswer()
        this.step2SubStep = this.step2SubStep + 1
        if(this.step2SubStep > this.step2ScoreRanges.length){
          this.step = "step3"
        }
            this.sortQuestions()
            this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
      } else {
        //this.$message.error(_this.$t('noquestionMsg'))
        if(stepItem.selected > stepItem.quantity){
          this.$message.error(_this.$t('values_nextStepTips_del_unnecessary'))
        } else {
          this.$message.error(_this.$t('values_nextStepTips_add_enough'))
        }
      }
      },
    step2Delete(qid,sid){
       this.resetQuestionItemsValueById(qid,"subjectId",null)//借用subjectId,存储
       this.caculateScoreRangeSelectedById(sid,-1)
    },
    step2Add(value,qid,sid){
      //console.log("step2Add....",value,qid,sid)
      this.resetQuestionItemsValueById(qid,"subjectId",sid)//借用subjectId,存储
      this.caculateScoreRangeSelectedById(sid,1)
    },
    step3Change(value,question){
      console.log('step3Change...',this.step3ChangeSrc)
      if(this.step3ChangeSrc.id == null){
        //首次点击,临时存储
        this.step3ChangeSrc.id = question.id
        this.step3ChangeSrc.subjectId = question.subjectId
            for (let item of this.questionItems) {
              if(item.id == question.id) item['checked'] = true
            }
      } else {
        if(this.step3ChangeSrc.id == question.id){
          //对调自己
        } else {
          //对调
          this.resetQuestionItemsValueById(this.step3ChangeSrc.id,"subjectId",question.subjectId)//借用subjectId,存储
          this.resetQuestionItemsValueById(question.id,"subjectId",this.step3ChangeSrc.subjectId)//借用subjectId,存储
        }
            //清理
            this.step3ChangeSrc.id = null
            this.step3ChangeSrc.subjectId = null
            for (let item of this.questionItems) {
               item['checked'] = false
            }
      }
    },
    sumUnSelectedNum(){
      let count = 0
      for (let item of this.questionItems) {
        if(this.isNull(item['subjectId'])){
            count = count + 1
        }
      }
      return count
    },
      step3_commit(){
         let _this = this
         window.clearInterval(_this.timer)
         _this.submitDisable = true
         _this.formLoading = true
         _this.answer.verifyStatus = 1
         _this.answer.finish = 1
         _this.submitAnswer(_this.$t('values_finishValuesInfo'))
      },
      getLikeTypeByScoreRangeItemOrder(itemOrder){
         let step = 0
         for (let item of this.step2ScoreRanges) {
           if(item.itemOrder === itemOrder){
               step = item['step']
               break
           }
      data() {
         return {
            step: 'step1',
            step1Start: false,
            step1SelectedNum: 0,
            step2ScoreRanges: [
               // {
               //     "itemOrder": 1,
               //     "quantity": 2,
               //     "score": 5,
               //     "completed": false,
               //     "questionReports": null
               // }
            ],
            step2ScoreRangesDefault: [{
               "itemOrder": 0,
               "quantity": 0,
               "score": 0,
               "completed": false,
               "questionReports": null,
               "step": 0,
               "selected": 0
            }],
            step2SubStep: 1,
            step3ChangeSrc: {
               "id": null,
               "subjectId": null,
            },
            step3EWEIArea: [1],
            form: {
               "id": 92,
               "level": 1,
               "subjectId": null,
               "paperType": 1,
               "name": "VAQ",
               "suggestTime": null,
               "limitDateTime": null,
               "titleItems": [{
                  "guide": "",
                  "name": "",
                  "description": "",
                  "permanentId": null,
                  "questionOrder": 0,
                  "questionReport": null,
                  "questionItems": [{
                        "id": 786,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "麻将桌",
                        "gradeLevel": null,
                        "items": [{
                           "prefix": "1",
                           "content": "0",
                           "score": "0"
                        }],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 1,
                        "questionOrder": 0,
                        "permanentId": "VAQ00001",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 1,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
                     },
                     {
                        "id": 787,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "麻将桌2",
                        "gradeLevel": null,
                        "items": [{
                           "prefix": "1",
                           "content": "0",
                           "score": "0"
                        }],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 2,
                        "questionOrder": 1,
                        "permanentId": "VAQ00002",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 2,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2022/12/26/123f79ad0cc38507368c22b8a7ec9b09.jpg"
                     },
                     {
                        "id": 788,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "测试1",
                        "gradeLevel": null,
                        "items": [{
                           "prefix": "1",
                           "content": "0",
                           "score": "0"
                        }],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 3,
                        "questionOrder": 2,
                        "permanentId": "VAQ00003",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 3,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2023/01/09/6b80baab47a9eba6ceeec5a723397109.jpg"
                     },
                     {
                        "id": 789,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "测试2",
                        "gradeLevel": null,
                        "items": [{
                           "prefix": "1",
                           "content": "0",
                           "score": "0"
                        }],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 4,
                        "questionOrder": 3,
                        "permanentId": "VAQ00004",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 4,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2023/01/09/3f8e18280f1d47362c69b18e80ddf1a3.jpg"
                     },
                     {
                        "id": 790,
                        "questionType": 1,
                        "subjectId": null,
                        "title": "测试3",
                        "gradeLevel": null,
                        "items": [{
                           "prefix": "1",
                           "content": "0",
                           "score": "0"
                        }],
                        "analyze": null,
                        "correctArray": null,
                        "correct": null,
                        "score": "0",
                        "difficult": null,
                        "itemOrder": 5,
                        "questionOrder": 4,
                        "permanentId": "VAQ00005",
                        "questionReport": null,
                        "startTime": null,
                        "endTime": null,
                        "partOrder": 5,
                        "parentQuestionId": null,
                        "template": null,
                        "questionNumber": null,
                        "content": null,
                        "imgUrl": "http://127.0.0.1:8090/profile/images/2023/01/09/447616cb14745241f0ac700b56d0770b.jpg"
                     }
                  ],
                  "startTime": null,
                  "endTime": null,
                  "parts": [],
                  "scoreRanges": [{
                        "itemOrder": 1,
                        "quantity": 2,
                        "score": 5,
                        "completed": false,
                        "questionReports": null
                     },
                     {
                        "itemOrder": 2,
                        "quantity": 1,
                        "score": 10,
                        "completed": false,
                        "questionReports": null
                     },
                     {
                        "itemOrder": 3,
                        "quantity": 2,
                        "score": 5,
                        "completed": false,
                        "questionReports": null
                     }
                  ]
               }],
               "score": null,
               "guide": "VAQ",
               "questionOrder": [
                  0,
                  1,
                  2,
                  3,
                  4
               ],
               "parts": [],
               "questionTemplateId": "values",
               "reportTemplateId": "61",
               "memberName": "test4",
               "optionOrder": null,
               "timeOut": null,
               "jobDescriptionFile": null
            },
            formLoading: false,
            answer: {
               questionId: null,
               doTime: 0,
               answerItems: [],
               verifyStatus: 2
            },
            timer: null,
            titleItemsLength: 0,
            remainTime: 0,
            titleItemName: '', // 考试第二标题
            itemOrder: '', // 题目的序号
            questionItem: {}, // 题目
            questionItems: [], // 题目集
            itemSize: '', // 题目长度
            titleItems: [],
            order: 0,
            guide: false,
            answered: [],
            submitDisable: false,
            doTime: 0,
            preDisable: false,
            nextDisable: false,
            partOrder: 0,
            parts: [],
            guideTitle: '',
            guideDescirption: '',
            isCallTain: '',
            memberName: '',
            startDoDisable: true,
         }
         return this.getLikeType(step)
      },
      getLikeType(step){
         if(this.step2ScoreRanges.length % 2 == 0){//偶数步骤
            if(step % 2 == 0){
               //2-UnLike
               return 2
            } else {
               //0-Like
               return 0
      created: function() {
         //console.log(".....................Test. config start......................")
         //if(this.memberToken == '' || this.memberToken == undefined) this.setMemberTocken("4bdcf437-185c-4f4e-9528-382c99509ea6")
         //console.log(".....................Test. config ednd.......................")
         let _this = this
         // 多语言
         _this.setLangFlag(false)
         _this.form = this.$route.query.formDo
         if (_this.form !== {} && _this.form !== undefined && typeof(_this.form) !== "string") {
            console.log("created......get from query", _this.form)
            _this.formLoading = true
            _this.remainTime = _this.form.suggestTime * 60
            _this.titleItemsLength = _this.form.titleItems.length
            _this.titleItems.push(_this.form.titleItems[0])
            _this.questionItem = _this.form.titleItems[0].questionItems[0]
            _this.questionItems = _this.form.titleItems[0].questionItems
            _this.partOrder = _this.questionItem.partOrder
            _this.itemOrder = _this.form.titleItems[0].questionItems[0].itemOrder
            _this.itemSize = _this.form.titleItems[0].questionItems.length
            _this.timeReduce()
            _this.initAnswer()
            _this.formLoading = false
            _this.memberName = _this.form.memberName
            _this.initStep2ScoreRanges(_this.form.titleItems[0].scoreRanges)
         } else {
            _this.formLoading = true
            // 防止刷新成了不同的语言
            demographyApi.queryDemographyParamInfo(_this.memberToken).then(
               re => {
                  if (re.response[0].langType !== null || re.response[0].langType.trim() !== '') {
                     _this.setLangType(re.response[0].langType)
                  }
                  // 加载题目
                  examPaperApi.select(_this.memberToken, _this.langType).then(re => {
                     console.log("created......get from db", re.response)
                     _this.form = re.response
                     _this.remainTime = re.response.suggestTime * 60
                     _this.titleItemsLength = _this.form.titleItems.length
                     _this.titleItems.push(_this.form.titleItems[0])
                     _this.itemOrder = _this.form.titleItems[0].questionItems[_this.order].itemOrder
                     _this.itemSize = _this.form.titleItems[0].questionItems.length
                     _this.questionItem = _this.form.titleItems[0].questionItems[_this.order]
                     _this.questionItems = _this.form.titleItems[0].questionItems
                     _this.partOrder = _this.questionItem.partOrder
                     _this.initAnswer()
                     _this.formLoading = false
                     _this.memberName = _this.form.memberName
                     _this.initStep2ScoreRanges(_this.form.titleItems[0].scoreRanges)
                     examPaperApi.selectTokenId(_this.memberToken).then(re => {
                        _this.answered = re.response.examItemOrderAndContentList
                        _this.doTime = re.response.doTime
                        _this.timeReduce()
                        if (_this.answered !== null) {
                           _this.answered.forEach(it => {
                              _this.answer.answerItems[parseInt(it.itemOrder) -
                                 1].content = it.content
                              _this.answer.answerItems[parseInt(it.itemOrder) -
                                 1].completed = true
                           })
                        }
                        for (let i = 0; i < _this.answer.answerItems.length; i++) {
                           if (!_this.answer.answerItems[i].completed || _this.answer
                              .answerItems[i].content === null || _this.answer
                              .answerItems[i].content === '') {
                              _this.questionItem = _this.form.titleItems[0]
                                 .questionItems[i]
                              _this.partOrder = _this.questionItem.partOrder
                              _this.itemOrder = _this.form.titleItems[0].questionItems[i]
                                 .itemOrder
                              _this.order = i
                              _this.preDisable = true
                              break
                           }
                           if (_this.isForFinish(i)) {
                              _this.$router.push({
                                 path: '/exam/finish',
                                 query: {
                                    name: '',
                                    content: _this.$t('finishMsg'),
                                    tokenId: _this.memberToken
                                 }
                              })
                           }
                        }
                        // 如果上一题不是本段,则不能返回上一段
                        if (this.isDiffPartOrder()) {
                           _this.preDisable = false
                        }
                        if (this.isDiffPartOrder()) {
                           _this.showNextGuide(re.response.signalObject, false)
                        }
                     }).catch(e => {
                        // _this.$message.error('题目查询异常')
                     })
                  }).catch(e => {
                     _this.$message.info(_this.$t('noquestionMsg'))
                  })
               }
            ).catch(e => {})
         }
      },
      mounted() {
         //console.log("mounted......")
         document.body.ondrop = function(event) {
            event.preventDefault();
            event.stopPropagation();
         }
      },
      beforeDestroy() {
         window.clearInterval(this.timer)
      },
      methods: {
         step1_start() {
            this.step = "step1"
            this.step1Start = true
            this.questionItems.sort(function(i2, i1) {
               return (i2.id - i1.id)
            })
            //test
            //this.initTestData()
            //回显,没有可选的时候,进入下一步
            let c = this.sumStep1UnSelectedNum()
            if (c <= 0 && this.itemSize > 0) {
               this.step = "step2"
               this.sortQuestions()
               this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
            }
         } else {//奇数步骤
            if(step == this.step2ScoreRanges.length) {
               //1-NotSure
               return 1
         },
         step1_next() {
            let _this = this
            let c = this.sumStep1UnSelectedNum()
            if (c > 0) {
               this.$message.error(_this.$t('values_nextStepTips_choices_all'))
               return
            }
            this.$confirm(_this.$t('values_nextStepTips_tips'), _this.$t('prompt'), {
               confirmButtonText: _this.$t('determine'),
               cancelButtonText: _this.$t('cancel'),
               type: 'warning'
            }).then(() => {
                _this.step = "step2"
                _this.sortQuestions()
                _this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
        }).catch(() => {
        });
         },
         step2_pre() {
            if (this.step2SubStep > 1) {
               this.step2SubStep = this.step2SubStep - 1
            }
         },
         step2_next() {
            let _this = this
            let stepItem = this.getStep2StepItem(this.step2SubStep)
            if (stepItem.selected == stepItem.quantity || this.sumStep2UnSelectedNum() == 0) {
               _this.answer.verifyStatus = 2
               _this.submitSubAnswer()
               this.step2SubStep = this.step2SubStep + 1
               if (this.step2SubStep == this.step2ScoreRanges.length) { //进入最后一步骤
                  this.resetAllQuestionItemsValueByKeyWhenNull("subjectId", this.getStep2StepItem(this.step2SubStep)
                     .itemOrder)
               }
               if (this.step2SubStep > this.step2ScoreRanges.length) { //完成最后一步骤
                  this.step = "step3"
                  this.buildStep3EWEIArea()
               }
               this.sortQuestions()
               this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
            } else {
               if(step % 2 == 0){
               //this.$message.error(_this.$t('noquestionMsg'))
               if (stepItem.selected > stepItem.quantity) {
                  this.$message.error(_this.$t('values_nextStepTips_del_unnecessary'))
               } else {
                  this.$message.error(_this.$t('values_nextStepTips_add_enough'))
               }
            }
         },
         step2Delete(qid, sid) {
            this.resetQuestionItemsSubjectIdById(qid, null) //借用subjectId,存储
            this.caculateScoreRangeSelectedById(sid, -1)
         },
         step2Add(qid, sid) {
            //console.log("step2Add....",value,qid,sid)
            this.resetQuestionItemsSubjectIdById(qid, sid) //借用subjectId,存储
            this.caculateScoreRangeSelectedById(sid, 1)
         },
         step3Change(value, question) {
            if (this.step3ChangeSrc.id == null) {
               //首次点击,临时存储
               this.step3ChangeSrc.id = question.id
               this.step3ChangeSrc.subjectId = question.subjectId
               for (let item of this.questionItems) {
                  if (item.id == question.id) item['checked'] = true
               }
            } else {
               if (this.step3ChangeSrc.id == question.id) {
                  //对调自己
               } else {
                  //对调
                  this.resetQuestionItemsSubjectIdById(this.step3ChangeSrc.id, question
                     .subjectId) //借用subjectId,存储
                  this.resetQuestionItemsSubjectIdById(question.id, this.step3ChangeSrc
                     .subjectId) //借用subjectId,存储
               }
               //清理
               this.step3ChangeSrc.id = null
               this.step3ChangeSrc.subjectId = null
               for (let item of this.questionItems) {
                  item['checked'] = false
               }
            }
         },
         /**
          * 根据QuestionItems,构建二维图表数据
          */
         buildStep3EWEIArea() {
            this.step3EWEIArea = [this.step2ScoreRanges.length + 1]
            this.step3EWEIArea[0] = []
            this.$set(this.step3EWEIArea, 0, this.step3EWEIArea[0])
            for (let item of this.step2ScoreRanges) {
               this.step3EWEIArea[item.itemOrder] = []
               for (let q = 1; q <= item.quantity; q++) {
                  let t = this.getQuestionItemsByKey("subjectId", item.itemOrder, q)
                  if (t.id) {
                     this.step3EWEIArea[item.itemOrder].push(t)
                  }
               }
               this.$set(this.step3EWEIArea, item.itemOrder, this.step3EWEIArea[item
                  .itemOrder])
            }
            console.log('buildStep3EWEIArea', this.step3EWEIArea)
         },
         addStep3EWEIArea(index,question){
            //console.log('addStep3EWEIArea',index,question)
            this.step3EWEIArea[index].push(question)
            this.$set(this.step3EWEIArea, index, this.step3EWEIArea[index])
         },
         delStep3EWEIArea(index,question){
            //console.log('delStep3EWEIArea s',index,question,this.step3EWEIArea[index])
            for(let i=0;i<this.step3EWEIArea[index].length;i++){
               if(question.id == this.step3EWEIArea[index][i].id){
                  this.step3EWEIArea[index].splice(i,1)
               }
            }
            this.$set(this.step3EWEIArea, index, this.step3EWEIArea[index])
            //console.log('delStep3EWEIArea e',this.step3EWEIArea[index])
         },
         hasStep3EWEIAreaOverflow(index,question){
            //console.log('hasStep3EWEIAreaOverflow e',this.step3EWEIArea[index])
            if(this.step3EWEIArea[index].length>this.step2ScoreRanges[index-1].quantity){
               return true
            }
            return false
         },
         step3TmpAreaStart(ev,i) {
            console.log('step3TmpAreaStart', ev,i)
         },
         step3TmpAreaMoveAdd(ev) {
            console.log('step3TmpAreaMoveAdd', ev)
            return false
         },
         step3TmpAreaMoveEnd(ev) {
            console.log('step3TmpAreaMoveEnd s', ev)
            console.log('step3TmpAreaMoveEnd from,to', ev.from.className,ev.to.className)
            let to = ev.to.className.replace("pic-eweiarea-div-","")
            let qId = ev.item.attributes.questionID.value
            let qImg = ev.item.attributes.questionIMGURL.value
            if("pic-tmparea-div"===ev.to.className){
               //this.delStep3EWEIArea(to,{'id':qId,'imgUrl':qImg})
            } else {
               let of = this.hasStep3EWEIAreaOverflow(to,{'id':qId,'imgUrl':qImg})
               if(of){
                  this.delStep3EWEIArea(to,{'id':qId,'imgUrl':qImg})
               } else {
                  this.delStep3EWEIArea(0,{'id':qId,'imgUrl':qImg})
               }
            }
         },
         step3EWEIAreaMoveEnd(ev,fid) {
            console.log('step3EWEIAreaMoveEnd',ev)
            console.log('step3EWEIAreaMoveEnd from,to,id', ev.from.className,ev.to.className,fid)
            let to = ev.to.className.replace("pic-eweiarea-div-","")
            let qId = ev.item.attributes.questionID.value
            let qImg = ev.item.attributes.questionIMGURL.value
            if("pic-tmparea-div"===ev.to.className){
               this.delStep3EWEIArea(fid,{'id':qId,'imgUrl':qImg})
            } else {
               if(fid != to) this.delStep3EWEIArea(to,{'id':qId,'imgUrl':qImg})
            }
         },
         sumStep2UnSelectedNum() {
            let count = 0
            for (let item of this.questionItems) {
               if (this.isNull(item['subjectId'])) {
                  count = count + 1
               }
            }
            return count
         },
         sumStep1UnSelectedNum() {
            let count = 0
            for (let item of this.questionItems) {
               if (this.isNull(item['content'])) {
                  count = count + 1
               }
            }
            return count
         },
         step3_commit() {
            let _this = this
            if (_this.step3EWEIArea[0].length > 0) {
               this.$message.error(_this.$t('values_nextStepTips_choices_all'))
               return
            }
            _this.resetAllQuestionItemsValueByEWEIArea()
            window.clearInterval(_this.timer)
            _this.submitDisable = true
            _this.formLoading = true
            _this.answer.verifyStatus = 1
            _this.answer.finish = 1
            _this.submitAnswer(_this.$t('values_finishValuesInfo'))
         },
         getLikeTypeByScoreRangeItemOrder(itemOrder) {
            if (this.isNull(itemOrder)) return null;
            let step = 0
            for (let item of this.step2ScoreRanges) {
               if (item.itemOrder === itemOrder) {
                  step = item['step']
                  break
               }
            }
            return this.getLikeType(step)
         },
         getLikeType(step) {
            if (this.step2ScoreRanges.length % 2 == 0) { //偶数步骤
               if (step % 2 == 0) {
                  //2-UnLike
                  return 2
               } else {
                  //0-Like
                  return 0
               }
            } else { //奇数步骤
               if (step == this.step2ScoreRanges.length) {
                  //1-NotSure
                  return 1
               } else {
                  if (step % 2 == 0) {
                     //2-UnLike
                     return 2
                  } else {
                     //0-Like
                     return 0
                  }
               }
            }
         }
      },
      sortQuestions(){
         let type = this.getLikeType(this.step2SubStep)
         switch (type) {
            case 0://0:最像我
               this.questionItems.sort(function(i2, i1){return (i2.analyze == 'Like')?-1:1})
               break
            case 1://1:有疑问
               this.questionItems.sort(function(i2, i1){return (i2.analyze == 'NotSure')?-1:1})
               break
            case 2://2:最不像我
               this.questionItems.sort(function(i2, i1){return (i2.analyze == 'UnLike')?-1:1})
               break
         }
      },
      likeMe(id){
         this.step1SelectedNum = this.step1SelectedNum + 1
      this.resetQuestionItemsValueById(id,"analyze","Like")//借用analyze,存储
      },
      iAmNotSure(id){
         this.step1SelectedNum = this.step1SelectedNum + 1
         this.resetQuestionItemsValueById(id,"analyze","NotSure")
      },
      unLikeMe(id){
         this.step1SelectedNum = this.step1SelectedNum + 1
         this.resetQuestionItemsValueById(id,"analyze","UnLike")
      },
    resetQuestionItemsValueById(id,key,value){
      for (let item of this.questionItems) {
        if(item.id === id){
            item[key] = value
                  if("subjectId" == key){
         },
         sortQuestions() {
            let type = this.getLikeType(this.step2SubStep)
            switch (type) {
               case 0: //0:最像我
                  this.questionItems.sort(function(i2, i1) {
                     return (i2.content == 0) ? -1 : 1
                  })
                  break
               case 1: //1:有疑问
                  this.questionItems.sort(function(i2, i1) {
                     return (i2.content == 1) ? -1 : 1
                  })
                  break
               case 2: //2:最不像我
                  this.questionItems.sort(function(i2, i1) {
                     return (i2.content == 2) ? -1 : 1
                  })
                  break
            }
         },
         likeMe(id) {
            let _this = this
            this.step1SelectedNum = this.step1SelectedNum + 1
            this.resetQuestionItemsContentById(id, 0) //借用analyze,存储"Like"
            _this.answer.verifyStatus = 2
            _this.submitSubAnswer()
         },
         iAmNotSure(id) {
            let _this = this
            this.step1SelectedNum = this.step1SelectedNum + 1
            this.resetQuestionItemsContentById(id, 1) //"NotSure"
            _this.answer.verifyStatus = 2
            _this.submitSubAnswer()
         },
         unLikeMe(id) {
            let _this = this
            this.step1SelectedNum = this.step1SelectedNum + 1
            this.resetQuestionItemsContentById(id, 2) //"UnLike"
            _this.answer.verifyStatus = 2
            _this.submitSubAnswer()
         },
         resetQuestionItemsContentById(id, value) {
            for (let item of this.questionItems) {
               if (item.id == id) {
                  item["content"] = value
               }
            }
            //console.log('resetQuestionItems...', id, value, this.questionItems)
         },
         resetQuestionItemsSubjectIdById(id, value) {
            for (let item of this.questionItems) {
               if (item.id == id) {
                  item["subjectId"] = value
                  item['content'] = this.getLikeTypeByScoreRangeItemOrder(value)
               }
            }
            //console.log('resetQuestionItems...', id, value, this.questionItems)
         },
         //设置所有未有归属步骤(subjectId)的QuestionItems为新的归属步骤(subjectId)
         resetAllQuestionItemsValueByKeyWhenNull(key, value) {
            for (let item of this.questionItems) {
               if (this.isNull(item[key])) {
                  item[key] = value
                  if ("subjectId" == key) {
                     item['content'] = this.getLikeTypeByScoreRangeItemOrder(value)
                  }
        }
      }
      //console.log('resetQuestionItems...',id,key,value,this.questionItems)
    },
    caculateScoreRangeSelectedById(id,value){
         let sum = 0
         for (let item of this.questionItems) {
           if(item.subjectId === id){
               sum = sum + 1
           }
         }
      for (let item of this.step2ScoreRanges) {
        if(item.itemOrder === id){
               item['selected'] = sum
        }
      }
    },
    initTestData(){
      let _this = this
      //for test
      _this.step2ScoreRanges = [].concat([
        {
            "itemOrder": 1,
            "quantity": 1,
            "score": 5,
            "completed": false,
            "questionReports": null
        },
        {
            "itemOrder": 2,
            "quantity": 2,
            "score": 5,
            "completed": false,
            "questionReports": null
        },
        {
            "itemOrder": 3,
            "quantity": 10,
            "score": 5,
            "completed": false,
            "questionReports": null
        },
        {
            "itemOrder": 4,
            "quantity": 2,
            "score": 5,
            "completed": false,
            "questionReports": null
        },
        {
            "itemOrder": 5,
            "quantity": 1,
            "score": 5,
            "completed": false,
            "questionReports": null
        },
        // {
        //     "itemOrder": 6,
        //     "quantity": 2,
        //     "score": 5,
        //     "completed": false,
        //     "questionReports": null
        // },
        // {
        //     "itemOrder": 7,
        //     "quantity": 2,
        //     "score": 5,
        //     "completed": false,
        //     "questionReports": null
        // },
        // {
        //     "itemOrder": 8,
        //     "quantity": 2,
        //     "score": 5,
        //     "completed": false,
        //     "questionReports": null
        // },
      ])
      _this.questionItems = _this.questionItems.concat([
        {
            "id": 100,
            "questionType": 1,
            "subjectId": 3,
            "title": "麻将桌",
            "gradeLevel": null,
            "items": [
                {
                    "prefix": "1",
                    "content": "0",
                    "score": "0"
                }
            ],
            "analyze": "Like",
            "correctArray": null,
            "correct": null,
            "score": "0",
            "difficult": null,
            "itemOrder": 1,
            "questionOrder": 0,
            "permanentId": "VAQ00001",
            "questionReport": null,
            "startTime": null,
            "endTime": null,
            "partOrder": 1,
            "parentQuestionId": null,
            "template": null,
            "questionNumber": null,
            "content": null,
            "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
        },
        {
            "id": 101,
            "questionType": 1,
            "subjectId": 3,
            "title": "麻将桌",
            "gradeLevel": null,
            "items": [
                {
                    "prefix": "1",
                    "content": "0",
                    "score": "0"
                }
            ],
            "analyze": "UnLike",
            "correctArray": null,
            "correct": null,
            "score": "0",
            "difficult": null,
            "itemOrder": 1,
            "questionOrder": 0,
            "permanentId": "VAQ00001",
            "questionReport": null,
            "startTime": null,
            "endTime": null,
            "partOrder": 1,
            "parentQuestionId": null,
            "template": null,
            "questionNumber": null,
            "content": null,
            "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
        },
        {
            "id": 102,
            "questionType": 1,
            "subjectId": 3,
            "title": "麻将桌",
            "gradeLevel": null,
            "items": [
                {
                    "prefix": "1",
                    "content": "0",
                    "score": "0"
                }
            ],
            "analyze": "NotSure",
            "correctArray": null,
            "correct": null,
            "score": "0",
            "difficult": null,
            "itemOrder": 1,
            "questionOrder": 0,
            "permanentId": "VAQ00001",
            "questionReport": null,
            "startTime": null,
            "endTime": null,
            "partOrder": 1,
            "parentQuestionId": null,
            "template": null,
            "questionNumber": null,
            "content": null,
            "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
        },
        {
            "id": 103,
            "questionType": 1,
            "subjectId": 3,
            "title": "麻将桌",
            "gradeLevel": null,
            "items": [
                {
                    "prefix": "1",
                    "content": "0",
                    "score": "0"
                }
            ],
            "analyze": "Like",
            "correctArray": null,
            "correct": null,
            "score": "0",
            "difficult": null,
            "itemOrder": 1,
            "questionOrder": 0,
            "permanentId": "VAQ00001",
            "questionReport": null,
            "startTime": null,
            "endTime": null,
            "partOrder": 1,
            "parentQuestionId": null,
            "template": null,
            "questionNumber": null,
            "content": null,
            "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
        },
        {
            "id": 104,
            "questionType": 1,
            "subjectId": 3,
            "title": "麻将桌",
            "gradeLevel": null,
            "items": [
                {
                    "prefix": "1",
                    "content": "0",
                    "score": "0"
                }
            ],
            "analyze": "UnLike",
            "correctArray": null,
            "correct": null,
            "score": "0",
            "difficult": null,
            "itemOrder": 1,
            "questionOrder": 0,
            "permanentId": "VAQ00001",
            "questionReport": null,
            "startTime": null,
            "endTime": null,
            "partOrder": 1,
            "parentQuestionId": null,
            "template": null,
            "questionNumber": null,
            "content": null,
            "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
        },
        {
            "id": 105,
            "questionType": 1,
            "subjectId": 1,
            "title": "麻将桌",
            "gradeLevel": null,
            "items": [
                {
                    "prefix": "1",
                    "content": "0",
                    "score": "0"
                }
            ],
            "analyze": "NotSure",
            "correctArray": null,
            "correct": null,
            "score": "0",
            "difficult": null,
            "itemOrder": 1,
            "questionOrder": 0,
            "permanentId": "VAQ00001",
            "questionReport": null,
            "startTime": null,
            "endTime": null,
            "partOrder": 1,
            "parentQuestionId": null,
            "template": null,
            "questionNumber": null,
            "content": null,
            "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
        },
        {
            "id": 106,
            "questionType": 1,
            "subjectId": 1,
            "title": "麻将桌",
            "gradeLevel": null,
            "items": [
                {
                    "prefix": "1",
                    "content": "0",
                    "score": "0"
                }
            ],
            "analyze": "Like",
            "correctArray": null,
            "correct": null,
            "score": "0",
            "difficult": null,
            "itemOrder": 1,
            "questionOrder": 0,
            "permanentId": "VAQ00001",
            "questionReport": null,
            "startTime": null,
            "endTime": null,
            "partOrder": 1,
            "parentQuestionId": null,
            "template": null,
            "questionNumber": null,
            "content": null,
            "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
        },
        {
            "id": 107,
            "questionType": 1,
            "subjectId": 2,
            "title": "麻将桌",
            "gradeLevel": null,
            "items": [
                {
                    "prefix": "1",
                    "content": "0",
                    "score": "0"
                }
            ],
            "analyze": "NotSure",
            "correctArray": null,
            "correct": null,
            "score": "0",
            "difficult": null,
            "itemOrder": 1,
            "questionOrder": 0,
            "permanentId": "VAQ00001",
            "questionReport": null,
            "startTime": null,
            "endTime": null,
            "partOrder": 1,
            "parentQuestionId": null,
            "template": null,
            "questionNumber": null,
            "content": null,
            "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
        },
        {
            "id": 108,
            "questionType": 1,
            "subjectId": 2,
            "title": "麻将桌",
            "gradeLevel": null,
            "items": [
                {
                    "prefix": "1",
                    "content": "0",
                    "score": "0"
                }
            ],
            "analyze": "NotSure",
            "correctArray": null,
            "correct": null,
            "score": "0",
            "difficult": null,
            "itemOrder": 1,
            "questionOrder": 0,
            "permanentId": "VAQ00001",
            "questionReport": null,
            "startTime": null,
            "endTime": null,
            "partOrder": 1,
            "parentQuestionId": null,
            "template": null,
            "questionNumber": null,
            "content": null,
            "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
        },
      ])
    },
    initStep2ScoreRanges(arr){
      let _this = this
      _this.step2ScoreRanges = _this.step2ScoreRanges.concat(arr)
      //this.initTestData()
      let s = 1
      let a = 2//-2
      let max = _this.step2ScoreRanges.length
      let max4O = (max % 2 == 0)?(max):(max+1)
      let max4J = (max % 2 == 0)?(max+1):(max)
      let deviate = 0//偏离值
      for (let i = 0; i < _this.step2ScoreRanges.length; i++) {
        //设置每项step数
         if(a > 0){//+
            if(s < max){
               _this.step2ScoreRanges[i]['step'] = s
               a = 2
               s = s + a
            } else if(s == max) {
               _this.step2ScoreRanges[i]['step'] = s
               a = -2
               s = s + 1
            } else {
               _this.step2ScoreRanges[i]['step'] = s - 1
               a = -2
               s = s - 1
            }
         } else {//-
            s = s + a
            _this.step2ScoreRanges[i]['step'] = s
         }
        //设置每项step偏离最后step的正负距离值(奇数step正偏离,偶数step负偏离)
        if(_this.step2ScoreRanges[i]['step'] % 2 == 0){//偶数
          deviate = (max4O - _this.step2ScoreRanges[i]['step']) - (max4O - _this.step2ScoreRanges[i]['step'])/2
          _this.step2ScoreRanges[i]['deviate'] = 0 - deviate
        } else {
          deviate = (max4J - _this.step2ScoreRanges[i]['step']) - (max4J - _this.step2ScoreRanges[i]['step'])/2
          _this.step2ScoreRanges[i]['deviate'] = deviate
        }
        //设置每项已选择的数量
        _this.step2ScoreRanges[i]['selected'] = 0
      }
      console.log('initStep2ScoreRanges...',this.step2ScoreRanges)
    },
    getStep2StepTagType(step){
      if(this.step2SubStep > step){
        return ''
      } else if(this.step2SubStep == step){
        return 'success'
      } else {
        return 'info'
      }
    },
    getStep2StepItem(step){
      //console.log('getStep2StepItem',step,this.step2ScoreRanges)
      let _this = this
      for (let i = 0; i < _this.step2ScoreRanges.length; i++) {
        if(_this.step2ScoreRanges[i]['step'] == step){
          return _this.step2ScoreRanges[i]
        }
      }
      return _this.step2ScoreRangesDefault[0];
    },
    formatDate (time, formatsrc) {
      return formatDate(time, formatsrc)
    },
    timeReduce: function () {
      let _this = this
      _this.answer.doTime += _this.doTime
      this.timer = setInterval(function () {
        if (_this.answer.doTime <= 0) {
          _this.answer.doTime = 0
        }
        ++_this.answer.doTime
      }, 1000)
    },
    questionCompleted (completed) {
      return this.enumFormat(this.doCompletedTag, completed)
    },
    goAnchor (selector) {
      let _this = this
      let num = parseInt(selector.substr(10)) - 1
      this.itemOrder = _this.form.titleItems[0].questionItems[num].itemOrder
      this.questionItem = _this.form.titleItems[0].questionItems[num]
      _this.order = num
      setTimeout(function () {
        _this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
      }, 200)
      _this.$refs['popovertag'].doClose()
    },
    initAnswer () {
      this.answer.id = this.form.id
      this.answer.questionOrder = this.form.questionOrder
      let titleItemArray = this.form.titleItems
      for (let tIndex in titleItemArray) {
        let questionArray = titleItemArray[tIndex].questionItems
        for (let qIndex in questionArray) {
          let question = questionArray[qIndex]
          this.answer.answerItems.push({ title: question.title, permanentId: question.permanentId, questionId: question.id, content: question.content, contentArray: [], completed: false, itemOrder: question.itemOrder, lastContent: null, startTime: question.startTime, endTime: question.endTime, partOrder: question.partOrder, questionReport: {}, readOnly: false, imgUrl: question.imgUrl})
        }
      }
      // 初始化开始时间,设置第一个时间
      for (let i = 0; i < this.answer.answerItems.length; i++) {
        if (this.answer.answerItems[i].startTime == null || this.answer.answerItems[i].startTime.trim() === '') {
          this.answer.answerItems[i].startTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
          break
        }
      }
    },
    isContentNotEmpty: function (num) {
      let _this = this
      return _this.answer.answerItems[num].content !== '' && _this.answer.answerItems[num].content !== null && _this.answer.answerItems[num].content.trim() !== ''
    },
    nextQuestion: function (nowPartOrder) {
      let _this = this
      let num = ++_this.order
      _this.itemOrder = _this.form.titleItems[0].questionItems[num].itemOrder
      // 跳到没有答的题目
      while (_this.isContentNotEmpty(num) && num !== _this.answer.answerItems.length - 1) {
        num = ++_this.order
        this.getEmptySubjct(num)
      }
      _this.questionItem = _this.form.titleItems[0].questionItems[num]
      _this.partOrder = _this.questionItem.partOrder
      if (_this.partOrder !== nowPartOrder) {
        _this.isShowGuide(true)
      }
      _this.preDisable = true
      _this.nextDisable = false
      _this.answer.answerItems[_this.order].startTime = _this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      // 如果是最后一个并且已经完成了,就提交
      if (num === _this.answer.answerItems.length - 1 && _this.isForFinish(num)) {
        this.submitForm()
      }
    },
    nextQuestionOrder: function (nowPartOrder) {
      if (this.order < this.itemSize - 1) {
        this.nextQuestion(nowPartOrder)
      } else {
        this.submitDisable = false
      }
    },
    isNextShowGuide: function (nowPartOrder) {
      let _this = this
      // 本段的每一题都打完要指导语
      let showGuideFlag = true
      for (let i = 0; i < _this.answer.answerItems.length; i++) {
        if (_this.form.titleItems[0].questionItems[i].partOrder === nowPartOrder && !_this.isContentNotEmpty(i)) {
          showGuideFlag = false
        }
      }
      return showGuideFlag
    },
    catThaiSubmit: function (answerSubmit) {
      answerSubmit.isCallTain = 'CallThai'
    },
    getEmptySubjct: function (order) {
      let _this = this
      _this.itemOrder = _this.form.titleItems[0].questionItems[order].itemOrder
      _this.questionItem = _this.form.titleItems[0].questionItems[order]
      _this.partOrder = _this.questionItem.partOrder
      _this.preDisable = false
      _this.answer.answerItems[order].readOnly = false
      // _this.answer.answerItems[order].content = ''
      // _this.answer.answerItems[order].completed = false
      _this.order = order
    },
    isNotEmpty (obj) {
      return obj !== null && obj !== undefined && obj !== ''
    },
    isEmpty (obj) {
      return !this.isNotEmpty(obj)
    },
    nextSubject: function () {
      let _this = this
      _this.isShowGuide(false)
      let nowPartOrder = _this.partOrder
      // 设置上一题的结束时间
      this.answer.answerItems[_this.order].endTime = _this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      // 循环没有答的题目,这里同时决定了问答题打完可以进入下一题
      for (let i = 0; i < _this.order; i++) {
        if (!this.isContentNotEmpty(i)) {
          // 返回之前没做的那道题
          this.getEmptySubjct(i)
          return
        }
        // 如果循环到最后一题就提交
        if (_this.isForFinish(i)) {
          _this.submitForm()
          return
        }
      }
      // 全部答完了就可以提交了,但是如果是最后一题就自己提交
      for (let i = 0; i < _this.answer.answerItems.length; i++) {
        if (!_this.isContentNotEmpty(i)) {
          break
        }
        if (i === _this.answer.answerItems.length - 1 && _this.order !== _this.answer.answerItems.length - 1) {
          _this.submitForm()
          return
        }
      }
      this.answer.answerItems[_this.order].readOnly = true
      let answerSubmit = _this.getSubmitAnswerValue(nowPartOrder)
      // 已经答到了最后一题了,不用自动跳到下一题
      if (this.order + 1 > this.itemSize - 1) {
        this.submitDisable = false
        return
      }
      // 如果是最后一题就上面提交了,不会走到这里
      let loading = null
      if (this.isNextShowGuide(nowPartOrder)) {
        this.catThaiSubmit(answerSubmit)
        loading = _this.$loading({
          lock: false,
          text: _this.$t('nextPartInfo'),
          spinner: 'el-icon-loading'
        })
      }
      examPaperAnswerApi.answerSubmit(answerSubmit, _this.memberToken).then(re => {
        if (_this.isNotEmpty(loading)) {
          loading.close()
        }
        if (re.code !== 1) {
          _this.$message.error(re.message)
          throw (re.message)
        }
        // 展示指导语
        if (this.isNextShowGuide(nowPartOrder)) {
          // 展示指导语
          _this.showNextGuide(re.response.signalObject, true)
        } else {
          this.nextQuestionOrder(nowPartOrder)
        }
      }).catch(e => {
        if (_this.isNotEmpty(loading)) {
          loading.close()
        }
        _this.reloadPage(e)
      })
    },
    getSubmitAnswerValue (nowPartOrder) {
      let _this = this
      let answerSubmit = JSON.parse(JSON.stringify(_this.answer))
         //add answerItems
      answerSubmit.answerItems.forEach(answerItem => {
        // 题目报表,如果没有结束时间,开始时间也不需要
        if (answerItem.endTime == null || answerItem.endTime === '') {
          answerItem.startTime = ''
        }
            answerItem.completed = true
            //answerItem.content = this.getLikeTypeByScoreRangeItemOrder(answerItem.subjectId)
        answerItem.questionReport = {
               questionOrder: answerItem.questionId,
               questionTitle: answerItem.title,
               permanentId: answerItem.permanentId,
               startTime: answerItem.startTime,
               endTime: answerItem.endTime,
               langType: _this.langType,
               partOrder: answerItem.partOrder,
               imgUrl: answerItem.imgUrl,
               answer: answerItem.content }
      })
      answerSubmit.langType = _this.langType
      answerSubmit.isCallTain = _this.isCallTain
      answerSubmit.partOrder = nowPartOrder
      answerSubmit.itemOrder = _this.itemOrder
         //add scoreRanges
         if(_this.step2SubStep >= _this.step2ScoreRanges.length){
            answerSubmit['scoreRanges'] =   _this.form.titleItems[0].scoreRanges
         } else {
            let item = _this.getStep2StepItem(_this.step2SubStep)
            console.log('getStep2StepItem',_this.step2SubStep,item)
            answerSubmit['scoreRanges'] =   []
            answerSubmit['scoreRanges'].push(item)
         }
         console.log('answerSubmit.scoreRanges=',answerSubmit['scoreRanges'])
         for (let item of answerSubmit['scoreRanges']) {
            item['completed'] = true
            item['questionReports'] = []
            for (let question of _this.questionItems) {
              if(question.subjectId === item.itemOrder){
                  item['questionReports'].push({
                     questionOrder:question.questionOrder,  //题目ID
                     questionTitle:question.questionTitle, //题目标题
                     permanentId:question.permanentId, //题目永久编号
                     startTime:question.startTime, //答题开始时间
                     endTime:question.endTime, //答题结束时间
                     langType:question.langType, //答题语言
                     partOrder:question.partOrder,  //分片
                     imgUrl:question.imgUrl,  //图片地址
                     answer:question.content  //题目答案
                  })
              }
               }
            }
         }
      return answerSubmit
    },
    preSubject () {
      let _this = this
      _this.isShowGuide(false)
      if (_this.order > 0) {
        let num = --_this.order
        _this.itemOrder = _this.form.titleItems[0].questionItems[num].itemOrder
        _this.questionItem = _this.form.titleItems[0].questionItems[num]
        _this.partOrder = _this.questionItem.partOrder
        _this.preDisable = false
        _this.nextDisable = true
        _this.answer.answerItems[_this.order].readOnly = false
      }
    },
    submitSubAnswer: function () {
      let _this = this
      this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      // 提交部分
      let answerSubmit = _this.getSubmitAnswerValue(_this.partOrder)
      let loading = _this.$loading({
        lock: false,
        text: _this.$t('uploadInfo'),
        spinner: 'el-icon-loading'
      })
      examPaperAnswerApi.answerSubmit(answerSubmit, _this.memberToken).then(re => {
        loading.close()
        if (re.code === 1) {
               console.log('answerSubmit...',re)
        }
        _this.formLoading = false
      }).catch(e => {
        _this.reloadPage(e)
        loading.close()
      })
    },
    submitAnswer: function (mess) {
      let _this = this
      this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      // 提交之前提交最后一段
      let answerSubmit = _this.getSubmitAnswerValue(_this.partOrder)
      let loading = _this.$loading({
        lock: false,
        text: _this.$t('uploadInfo'),
        spinner: 'el-icon-loading'
      })
      examPaperAnswerApi.answerSubmit(answerSubmit, _this.memberToken).then(re => {
        loading.close()
        if (re.code === 1) {
          _this.$router.push({ path: '/exam/finish', query: { name: _this.form.name, content: mess, tokenId: _this.memberToken } })
        } else {
          _this.$message.error(re.message + '/exam/finish')
        }
        _this.formLoading = false
      }).catch(e => {
        _this.reloadPage(e)
        loading.close()
      })
    },
    showNextGuide: function (signalObject, nextQuestion) {
      let _this = this
      _this.guideDescirption = signalObject.signalDescription
      if (_this.guideDescirption !== null && _this.guideDescirption !== undefined && _this.guideDescirption !== '') {
        _this.isShowGuide(true)
        _this.preDisable = false
      } else {
        throw (signalObject.message)
      }
      if (Object.keys(_this.guideDescirption).length === 0) {
        _this.isShowGuide(false)
        _this.preDisable = false
      }
      _this.startDoDisable = false
      if (!nextQuestion) {
        return
      }
      _this.nextQuestionOrder()
    },
    isNull: function (obj) {
      return obj === null || obj === undefined
    },
    isShowGuide (flag) {
      let _this = this
      _this.guide = flag
      // _this.isCallTain = flag ? 'callTain' : ''
    },
    reloadPage (e) {
      let _this = this
      let mes = ''
      if (e.message !== null && e.message !== undefined && e.message.indexOf('timeout') !== -1) {
        mes = _this.$t('submitTimeout') + ',' + 'order:' + _this.order + ',' + e.message// 提交后台超时
      } else {
        mes = JSON.stringify(e) + ',' + 'order:' + _this.order + ',' + e.message
      }
      // 调试用
      // _this.$router.push({ path: '/exam/exception', query: { name: _this.form.name, content: _this.$t('submitExceptionInfo') + '<br>' + mes } })
      _this.$router.push({ path: '/exam/exception', query: { name: _this.form.name, content: _this.$t('submitExceptionInfo') } })
      _this.formLoading = false
      _this.submitDisable = false
    },
    isForFinish (i) {
      return i === this.answer.answerItems.length - 1 && (this.answer.answerItems[i].content !== null && this.answer.answerItems[i].content !== '')
    },
    isDiffPartOrder: function () {
      let _this = this
      return _this.form.titleItems[0].questionItems[_this.order].partOrder !== _this.form.titleItems[0].questionItems[_this.order - 1].partOrder
    },
    ...mapMutations('user', ['setMemberTocken']),
    ...mapMutations('user', ['setLangType']),
    ...mapMutations('user', ['setLangFlag'])
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', { doCompletedTag: state => state.exam.question.answer.doCompletedTag }),
    ...mapState('user', { memberToken: state => state.memberToken }),
    ...mapState('user', { langType: state => state.langType }),
    ...mapState('user', { langFlag: state => state.langFlag }),
    ...mapState('exam', { doUrl: state => state.doUrl })
  }
}
            //console.log('resetQuestionItems...',id,key,value,this.questionItems)
         },
         //根据二维图表数据重设QuestionItems的归属步骤(subjectId)
         resetAllQuestionItemsValueByEWEIArea() {
            for (let i = 1; i < this.step3EWEIArea.length; i++) {
               for (let q of this.step3EWEIArea[i]) {
                  this.resetQuestionItemsSubjectIdById(q.id, i)
               }
            }
            console.log('resetQuestionItems...by EWEIArea', this.questionItems)
         },
         getQuestionItemsByKey(key, stepOrder, index) {
            let arr = []
            for (let item of this.questionItems) {
               if (!this.isNull(item[key])) {
                  if (item[key] == stepOrder) {
                     arr.push(item)
                  }
               }
            }
            //console.log('getQuestionItemsByKey',key,stepOrder,index,arr,this.questionItems)
            if (index <= arr.length) {
               return arr[index - 1]
            }
            return {
               id: null,
               imgUrl: null,
               subjectId: null
            }
         },
         /**
          * 计算步骤id的已选择数量
          * @param {Object} id
          * @param {Object} value
          */
         caculateScoreRangeSelectedById(id, value) {
            let sum = 0
            for (let item of this.questionItems) {
               if (item.subjectId === id) {
                  sum = sum + 1
               }
            }
            for (let item of this.step2ScoreRanges) {
               if (item.itemOrder == id) {
                  item['selected'] = sum
               }
            }
         },
         initTestData() {
            //console.log('initTestData...s',this.questionItems)
            for (let item of this.questionItems) {
               item['content'] = 1
            }
            for (let i = 0; i < this.step2ScoreRanges.length; i++) {
               for (let j = 1; j <= this.step2ScoreRanges[i].quantity; j++) {
                  //console.log('for',i,j,this.step2ScoreRanges,this.questionItems)
                  for (let item of this.questionItems) {
                     if (this.isNull(item["subjectId"])) {
                        item["subjectId"] = this.step2ScoreRanges[i].itemOrder
                        break
                     }
                  }
               }
            }
            console.log('initTestData...e', this.questionItems)
         },
         initStep2ScoreRanges(arr) {
            //console.log('initStep2ScoreRanges...s', arr)
            let _this = this
            _this.step2ScoreRanges = _this.step2ScoreRanges.concat(arr)
            let s = 1
            let a = 2 //-2
            let max = _this.step2ScoreRanges.length
            let max4O = (max % 2 == 0) ? (max) : (max + 1)
            let max4J = (max % 2 == 0) ? (max + 1) : (max)
            let deviate = 0 //偏离值
            for (let i = 0; i < _this.step2ScoreRanges.length; i++) {
               //设置每项step数
               if (a > 0) { //+
                  if (s < max) {
                     _this.step2ScoreRanges[i]['step'] = s
                     a = 2
                     s = s + a
                  } else if (s == max) {
                     _this.step2ScoreRanges[i]['step'] = s
                     a = -2
                     s = s + 1
                  } else {
                     _this.step2ScoreRanges[i]['step'] = s - 1
                     a = -2
                     s = s - 1
                  }
               } else { //-
                  s = s + a
                  _this.step2ScoreRanges[i]['step'] = s
               }
               //设置每项step偏离最后step的正负距离值(奇数step正偏离,偶数step负偏离)
               if (_this.step2ScoreRanges[i]['step'] % 2 == 0) { //偶数
                  deviate = (max4O - _this.step2ScoreRanges[i]['step']) - (max4O - _this.step2ScoreRanges[i][
                     'step'
                  ]) / 2
                  _this.step2ScoreRanges[i]['deviate'] = 0 - deviate
               } else {
                  deviate = (max4J - _this.step2ScoreRanges[i]['step']) - (max4J - _this.step2ScoreRanges[i][
                     'step'
                  ]) / 2
                  _this.step2ScoreRanges[i]['deviate'] = deviate
               }
               //设置每项已选择的数量
               _this.step2ScoreRanges[i]['selected'] = 0
            }
            console.log('initStep2ScoreRanges...e', this.step2ScoreRanges)
            _this.initQuestionItems()
         },
         initQuestionItems(){
            let _this = this
            for (let sr of _this.step2ScoreRanges) {
               if(_this.isNotEmpty(sr['questionReports'])){
                  for(let q of sr.questionReports){
                     _this.resetQuestionItemsSubjectIdById(q.questionId,sr.itemOrder)
                  }
               }
            }
            console.log('initQuestionItems...e', this.questionItems)
         },
         getStep2StepTagType(step) {
            if (this.step2SubStep > step) {
               return ''
            } else if (this.step2SubStep == step) {
               return 'success'
            } else {
               return 'info'
            }
         },
         getStep2StepItem(step) {
            //console.log('getStep2StepItem',step,this.step2ScoreRanges)
            let _this = this
            for (let i = 0; i < _this.step2ScoreRanges.length; i++) {
               if (_this.step2ScoreRanges[i]['step'] == step) {
                  return _this.step2ScoreRanges[i]
               }
            }
            return _this.step2ScoreRangesDefault[0];
         },
         formatDate(time, formatsrc) {
            return formatDate(time, formatsrc)
         },
         timeReduce: function() {
            let _this = this
            _this.answer.doTime += _this.doTime
            this.timer = setInterval(function() {
               if (_this.answer.doTime <= 0) {
                  _this.answer.doTime = 0
               }
               ++_this.answer.doTime
            }, 1000)
         },
         initAnswer() {
            this.answer.id = this.form.id
            this.answer.questionOrder = this.form.questionOrder
            let titleItemArray = this.form.titleItems
            for (let tIndex in titleItemArray) {
               let questionArray = titleItemArray[tIndex].questionItems
               for (let qIndex in questionArray) {
                  let question = questionArray[qIndex]
                  this.answer.answerItems.push({
                     title: question.title,
                     permanentId: question.permanentId,
                     questionId: question.id,
                     content: question.content,
                     contentArray: [],
                     completed: false,
                     itemOrder: question.itemOrder,
                     lastContent: null,
                     startTime: question.startTime,
                     endTime: question.endTime,
                     partOrder: question.partOrder,
                     questionReport: {},
                     readOnly: false,
                     imgUrl: question.imgUrl
                  })
               }
            }
            // 初始化开始时间,设置第一个时间
            for (let i = 0; i < this.answer.answerItems.length; i++) {
               if (this.answer.answerItems[i].startTime == null || this.answer.answerItems[i].startTime.trim() ==
                  '') {
                  this.answer.answerItems[i].startTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
                  break
               }
            }
         },
         isContentNotEmpty: function(num) {
            let _this = this
            return _this.answer.answerItems[num].content !== '' && _this.answer.answerItems[num].content !==
               null && _this.answer.answerItems[num].content.trim() !== ''
         },
         nextQuestion: function(nowPartOrder) {
            let _this = this
            let num = ++_this.order
            _this.itemOrder = _this.form.titleItems[0].questionItems[num].itemOrder
            // 跳到没有答的题目
            while (_this.isContentNotEmpty(num) && num !== _this.answer.answerItems.length - 1) {
               num = ++_this.order
               this.getEmptySubjct(num)
            }
            _this.questionItem = _this.form.titleItems[0].questionItems[num]
            _this.partOrder = _this.questionItem.partOrder
            if (_this.partOrder !== nowPartOrder) {
               _this.isShowGuide(true)
            }
            _this.preDisable = true
            _this.nextDisable = false
            _this.answer.answerItems[_this.order].startTime = _this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
            // 如果是最后一个并且已经完成了,就提交
            if (num === _this.answer.answerItems.length - 1 && _this.isForFinish(num)) {
               this.submitForm()
            }
         },
         nextQuestionOrder: function(nowPartOrder) {
            if (this.order < this.itemSize - 1) {
               this.nextQuestion(nowPartOrder)
            } else {
               this.submitDisable = false
            }
         },
         isNextShowGuide: function(nowPartOrder) {
            let _this = this
            // 本段的每一题都打完要指导语
            let showGuideFlag = true
            for (let i = 0; i < _this.answer.answerItems.length; i++) {
               if (_this.form.titleItems[0].questionItems[i].partOrder === nowPartOrder && !_this
                  .isContentNotEmpty(i)) {
                  showGuideFlag = false
               }
            }
            return showGuideFlag
         },
         catThaiSubmit: function(answerSubmit) {
            answerSubmit.isCallTain = 'CallThai'
         },
         getEmptySubjct: function(order) {
            let _this = this
            _this.itemOrder = _this.form.titleItems[0].questionItems[order].itemOrder
            _this.questionItem = _this.form.titleItems[0].questionItems[order]
            _this.partOrder = _this.questionItem.partOrder
            _this.preDisable = false
            _this.answer.answerItems[order].readOnly = false
            // _this.answer.answerItems[order].content = ''
            // _this.answer.answerItems[order].completed = false
            _this.order = order
         },
         isNotEmpty(obj) {
            return obj !== null && obj !== undefined && obj !== ''
         },
         isEmpty(obj) {
            return !this.isNotEmpty(obj)
         },
         getContentByQuestionId(id) {
            let cont
            for (let item of this.questionItems) {
               if (item.id == id) {
                  cont = item.content
                  break
               }
            }
            return cont;
         },
         getSubmitAnswerValue(nowPartOrder) {
            let _this = this
            let answerSubmit = JSON.parse(JSON.stringify(_this.answer))
            //add answerItems
            answerSubmit.answerItems.forEach(answerItem => {
               // 题目报表,如果没有结束时间,开始时间也不需要
               if (answerItem.endTime == null || answerItem.endTime === '') {
                  answerItem.startTime = ''
               }
               answerItem.completed = true
               answerItem.content = this.getContentByQuestionId(answerItem.questionId)
                  //this.getLikeTypeByScoreRangeItemOrder(answerItem.subjectId)
               answerItem.questionReport = {
                  questionOrder: answerItem.questionId,
                  questionTitle: answerItem.title,
                  permanentId: answerItem.permanentId,
                  startTime: answerItem.startTime,
                  endTime: answerItem.endTime,
                  langType: _this.langType,
                  partOrder: answerItem.partOrder,
                  imgUrl: answerItem.imgUrl,
                  answer: answerItem.content
               }
            })
            answerSubmit.langType = _this.langType
            answerSubmit.isCallTain = _this.isCallTain
            answerSubmit.partOrder = nowPartOrder
            answerSubmit.itemOrder = _this.itemOrder
            //add scoreRanges
            if (_this.step2SubStep >= _this.step2ScoreRanges.length || true) {//传递全部
               answerSubmit['scoreRanges'] = _this.form.titleItems[0].scoreRanges
            } else {
               let item = _this.getStep2StepItem(_this.step2SubStep)
               //console.log('getStep2StepItem', _this.step2SubStep, item)
               answerSubmit['scoreRanges'] = []
               answerSubmit['scoreRanges'].push(item)
            }
            //console.log('answerSubmit.scoreRanges=', answerSubmit['scoreRanges'])
            for (let item of answerSubmit['scoreRanges']) {
               item['completed'] = true
               item['questionReports'] = []
               for (let question of _this.questionItems) {
                  if (question.subjectId == item.itemOrder) {
                     item['questionReports'].push({
                        questionId: question.id, //题目ID
                        questionOrder: question.questionOrder, //题目序号
                        questionTitle: question.questionTitle, //题目标题
                        permanentId: question.permanentId, //题目永久编号
                        startTime: question.startTime, //答题开始时间
                        endTime: question.endTime, //答题结束时间
                        langType: question.langType, //答题语言
                        partOrder: question.partOrder, //分片
                        imgUrl: question.imgUrl, //图片地址
                        answer: question.content //题目答案
                     })
                  }
               }
            }
            return answerSubmit
         },
         /*
         * 过程中的提交
         */
         submitSubAnswer: function() {
            console.log('submitSubAnswer...')
            let _this = this
            //this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
            // 提交部分
            let answerSubmit = _this.getSubmitAnswerValue(_this.partOrder)
            examPaperAnswerApi.answerSubmit(answerSubmit, _this.memberToken).then(re => {
               if (re.code === 1) {
                  //console.log('answerSubmit...', re)
               }
               _this.formLoading = false
            }).catch(e => {
               _this.reloadPage(e)
            })
         },
         /**
          * 最后环节的提交
          * @param {Object} mess
          */
         submitAnswer: function(mess) {
            let _this = this
            this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
            // 提交之前提交最后一段
            let answerSubmit = _this.getSubmitAnswerValue(_this.partOrder)
            let loading = _this.$loading({
               lock: false,
               text: _this.$t('uploadInfo'),
               spinner: 'el-icon-loading'
            })
            examPaperAnswerApi.answerSubmit(answerSubmit, _this.memberToken).then(re => {
               loading.close()
               if (re.code === 1) {
                  _this.$router.push({
                     path: '/exam/finish',
                     query: {
                        name: _this.form.name,
                        content: mess,
                        tokenId: _this.memberToken
                     }
                  })
               } else {
                  _this.$message.error(re.message + '/exam/finish')
               }
               _this.formLoading = false
            }).catch(e => {
               _this.reloadPage(e)
               loading.close()
            })
         },
         showNextGuide: function(signalObject, nextQuestion) {
            let _this = this
            _this.guideDescirption = signalObject.signalDescription
            if (_this.guideDescirption !== null && _this.guideDescirption !== undefined && _this
               .guideDescirption !== '') {
               _this.isShowGuide(true)
               _this.preDisable = false
            } else {
               throw (signalObject.message)
            }
            if (Object.keys(_this.guideDescirption).length === 0) {
               _this.isShowGuide(false)
               _this.preDisable = false
            }
            _this.startDoDisable = false
            if (!nextQuestion) {
               return
            }
            _this.nextQuestionOrder()
         },
         isNull: function(obj) {
            return obj === null || obj === undefined
         },
         isShowGuide(flag) {
            let _this = this
            _this.guide = flag
            // _this.isCallTain = flag ? 'callTain' : ''
         },
         reloadPage(e) {
            let _this = this
            let mes = ''
            if (e.message !== null && e.message !== undefined && e.message.indexOf('timeout') !== -1) {
               mes = _this.$t('submitTimeout') + ',' + 'order:' + _this.order + ',' + e.message // 提交后台超时
            } else {
               mes = JSON.stringify(e) + ',' + 'order:' + _this.order + ',' + e.message
            }
            _this.$router.push({
               path: '/exam/exception',
               query: {
                  name: _this.form.name,
                  content: _this.$t('submitExceptionInfo')
               }
            })
            _this.formLoading = false
            _this.submitDisable = false
         },
         isForFinish(i) {
            return false
            //return i === this.answer.answerItems.length - 1 && (this.answer.answerItems[i].content !== null && this.answer.answerItems[i].content !== '')
         },
         isDiffPartOrder: function() {
            let _this = this
            return _this.form.titleItems[0].questionItems[_this.order].partOrder !== _this.form.titleItems[0]
               .questionItems[_this.order - 1].partOrder
         },
         previewImg(refName) {
            this.$refs[refName][0].showViewer = true
         },
         ...mapMutations('user', ['setMemberTocken']),
         ...mapMutations('user', ['setLangType']),
         ...mapMutations('user', ['setLangFlag'])
      },
      computed: {
         ...mapState('enumItem', {
            doCompletedTag: state => state.exam.question.answer.doCompletedTag
         }),
         ...mapState('user', {
            memberToken: state => state.memberToken
         }),
         ...mapState('user', {
            langType: state => state.langType
         }),
         ...mapState('user', {
            langFlag: state => state.langFlag
         }),
         ...mapState('exam', {
            doUrl: state => state.doUrl
         })
      }
   }
</script>
<style lang="scss" scoped>
   .app-item-contain{
         margin-top: 45px;
   .app-item-contain {
      margin-top: 45px;
   }
  .align-center {
    text-align: center;
  }
  .exam-question-item {
    padding: 10px;
    font-size: large;
   .footer {
      position: absolute;
      position: fixed;
      z-index: 1000;
      bottom: 0px;
   }
    .el-form-item__label {
      font-size: large !important;
    }
  }
  .question-title-padding {
    padding-left: 25px;
    padding-right: 25px;
  }
  .footer {
    position: absolute;
    position: fixed;
    z-index: 1000;
    bottom: 0px;
  }
</style>
<style lang="scss" scpoed>
   .mul-inlinediv-box{
   .mul-inlinediv-box {
      overflow: auto;
      display: block;
      -webkit-box-flex: 1;
   }
  .mul-inlinediv {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    border: 1px solid gray;
    padding: 10px 0;
    width: fit-content;
  }
  .mul-inlinediv div div{
    display: inline-table;
    vertical-align: top;
    width: 180px;
    margin: 0 2px;
  }
  .mul-inlinediv-row{
    min-height: 210px;
    margin: 0 10px;
  }
  .mul-inlinediv-lineheight{
    line-height: 210px;
    padding: 10px 0;
  }
  .inlinediv {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    min-height: 180px;
    display: flex;
  }
  .inlinediv div{
    display: inline-table;
    vertical-align: top;
    width: 100px;
    margin: auto 2px;
  }
  .mullinediv{
    display: contents;
  }
  .mullinediv-item{
    display: flex;display:
    inline-block;
    width: 180px;
    margin: 5px 4px;
  }
  .mullinediv-item:hover {
  }
  img:hover {
     transform: scale(2);
    // -ms-transform: scale(2);
    // -webkit-transform: scale(2);
    // -o-transform: scale(2);
    // -moz-transform: scale(2);
    transition-duration: 0.5s;
  }
   .container {
     padding: 32px 20px;
     .configuration {
       width: 600px;
     }
      margin-left: 10px;
   }
   .bg-purple {
       background: #d3dce6;
     }
   .mul-inlinediv {
      overflow-y: hidden;
      overflow-x: auto;
      white-space: nowrap;
      //border: 1px solid gray;
      padding: 2px 0;
      width: fit-content;
   }
   .mul-inlinediv div div {
      display: inline-table;
      vertical-align: top;
      width: 80px;
      height: 80px;
      min-width: 80px;
      min-height: 80px;
      margin: 0px;
   }
   .mul-inlinediv-row {
      min-height: 100px;
      //margin: 0 10px;
   }
   .mul-inlinediv-lineheight {
      line-height: 106px;
      //margin: 3px 0 4px 0;
      //margin: 2px 0;
   }
   .mul-inlinediv-item {
      display: flex;
      display: inline-block;
      border: 1px solid gray;
      width: 100px;
      height: 100px;
      padding: 10px;
      .tools-button {
         width: 20px;
         height: 20px;
         cursor: pointer;
      }
   }
   .inlinediv {
      overflow-y: hidden;
      overflow-x: auto;
      white-space: nowrap;
      min-height: 180px;
      padding: 10px 0px;
      //display: flex;
   }
   .inlinediv div {
      //display: inline-table;
      //vertical-align: top;
      //width: 360px;
      // margin: auto 2px;
   }
   .pic-tmparea-div {
      overflow-y: hidden;
      overflow-x: auto;
      white-space: nowrap;
      min-height: 180px;
      padding: 10px 0px;
      //display: flex;
   }
   .mullinediv {
      display: contents;
   }
   .mullinediv-item {
      display: flex;
      display: inline-block;
      width: 360px;
      margin: 5px 20px 20px 5px;
    padding: 30px 30px 10px 30px;
      box-shadow: 1px 1px 1px grey, 0 0 5px grey, 0 0 10px grey;
      .tools-button {
         width: 20px;
         height: 20px;
         cursor: pointer;
      }
   }
   .mullinediv-item2 {
      display: inline-block;
      width: 180px;
      height: 180px;
      // margin: 5px 4px;
      padding: 10px;
      box-shadow: 1px 1px 1px grey, 0 0 5px grey, 0 0 10px grey;
      div {
         height: 160px;
      }
   }
   img:hover {
      // transform: scale(2);
      // -ms-transform: scale(2);
      // -webkit-transform: scale(2);
      // -o-transform: scale(2);
      // -moz-transform: scale(2);
      // transition-duration: 0.5s;
   }
   .container {
      padding: 32px 20px;
      .configuration {
         width: 600px;
      }
   }
   .wrapper {
      display: flex;
      justify-content: center;
      width: 100%;
   }
   .mul-inlinediv-down {
      min-width: 16px;
      //line-height: 106px;
      height: 106px;
      background-size: 80% 100%;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAABoCAYAAAAAYos6AAAACXBIWXMAABnWAAAZ1gEY0crtAAAGsGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTAzLTIxVDIxOjM3OjQzKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNjdjODYwZS1iZjZkLTNjNDUtYTllYi1jZTcxOTExMGRmZjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDk3NTgwYjgtMDUwYy1jMDQ5LTk1ZDgtZmIwNmU1OTFjMTBlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MDk3NTgwYjgtMDUwYy1jMDQ5LTk1ZDgtZmIwNmU1OTFjMTBlIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowOTc1ODBiOC0wNTBjLWMwNDktOTVkOC1mYjA2ZTU5MWMxMGUiIHN0RXZ0OndoZW49IjIwMjMtMDMtMjFUMjE6Mzc6NDMrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjlhZDEyMjEtM2MzOC0yMDQ5LTlhOWQtMmJjZjk4NmU5NTFhIiBzdEV2dDp3aGVuPSIyMDIzLTAzLTIxVDIyOjMxOjI4KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjA2N2M4NjBlLWJmNmQtM2M0NS1hOWViLWNlNzE5MTEwZGZmMyIgc3RFdnQ6d2hlbj0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph/lkloAAAEzSURBVGiB7ZlBDoMwDASdXuBNPI+P8pTtpb3R2FUWaw1ZiUuFmBJ7HZsYAItc+77DzE6vbdsQecbLCGqthe6jwKIKwY7jWADkwFjSgzGWMAxjAaNvtg6TojBPdX1mlhuzYVAYxgLqxQzAkgZjSS9mHqi2qdNgAOZOzYHJpD4V5qmuz+6b+t8pJAXG0sNhAFaZmJU2dR6MBdRbxlRYekc8d+rLYVFJxkwjG1truTGjwqRSnwrr7dTRJQzDPE1TD2djus+i0ksQmZEp3WdpMHo23ncY9LIxzdS1q/4zR6baVV+mSb0E9kuX1EYPSINFgFQYQ8OnubVro5lIk0qH9YC1a6Mnekc89G/+gX2Ap7/TfTYPWCmwXpNavzYypPdmvZHpvpMnHSZzpFX7SypLtb4WyNbGN9sG+pv7TY3OAAAAAElFTkSuQmCC);
   }
   .mul-inlinediv-down:first-child {
      margin-top: 44px;
      height: 62px;
      min-height: 62px;
      background-size: 80% 100%;
      background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAABoCAYAAAAAYos6AAAACXBIWXMAABnWAAAZ1gEY0crtAAAGsGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTAzLTIxVDIxOjM3OjQzKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNjdjODYwZS1iZjZkLTNjNDUtYTllYi1jZTcxOTExMGRmZjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDk3NTgwYjgtMDUwYy1jMDQ5LTk1ZDgtZmIwNmU1OTFjMTBlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MDk3NTgwYjgtMDUwYy1jMDQ5LTk1ZDgtZmIwNmU1OTFjMTBlIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowOTc1ODBiOC0wNTBjLWMwNDktOTVkOC1mYjA2ZTU5MWMxMGUiIHN0RXZ0OndoZW49IjIwMjMtMDMtMjFUMjE6Mzc6NDMrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjlhZDEyMjEtM2MzOC0yMDQ5LTlhOWQtMmJjZjk4NmU5NTFhIiBzdEV2dDp3aGVuPSIyMDIzLTAzLTIxVDIyOjMxOjI4KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjA2N2M4NjBlLWJmNmQtM2M0NS1hOWViLWNlNzE5MTEwZGZmMyIgc3RFdnQ6d2hlbj0iMjAyMy0wMy0yMVQyMzowNDowMiswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph/lkloAAAEzSURBVGiB7ZlBDoMwDASdXuBNPI+P8pTtpb3R2FUWaw1ZiUuFmBJ7HZsYAItc+77DzE6vbdsQecbLCGqthe6jwKIKwY7jWADkwFjSgzGWMAxjAaNvtg6TojBPdX1mlhuzYVAYxgLqxQzAkgZjSS9mHqi2qdNgAOZOzYHJpD4V5qmuz+6b+t8pJAXG0sNhAFaZmJU2dR6MBdRbxlRYekc8d+rLYVFJxkwjG1truTGjwqRSnwrr7dTRJQzDPE1TD2djus+i0ksQmZEp3WdpMHo23ncY9LIxzdS1q/4zR6baVV+mSb0E9kuX1EYPSINFgFQYQ8OnubVro5lIk0qH9YC1a6Mnekc89G/+gX2Ap7/TfTYPWCmwXpNavzYypPdmvZHpvpMnHSZzpFX7SypLtb4WyNbGN9sG+pv7TY3OAAAAAElFTkSuQmCC);
   }
   .mul-inlinediv-down:last-child {
         background-size: 82% 60%;
         background-repeat: no-repeat;
   background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAA4CAYAAAAM7IPNAAAACXBIWXMAABnWAAAZ1gEY0crtAAAGrWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTAzLTIxVDIxOjQxOjE3KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wMy0yMVQyMzowMzoyNyswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wMy0yMVQyMzowMzoyNyswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMzgzOTg1Zi03OGUwLTU2NGQtYmVlZi1mNmI5YjNkMDRmOWMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZTY2NWMzZTQtYjM4Yi05MjQ0LThiNTUtYTczMTQ4NGQzN2UwIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZTY2NWMzZTQtYjM4Yi05MjQ0LThiNTUtYTczMTQ4NGQzN2UwIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplNjY1YzNlNC1iMzhiLTkyNDQtOGI1NS1hNzMxNDg0ZDM3ZTAiIHN0RXZ0OndoZW49IjIwMjMtMDMtMjFUMjE6NDE6MTcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDQyZDFjNWEtOTZmZS1lMzQ1LTlkN2EtM2NhY2I4YjAyODA3IiBzdEV2dDp3aGVuPSIyMDIzLTAzLTIxVDIyOjQyKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjEzODM5ODVmLTc4ZTAtNTY0ZC1iZWVmLWY2YjliM2QwNGY5YyIgc3RFdnQ6d2hlbj0iMjAyMy0wMy0yMVQyMzowMzoyNyswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pn/gmj0AAAR7SURBVFiF7ZffSyNXFMfPmNikE7OpP5BUEidmmMmMEyc6Mkj8kUSxIT745ItPBQsFoQ99Kbj9A4pKn31SVrq4rKAvSgpFqBCMoaQ0mmgslm7UWA3+qCVZTVC33j64W3RN4kSnUpb9wn2Ye+bezz33Hu49BxBCcFsbHx//3OPxIAC40ViWRQMDAxNS5imCB5QkGEJIgRB6GFg+YRgGGIY9DKwQSd3Gh4PJBZQcILlsr8/sb9lgckmWbXw3o1GqV5JhEoCvZIXJIVlCX1bYa2BOm6zRKNt1FY1GyycnJ3uj0Wj5XSe57Qbxer2fLC8vf6xMJpOV0Wj0eSQSearX638jSTJoMplCHMf9KRGUtX9hYcG2sbHRuLm5KaTT6Y9cLteosri4+Oz09HRyYmLiU4VCAXV1deByuYaOjo4m29rawgAAp6en2ouLi6yTIoTg/Pwcf/O9tLRkWFtb6/D5fJ8Fg0Hn1tYWuN1uaGtr+04piuKLg4ODUa/X2xuLxSAQCMDq6urj6enpxxaLJWS325+vr6+3ptPprLCzszPY2dlhx8bGvohEIp6VlRX39vb2B6lUCk5OTkCr1YLD4fiapmm/EgCAJMmfWZZ9cXR0RO7t7UEymYT9/X1IJBJCPB4XUqkU7O/vZ4UdHh5CKBQSdnd3hXg8DolEAo6PjwEAQKPRgMlkAqvVOkdRVObfzGd4eHiwqakpawZ110YQBOrv7/8xFosprmVXDodjnKbpUNbl31FGoxE6OztHampqLqP1al43ODj4rcFgQEql8t5e6XQ61NfXF8iZN9I07ed5HlQq1b29MplMwLKs72rfNZjFYvE7nc4hHMfhvhJF0V9fX//9tc63U+S5ublWq9WKVCrVnbZPoVAgHMfRyMjIV7em3wRB/GKz2cJlZWV38kir1QLHcUBR1E9v227AaJrOtLe3jxoMhjvBKisrwe12PzEYDKs3jNmqjfX19Q97enp+LzQqMQxDTqfzVSAQYCVXMTRNZxiG8VVXVxfklV6vB4vF4rfb7b9ms+d8z3ie/4Hn+YJgNE2DzWbz5rLnhDU2Ns7Y7fahQmCiKE61tLQ8KxhGkuQZTdOLDMNASUlJXoharQaCIIBl2XmbzZYoGAYAQBDEcmtrq7+8PP8jrtVqQRAEIEkymO+/vLCGhoY/uru7v9Hr9XlhFRUV0NXV9aXRaAzn/VFK4d3b27ui0+myhrtGo0Fut/uvcDhcKUsBX1tb6yMIIqutqqoKOI6b53k+++t6RZJgoihO1dfXZz0PjuOgubk5ZwQWDPN4PD6r1TqP4zgUFV0OwTAM1Go11NbWPhUEYUY2GAAARVGLLMuCRqMBAIDi4mKgKAosFovPbDbLW3mazeZgV1fXk4qKCgAAwHEcOjo6Zmia9kudQ1I0vmk+n88miiIqKipCVVVVaHZ21lPIeKXkVQGAw+EIMwwTymQygl6vf0lR1GIh4wuCAVzemY8ePRJKS0unGIZ5+Z/CmpubnzEM41Or1QWBAAAwucohKfr/lbnvYe9h7x7sHwGftes0162GAAAAAElFTkSuQmCC);
      }
</style>