<style>
  .examPaper_Top {
    width: 100%;
    width: 100%;
    height: 83px;
    border-bottom: 1px solid #d9d9d9;
    background: #f0f0f0;
    min-width: 1280px;
    display: flex;
    align-items: center;
  }

  .Exam-main {
    width: 100%;
    height: auto !important;
    overflow: hidden;
    margin-top: 34px;
    min-width: 1280px;
  }

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

  .f1 {
    float: left;
  }

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

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

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

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

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

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

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

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

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

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

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

</style>
<template>
  <div class="examPaper">
    <div class="examPaper_Top">
      <div style="width:80%;display:flex;">
        <div style="width:40%;margin:0 20px;">
          <q-input filled label="标题" v-model="DataObj.PaperName" />
        </div>
        <div style="width:20%;">
          <q-select filled option-value="Id" option-label="Name" :options="easyList" emit-value map-options label="难度"
            use-input clearable v-model="DataObj.DifficultyType" />
        </div>
      </div>
      <div style="width:20%;text-align:right;">
        <q-btn color="accent" size="sm" class="q-mr-md" label="预览" />
        <q-btn color="accent" size="sm" class="q-mr-md" label="保存并返回" @click="SavePaper()" />
      </div>
    </div>
    <div class="Exam-main">
      <div class="Exam-left f1">
        <p class="Left-ptitel">
          <span>题量：<i>10</i></span>
          <span>  总分：<i>50.0</i></span>
        </p>
        <div class="Left-list" style="height:740px;overflow:auto;">
          <template v-if="DataObj&&DataObj.GroupList&&DataObj.GroupList.length>0">
            <div class="List-con1" v-for="(gItem,gIndex) in DataObj.GroupList" :key="gIndex">
              <b>(<label>{{gIndex+1}}</label>)</b>
              <b>{{gItem.GroupName}}</b>
              <ul class="List-ul" v-if="gItem.DetailsList&&gItem.DetailsList.length>0">
                <li class="" style="cursor:pointer;" v-for="(dItem,dIndex) in gItem.DetailsList" :key="dIndex"
                  @click="ClickItem(dItem)">
                  {{dIndex+1}} <span @click="ClickItem(dItem)" v-html="dItem.Title">
                  </span>
                </li>
              </ul>
            </div>
          </template>
        </div>
      </div>
      <div class="Exam-right f1">
        <span></span>
        <div class="row wrap" v-if="ChooseItem">
          <div class="col-12" style="margin-bottom:20px">
            题型
            <template v-for="(fItem,fIndex) in firstTypeList">
              <q-btn :key="fIndex" color="accent" :label="fItem.Name" style="margin-left:5px;"
                @click="onItemClick(fItem)" />
            </template>
            <q-btn-dropdown color="accent" label="更多" style="margin-left:5px;">
              <q-list>
                <q-item v-for="(fItem,fIndex) in secondTypeList" @click="onItemClick(fItem)" clickable v-close-popup
                  :key="fIndex">
                  <q-item-section>
                    <q-item-label>{{fItem.Name}}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </div>
          <div class="edit_stem">

            <q-input filled stack-label maxlength="5" :dense="false" v-model="ChooseItem.Score" class="col-12 q-pb-lg"
              label="分数" />
          </div>
          <div class="col-12">
            <template v-if="ChooseItem.QuestionTypeKey=='cloze'">
              <span class="question_number">选项处用##题号##替换，如##1##</span>
            </template>
            <UeEditor v-if="ChooseItem.QuestionTypeKey!='sharing-choose'" v-model="ChooseItem.Title" :config="config"
              ref="UE_Title"></UeEditor>
          </div>
          <br />
          <!--单选题-->
          <single v-if="ChooseItem.QuestionTypeKey=='single'||ChooseItem.QuestionTypeKey=='single-number'"
            :questionData="AnswerList" @getChild="getChildData" :setOption="ChooseItem"></single>
          <!--多选题-->
          <multiple v-if="ChooseItem.QuestionTypeKey=='multiple'" :questionData="AnswerList" @getChild="getChildData"
            :setOption="ChooseItem"></multiple>
          <!--填空题-->
          <fill-in v-if="ChooseItem.QuestionTypeKey=='fill-in'" :questionData="AnswerList" @getChild="getChildData"
            :setOption="ChooseItem"></fill-in>
          <!--判断题-->
          <judge v-if="ChooseItem.QuestionTypeKey=='judge'" :questionData="AnswerList" @getChild="getChildData"
            :setOption="objOption"></judge>
          <!--简答题、名词解释、论述题、计算题、口语题、其它-->
          <short-answer v-if="ChooseItem.QuestionTypeKey=='short-answer'||ChooseItem.QuestionTypeKey=='noun-explanation'||ChooseItem.QuestionTypeKey=='essay-question'
            ||ChooseItem.QuestionTypeKey=='calculation' || ChooseItem.QuestionTypeKey=='spoken'|| ChooseItem.QuestionTypeKey=='other'
            " :setOption="objOption"> </short-answer>
          <!--分录题、资料题-->
          <entry-problem v-if="ChooseItem.QuestionTypeKey=='entry-problem'|| ChooseItem.Key=='data-question'"
            :questionData="AnswerList" :setOption="objOption" @getChild="getChildData">
          </entry-problem>
          <!--连线题-->
          <matching v-if="ChooseItem.QuestionTypeKey=='matching'" :questionData="AnswerList" :setOption="ChooseItem"
            @getChild="getChildData"></matching>
          <!--排序题-->
          <sorting-problem v-if="ChooseItem.QuestionTypeKey=='sorting-problem'" :questionData="AnswerList"
            :setOption="ChooseItem" @getChild="getChildData"></sorting-problem>
          <!--完型填空-->
          <cloze v-if="ChooseItem.QuestionTypeKey=='cloze'" :questionData="AnswerList" :setOption="ChooseItem"
            @getChild="getChildData"></cloze>
          <!--阅读理解、听力题-->
          <reading-comprehensio
            v-if="ChooseItem.QuestionTypeKey=='reading-comprehensio'||ChooseItem.QuestionTypeKey=='listening'"
            :questionData="AnswerList" :setOption="ChooseItem" @getChild="getChildData"></reading-comprehensio>
          <!--共用选择题-->
          <sharing-choose v-if="ChooseItem.QuestionTypeKey=='sharing-choose'" :questionData="AnswerList"
            @getChild="getChildData" :setOption="ChooseItem">
          </sharing-choose>
          <br />
          <div class="col-12">
            <div style="margin:20px 0;">答案解析</div>
            <UeEditor v-model="ChooseItem.AnswerParse" :config="config" ref="AnswerParse"></UeEditor>
          </div>
          <br />
          <div class="col-12">
            <br />
            <span class="difficulty_Degree">难度</span>
            <select v-model="ChooseItem.DifficultyType" class="selectBox blue-border">
              <template v-for="(cItem,cIndex) in questionDifficultyTypeList">
                <option :key="cIndex" :label="cItem.Name" :value="cItem.Id">
                </option>
              </template>
            </select>
          </div>
          <div class="col-12">
            <br />
            <span class="difficulty_Degree">所属大类</span>
            <select v-model="ChooseItem.Category" class="selectBox blue-border">
              <template v-for="(cItem,cIndex) in questionCategoryList">
                <option :key="cIndex" :label="cItem.Name" :value="cItem.Id">
                </option>
              </template>
            </select>
          </div>
          <div class="col-12">
            <br />
            <span class="difficulty_Degree">考级程度</span>
            <select v-model="ChooseItem.LevelType" class="selectBox blue-border">
              <template v-for="(cItem,cIndex) in questionLevalTypeList">
                <option :key="cIndex" :label="cItem.Name" :value="cItem.Id">
                </option>
              </template>
            </select>
          </div>
          <div class="col-12" style="margin-top:16px;">
            <span class="difficulty_Degree">知识点: </span>
            <a class="addKnowledge" @click="isShowPoint=true">
              <i class="iconfont icon-add" style="position:relative;top:1px;"></i>选择知识点
            </a>
            <span class="knowledge_List" v-for="(x, i) in choosePointArray" :key="i">
              {{x.PointName}}
              <i class="iconfont icon-shanchu1" @click="removePointTag(i)"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import UeEditor from '../../components/editor/UeEditor'
  //知识点列表
  import questionpoint from '../../components/question/questionpoint'

  import single from '../../components/questiontype/single'
  import multiple from '../../components/questiontype/multiple'
  import fillIn from '../../components/questiontype/fill-in'
  import judge from '../../components/questiontype/judge'
  import shortAnswer from '../../components/questiontype/short-answer'
  import entryProblem from '../../components/questiontype/entry-problem'
  import matching from '../../components/questiontype/matching'
  import sortingProblem from '../../components/questiontype/sorting-problem'
  import cloze from '../../components/questiontype/cloze'
  import readingComprehensio from '../../components/questiontype/reading-comprehensio'
  import sharingChoose from '../../components/questiontype/sharing-choose'

  import {
    GetPaper,
    savePaperInfo,
  } from '../../api/teacher/index';
  import {
    queryQuestionTypeList,
    queryDifficultyType,
    queryQuestionCategory,
    queryQuestionLevelType
  } from '../../api/question/question'
  export default {
    components: {
      UeEditor,
      questionpoint, //知识点
      single, //单选题
      multiple, //多选题
      fillIn, //填空题
      judge, //判断题
      shortAnswer, //简答题
      entryProblem, //分录题
      matching, //连线题
      sortingProblem, //排序题
      cloze, //完型填空
      readingComprehensio, //阅读理解
      sharingChoose, //共用选择题
    },
    meta: {
      title: "考试"
    },
    data() {
      return {
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 80,
        },
        easyList: [{
          Id: 1,
          Name: '难'
        }, {
          Id: 2,
          Name: '中'
        }, {
          Id: 3,
          Name: '易'
        }],
        msg: {
          PaperId: 0
        },
        //试卷对象
        DataObj: {},
        //点击问题对象
        ChooseItem: {},
        questionDifficultyTypeList: [], //难易程度列表
        questionLevalTypeList: [],
        questionCategoryList: [], //分类
        choosePointArray: [], //选择知识点
        firstTypeList: [], //第一类题型
        secondTypeList: [], //第二类题型
      }
    },
    created() {
      if (this.$route.query && this.$route.query.Id) {
        this.msg.PaperId = decodeURI(this.$route.query.Id)
      }
      this.getQuestionType();
      this.getDifficultyType();
      this.getQuestionCategory();
      this.getQuestionLevelType
    },
    mounted() {
      this.GetPaperInfo()
    },
    methods: {
      //获取题型列表
      getQuestionType() {
        queryQuestionTypeList({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (tempArray && tempArray.length > 0) {
              this.firstTypeList = tempArray.slice(0, 5);
              this.secondTypeList = tempArray.slice(5);
            }
          }
        });
      },
      //题型点击
      onItemClick(item) {
        // this.AnswerList = [];
        // this.questionObj = item;
        // this.objOption.QuestionTypeId = item.QId;
        // this.objOption.QuestionTypeKey = item.Key;
        // var obj = CreateQuestion(item.Key);
        // this.AnswerList = obj;
        // if (obj) {
        //   this.objOption.QuestionContent = JSON.stringify(obj);
        // }
      },
      //获取问题大类
      getQuestionCategory() {
        queryQuestionCategory().then(res => {
          this.questionCategoryList = res.Data;
        })
      },
      //获取问题考级程度
      getQuestionLevelType() {
        queryQuestionLevelType().then(res => {
          this.questionLevalTypeList = res.Data;
        })
      },
      //获取问题难易程度列表
      getDifficultyType() {
        queryDifficultyType().then(res => {
          if (res.Code == 1) {
            this.questionDifficultyTypeList = res.Data;
          }
        });
      },
      //获取题目
      GetPaperInfo() {
        GetPaper(this.msg).then(res => {
          if (res.Code == 1) {
            this.DataObj = res.Data;
          }
          console.log("this.DataObj", this.DataObj);
        })
      },
      //点击问题
      ClickItem(questionItem) {
        this.ChooseItem = questionItem;
        console.log("questionItem", questionItem);
      },
      //保存题目
      SavePaper() {
        savePaperInfo(this.DataObj).then(res => {
          console.log("res", res);
        })
      }
    }
  }

</script>
