<style>
  .edit_stem {
    font-size: 14px;
    color: #A8A8B3;
    line-height: 34px;
    overflow: hidden;
    padding: 4px 0;
    cursor: default;
  }

  .difficulty_Degree {
    display: inline-block;
    width: 60px;
    height: 26px;
    line-height: 26px;
    color: #181E33;
    font-size: 13px;
  }

  .selectBox {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    position: relative;
    cursor: pointer;
    width: 75px;
    line-height: 24px;
    height: 24px;
    background: #FFFFFF;
    border: 1px solid #E1E1E5;
    border-radius: 4px;
    font-size: 12px;
    color: #181E33;
  }

  .blue-border {
    border: 1px solid #FFFFFF;
    box-shadow: 0 0 7px 1px #75BAFF;
    outline: none;
  }

  .addKnowledge {
    display: inline-block;
    width: 98px;
    height: 28px;
    border-radius: 4px;
    border: 1px dashed #E1EAF4;
    text-align: center;
    line-height: 28px;
    color: #91A0B5;
    margin-right: 12px;
    margin-bottom: 8px;
    color: #CAD5E6;
    cursor: pointer;
    font-size: 12px;
    line-height: 24px;
  }

  .addKnowledge:hover {
    opacity: 0.7;
  }

  .knowledge_List {
    display: inline-block;
    padding: 0 14px;
    height: 28px;
    border-radius: 4px;
    border: 1px dashed #E1EAF4;
    text-align: center;
    line-height: 28px;
    color: #91A0B5;
    margin-right: 12px;
    margin-bottom: 8px;
    position: relative;
    cursor: pointer;
  }

  .knowledge_List:hover {
    color: rgba(139, 146, 166, 0.7);
  }

  .knowledge_List:hover i {
    display: block !important;
  }

  .knowledge_List i {
    position: absolute;
    font-size: 15px;
    display: none;
    right: -8px;
    top: -10px;
  }

  .question_number {
    color: #A8A8B3;
    font-size: 12px;
    margin-top: -8px;
    padding-bottom: 12px;
    display: inline-block;
  }

  .questionMain {
    width: 1200px;
    margin: 20px auto;
    padding: 25px;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0px 2px 10px 0px rgba(237, 238, 240, 0.5);
  }

  .qussTionTitDiv img {
    width: 100%;
  }

</style>
<template>
  <div class="questionMain">
    <q-card-section class="q-pt-none scroll">
      <div class="row wrap">
        <div class="col-12 edit_stem">
          {{objOption.QuestionTypeName}}
        </div>
        <div class="col-12 qussTionTitDiv">
          <div v-html="objOption.Title" @click="clickQuestion($event)"></div>
        </div>
        <!--单选题-->
        <v-single v-if="objOption.QuestionTypeKey=='single'||objOption.QuestionTypeKey=='single-number'" :questionObj="objOption"
          :isShowAnswer="isShowAnswer"></v-single>
        <!--多选题-->
        <v-multiple v-if="objOption.QuestionTypeKey=='multiple'" :questionObj="objOption" :isShowAnswer="isShowAnswer"></v-multiple>
        <!--填空题、分录题、资料题-->
        <v-fillin v-if="objOption.QuestionTypeKey=='fill-in'||objOption.QuestionTypeKey=='entry-problem'|| objOption.QuestionTypeKey=='data-question'" :questionObj="objOption" :isShowAnswer="isShowAnswer"></v-fillin>
        <!--判断题-->
        <v-judge v-if="objOption.QuestionTypeKey=='judge'" :questionObj="objOption" :isShowAnswer="isShowAnswer"></v-judge>
        <!--简答题、名词解释、论述题、计算题、口语题、其它-->
        <v-shortanswer v-if="objOption.QuestionTypeKey=='short-answer'||objOption.QuestionTypeKey=='noun-explanation'||objOption.QuestionTypeKey=='essay-question'
            ||objOption.QuestionTypeKey=='calculation' || objOption.QuestionTypeKey=='spoken'|| objOption.QuestionTypeKey=='other'
            " :questionObj="objOption" :isShowAnswer="isShowAnswer"> </v-shortanswer>
        <!--连线题-->
        <v-matching v-if="objOption.QuestionTypeKey=='matching'" :questionObj="objOption" :isShowAnswer="isShowAnswer"></v-matching>
        <!--排序题-->
        <v-sortingproblem v-if="objOption.QuestionTypeKey=='sorting-problem'" :questionObj="objOption" :isShowAnswer="isShowAnswer">
        </v-sortingproblem>
        <!--完型填空-->
        <v-cloze v-if="objOption.QuestionTypeKey=='cloze'" :questionObj="objOption" :isShowAnswer="isShowAnswer"></v-cloze>
        <!--阅读理解、听力题-->
        <v-readingcomprehensio
          v-if="objOption.QuestionTypeKey=='reading-comprehensio'||objOption.QuestionTypeKey=='listening'"
          :questionObj="objOption" :isShowAnswer="isShowAnswer"></v-readingcomprehensio>
        <!--共用选择题-->
        <v-sharingchoose v-if="objOption.QuestionTypeKey=='sharing-choose'" :questionObj="objOption" :isShowAnswer="isShowAnswer">
        </v-sharingchoose>
        <br />
        <div class="col-4">
          <br />
          <span class="difficulty_Degree">难度: </span>
          <span>{{objOption.DifficultyTypeStr}}</span>
        </div>
        <div class="col-4">
          <br />
          <span class="difficulty_Degree">所属大类: </span>
          {{objOption.CategoryName}}
        </div>
        <div class="col-4">
          <br />
          <span class="difficulty_Degree">考级程度: </span>
          {{objOption.LevelTypeName}}
        </div>
        <div class="col-12" style="margin-top:16px;">
          <span class="difficulty_Degree">知识点: </span>
          <span class="knowledge_List" style="cursor:default;" v-for="(x, i) in choosePointArray" :key="i">
            {{x.PointName}}
          </span>
        </div>
      </div>
    </q-card-section>
  </div>
</template>

<script>
  import {
    queryQuestionInfo,
  } from '../../api/question/question'

  import vSingle from '../../components/questiontype/v-single'
  import vMultiple from '../../components/questiontype/v-multiple'
  import vFillin from '../../components/questiontype/v-fillin'
  import vJudge from '../../components/questiontype/v-judge'
  import vShortanswer from '../../components/questiontype/v-shortanswer'
  import vMatching from '../../components/questiontype/v-matching'
  import vSortingproblem from '../../components/questiontype/v-sortingproblem'
  import vCloze from '../../components/questiontype/v-cloze'
  import vReadingcomprehensio from '../../components/questiontype/v-readingcomprehensio'
  import vSharingchoose from '../../components/questiontype/v-sharingchoose'
  export default {
    components: {
      vSingle, //单选题
      vMultiple, //多选题
      vFillin, //填空题
      vJudge, //判断题
      vShortanswer, //简答题
      vMatching, //连线题
      vSortingproblem, //排序题
      vCloze, //完型填空
      vReadingcomprehensio, //阅读理解
      vSharingchoose, //共用选择题
    },
    props: {
      setingObj: {
        type: Object,
        default: null
      },
      CourseId: {
        type: Number, //课程编号
        default: 0,
      },
      BankId: {
        type: String, //题库编号
        default: "0",
      }
    },
    data() {
      return {
        objOption: {
          QuestionId: 0, //问题编号
          CourseId: 0, //课程编号
          BankId: 0, //题库编号
          Title: "", //问题名称
          DifficultyType: 1, //难易程度
          AnswerParse: "", //答案解析JSON
          QuestionTypeId: 0, //问题类型
          QuestionTypeKey: "", //问题类型Key
          Knowledge: "", //知识点编号
          IsUpdateJobExam: 0, //是否同步修改引用此题目的作业和考试(1-是)
          SortNum: 0, //排序
          Answer: "", //问题JSON
          IsMutex: 0, //填空题(答案顺序打乱也判正确)
          Category: 0, //大类
          LevelType: 0, //考级程度
          QuestionTypeName: "", //题目类型
          CategoryName: "", //分类
          DifficultyTypeStr: "", //难易程度
          LevelTypeName: "", //考级程度
          QuestionContentObj: [], //选项列表
          QuestionAnswerList:[],//阅读理解、听力、完型，答案列表
        },
        isShowAnswer: true, //显示答案
        choosePointArray: [], //知识点列表
      }
    },
    mounted() {
      this.initObj()
    },
    methods: {
      //初始化表单
      initObj() {
        var qId = 0;
        if (this.$route.query.QuestionId) {
          qId = this.$route.query.QuestionId;
        }
        queryQuestionInfo({
          QuestionId: qId,
          isReplaceClozeTitle: 1
        }).then(res => {
          this.objOption.QuestionId = res.Data.QuestionId;
          this.objOption.Title = res.Data.Title;
          this.objOption.DifficultyType = res.Data.DifficultyType;
          this.objOption.AnswerParse = res.Data.AnswerParse;
          this.objOption.QuestionTypeId = res.Data.QuestionTypeId;
          this.objOption.QuestionTypeKey = res.Data.QuestionTypeKey;
          this.objOption.Knowledge = res.Data.Knowledge;
          this.objOption.IsUpdateJobExam = res.Data.IsUpdateJobExam;
          this.objOption.SortNum = res.Data.SortNum;
          this.objOption.Answer = res.Data.Answer;
          this.objOption.IsMutex = res.Data.IsMutex;
          this.objOption.Category = res.Data.Category;
          this.objOption.LevelType = res.Data.LevelType;
          this.objOption.QuestionTypeName = res.Data.QuestionTypeName;
          this.objOption.CategoryName = res.Data.CategoryName;
          this.objOption.DifficultyTypeStr = res.Data.DifficultyTypeStr;
          this.objOption.LevelTypeName = res.Data.LevelTypeName;
          if (res.Data.QuestionContentObj) {
            this.objOption.QuestionContentObj = res.Data.QuestionContentObj;
          }
          if (res.Data.QuestionAnswerList) {
            this.objOption.QuestionAnswerList = res.Data.QuestionAnswerList;
          }
          if (res.Data.QuestionPointList && res.Data.QuestionPointList.length > 0) {
            this.choosePointArray = res.Data.QuestionPointList;
          }
        })
      },
      //标题点击事件
      clickQuestion(e) {
        if ((e.target.nodeName == 'SPAN' || e.target.nodeName == 'P' || e.target.nodeName == 'IMG') && event.target
          .className == 'attachNew') {
          var url = e.target.getAttribute("accesskey");
          if (url && url != '') {
            window.open(url)
          }
        }
      }
    }
  }

</script>
