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

  .difficulty_Degree {
    display: inline-block;
    width: 70px;
    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;
  }

</style>
<template>
  <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
    <q-card style="width: 1400px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">{{objOption.QuestionId==0?'新增问题信息':'修改问题信息'}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="row wrap">
          <div class="col-12" v-if="objOption.QuestionId==0" 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">
            {{questionName}}
          </div>
          <div class="col-12">
            <template v-if="questionObj.Key=='cloze'">
              <span class="question_number">选项处用##题号##替换，如##1##</span>
            </template>
            <UeEditor v-if="questionObj.Key!='sharing-choose'" v-model="objOption.Title" :config="config"
              ref="UE_Title"></UeEditor>
          </div>
          <br />
          <!--单选题-->
          <single v-if="questionObj.Key=='single'||questionObj.Key=='single-number'" :questionData="AnswerList"
            @getChild="getChildData" :setOption="objOption"></single>
          <!--多选题-->
          <multiple v-if="questionObj.Key=='multiple'" :questionData="AnswerList" @getChild="getChildData"
            :setOption="objOption"></multiple>
          <!--填空题、分录题、资料题-->
          <fill-in
            v-if="questionObj.Key=='fill-in'||questionObj.Key=='entry-problem'|| questionObj.Key=='data-question'"
            :questionData="AnswerList" @getChild="getChildData" :setOption="objOption"></fill-in>
          <!--判断题-->
          <judge v-if="questionObj.Key=='judge'" :questionData="AnswerList" @getChild="getChildData"
            :setOption="objOption"></judge>
          <!--简答题、名词解释、论述题、计算题、口语题、其它-->
          <short-answer v-if="questionObj.Key=='short-answer'||questionObj.Key=='noun-explanation'||questionObj.Key=='essay-question'
            ||questionObj.Key=='calculation' || questionObj.Key=='spoken'|| questionObj.Key=='other'
            " :setOption="objOption"> </short-answer>
          <!--连线题-->
          <matching v-if="questionObj.Key=='matching'" :questionData="AnswerList" :setOption="objOption"
            @getChild="getChildData"></matching>
          <!--排序题-->
          <sorting-problem v-if="questionObj.Key=='sorting-problem'" :questionData="AnswerList" :setOption="objOption"
            @getChild="getChildData"></sorting-problem>
          <!--完型填空-->
          <cloze v-if="questionObj.Key=='cloze'" :questionData="AnswerList" :setOption="objOption"
            @getChild="getChildData"></cloze>
          <!--阅读理解、听力题-->
          <reading-comprehensio v-if="questionObj.Key=='reading-comprehensio'||questionObj.Key=='listening'"
            :questionData="AnswerList" :setOption="objOption" @getChild="getChildData"></reading-comprehensio>
          <!--共用选择题-->
          <sharing-choose v-if="questionObj.Key=='sharing-choose'" :questionData="AnswerList" @getChild="getChildData"
            :setOption="objOption">
          </sharing-choose>
          <br />
          <div class="col-12">
            <div style="margin:20px 0;">答案解析</div>
            <UeEditor v-model="objOption.AnswerParse" :config="config" ref="AnswerParse"></UeEditor>
          </div>
          <br />
          <div class="col-12">
            <br />
            <span class="difficulty_Degree">难度</span>
            <select v-model="objOption.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="objOption.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="objOption.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>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeCourseForm" />
        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveCourseLoading"
          @click="setQuestion" />
      </q-card-actions>
    </q-card>
    <!--选择知识点-->
    <questionpoint v-if="isShowPoint" :CourseId="CourseId" :openDialog="isShowPoint" @closed="closeQuestionPoint"
      :multiple="true" @selected="getPointList">
    </questionpoint>
  </q-dialog>
</template>

<script>
  import {
    queryQuestionTypeList,
    queryDifficultyType,
    saveQuestion,
    queryQuestionInfo,
    queryQuestionCategory,
    queryQuestionLevelType
  } from '../../api/question/question'
  import {
    CreateQuestion, //生成问题
    questionBankChooseValidate, //【单选题、多选题、数字选择题】验证
    questionBankFillInValidate, //【填空题、分录题、资料题】验证
    questionBankJudgeValidate, //【判断题】验证
    questionBankShortanswerValidate, //【简答题、名词解释、论述题、计算题、其它题】验证
    questionBankMatchingValidate, //【连线题】验证
    questionBankSortingproblemValidate, //【排序题】验证
    questionBankClozeValidate, //【完型填空】验证 
    questionBankReadingcomprehensioValidate, //【阅读理解、听力题】验证
    questionBankSharingchooseValidate, //【公用选项题】验证
  } from '../../api/question/questionconfig'
  import UeEditor from '../editor/UeEditor'
  //知识点列表
  import questionpoint from './questionpoint'

  import single from '../questiontype/single'
  import multiple from '../questiontype/multiple'
  import fillIn from '../questiontype/fill-in'
  import judge from '../questiontype/judge'
  import shortAnswer from '../questiontype/short-answer'
  import matching from '../questiontype/matching'
  import sortingProblem from '../questiontype/sorting-problem'
  import cloze from '../questiontype/cloze'
  import readingComprehensio from '../questiontype/reading-comprehensio'
  import sharingChoose from '../questiontype/sharing-choose'
  export default {
    components: {
      UeEditor,
      questionpoint, //知识点
      single, //单选题
      multiple, //多选题
      fillIn, //填空题
      judge, //判断题
      shortAnswer, //简答题
      matching, //连线题
      sortingProblem, //排序题
      cloze, //完型填空
      readingComprehensio, //阅读理解
      sharingChoose, //共用选择题
    },
    props: {
      setingObj: {
        type: Object,
        default: null
      },
      CourseId: {
        type: Number, //课程编号
        default: 0,
      },
      BankId: {
        type: String, //题库编号
        default: "0",
      }
    },
    data() {
      return {
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 80,
        },
        persistent: true,
        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, //考级程度
        },
        AnswerList: [],
        optionTitle: "",
        questionObj: {}, //题目类型对象
        firstTypeList: [], //前5个数组
        secondTypeList: [], //后面的题型
        questionDifficultyTypeList: [], //问题难易程度列表
        saveCourseLoading: false,
        isShowPoint: false, //是否显示知识点弹窗
        choosePointArray: [], //知识点列表
        questionCategoryList: [], //问题大类
        questionLevalTypeList: [],
      }
    },
    computed: {
      questionName: {
        get() {
          var str = "";
          var sumData = [];
          sumData = sumData.concat(this.firstTypeList).concat(this.secondTypeList);
          if (sumData && sumData.length > 0) {
            sumData.forEach(item => {
              if (item.Key == this.objOption.QuestionTypeKey) {
                str = item.Name;
              }
            })
          }
          return str;
        },
      },
    },
    created() {
      this.getQuestionType();
      this.getDifficultyType();
      this.getQuestionCategory();
      this.getQuestionLevelType();
    },
    mounted() {
      this.initObj()
    },
    methods: {
      //获取问题大类
      getQuestionCategory() {
        queryQuestionCategory().then(res => {
          this.questionCategoryList = res.Data;
        })
      },
      //获取问题考级程度
      getQuestionLevelType() {
        queryQuestionLevelType().then(res => {
          this.questionLevalTypeList = res.Data;
        })
      },
      //移除知识点
      removePointTag(index) {
        this.choosePointArray.splice(index, 1);
      },
      //获取知识点列表
      getPointList(obj) {
        if (obj && obj.length > 0) {
          if (this.choosePointArray && this.choosePointArray.length > 0) {
            this.choosePointArray = this.choosePointArray.concat(obj);
          } else {
            this.choosePointArray = obj;
          }
        }
      },
      //关闭知识点弹窗
      closeQuestionPoint() {
        this.isShowPoint = false;
      },
      //获取子组件内容
      getChildData(obj) {
        if (obj) {
          this.objOption.QuestionContent = JSON.stringify(obj);
        }
      },
      //题型点击
      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);
        }
      },
      //获取题型列表
      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);
            }
          }
        });
      },
      //获取问题难易程度列表
      getDifficultyType() {
        queryDifficultyType().then(res => {
          if (res.Code == 1) {
            this.questionDifficultyTypeList = res.Data;
          }
        });
      },
      //初始化表单
      initObj() {
        this.objOption.CourseId = this.CourseId;
        this.objOption.BankId = this.BankId;
        if (this.setingObj && this.setingObj.QuestionId > 0) {
          queryQuestionInfo({
            QuestionId: this.setingObj.QuestionId
          }).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.questionObj.Key = res.Data.QuestionTypeKey;
            this.questionObj.QId = res.Data.QuestionTypeId;
            this.objOption.Category = res.Data.Category;
            this.objOption.LevelType = res.Data.LevelType;
            if (res.Data.QuestionContentObj) {
              this.AnswerList = res.Data.QuestionContentObj;
              this.objOption.QuestionContent = JSON.stringify(res.Data.QuestionContentObj);
            } else {
              this.onItemClick(this.questionObj);
            }
            if (res.Data.QuestionPointList && res.Data.QuestionPointList.length > 0) {
              this.choosePointArray = res.Data.QuestionPointList;
            }
          })
          this.optionTitle = "修改问题信息"
        } else {
          this.optionTitle = "新增问题"
          this.objOption.QuestionId = 0;
          this.objOption.Title = '';
          this.objOption.DifficultyType = 1;
          this.objOption.AnswerParse = "";
          this.objOption.QuestionTypeId = 0;
          this.objOption.QuestionTypeKey = '';
          this.objOption.Knowledge = '';
          this.objOption.IsUpdateJobExam = 0;
          this.objOption.SortNum = 0;
          this.objOption.Answer = '';
          this.objOption.IsMutex = 0;
          this.objOption.Category = 0;
          this.objOption.LevelType = 0;
        }
      },
      //关闭弹窗
      closeCourseForm() {
        this.$emit('close')
        this.persistent = false
      },
      //保存问题
      setQuestion() {
        //验证方法
        if (this.validateType()) {
          var pointIds = "";
          if (this.choosePointArray && this.choosePointArray.length > 0) {
            this.choosePointArray.forEach(item => {
              pointIds += ',' + item.PointId
            });
          }
          if (pointIds != '') {
            pointIds = pointIds.substring(1);
          }
          this.objOption.Knowledge = pointIds;
          this.saveCourseLoading = true;
          saveQuestion(this.objOption).then(res => {
            this.saveCourseLoading = false
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            this.$emit("success")
            this.closeSaveForm()
          }).catch(() => {
            this.saveCourseLoading = false
          })
        }
      },
      //验证
      validateType() {
        var result = true;
        var newKey = this.objOption.QuestionTypeKey;
        var gName = this.questionName;
        var detailsList = this.AnswerList;
        var retMessage = "";
        switch (newKey) {
          //单选题
          case "single":
            retMessage = questionBankChooseValidate(gName, detailsList, this.objOption);
            break;
            //多选题
          case 'multiple':
            retMessage = questionBankChooseValidate(gName, detailsList, this.objOption);
            break;
            //填空题
          case "fill-in":
            retMessage = questionBankFillInValidate(gName, detailsList, this.objOption);
            break;
            //判断题
          case "judge":
            retMessage = questionBankJudgeValidate(gName, this.objOption);
            break;
            //简答题
          case "short-answer":
            retMessage = questionBankShortanswerValidate(gName, this.objOption);
            break;
            //名词解释
          case "noun-explanation":
            retMessage = questionBankShortanswerValidate(gName, this.objOption);
            break;
            //论述题
          case "essay-question":
            retMessage = questionBankShortanswerValidate(gName, this.objOption);
            break;
            //计算题
          case "calculation":
            retMessage = questionBankShortanswerValidate(gName, this.objOption);
            break;
            //分录题
          case "entry-problem":
            retMessage = questionBankFillInValidate(gName, detailsList, this.objOption);
            break;
            //资料题
          case "data-question":
            retMessage = questionBankFillInValidate(gName, detailsList, this.objOption);
            break;
            //连线题
          case "matching":
            retMessage = questionBankMatchingValidate(gName, detailsList, this.objOption);
            break;
            //排序题
          case "sorting-problem":
            retMessage = questionBankSortingproblemValidate(gName, detailsList, this.objOption);
            break;
            //完型填空
          case "cloze":
            retMessage = questionBankClozeValidate(gName, detailsList, this.objOption);
            break;
            //阅读理解
          case "reading-comprehensio":
            retMessage = questionBankReadingcomprehensioValidate(gName, detailsList, this.objOption);
            break;
            //口语题
          case "spoken":
            retMessage = questionBankShortanswerValidate(gName, this.objOption);
            break;
            //听力题
          case "listening":
            retMessage = questionBankReadingcomprehensioValidate(gName, detailsList, this.objOption);
            break;
            //公用选项题
          case "sharing-choose":
            retMessage = questionBankSharingchooseValidate(gName, detailsList);
            break;
            //其它题
          case "other":
            retMessage = questionBankShortanswerValidate(gName, this.objOption);
            break;
            //单选题-数字
          case "single-number":
            retMessage = questionBankChooseValidate(gName, detailsList, this.objOption);
            break;
        }
        if (retMessage != '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: retMessage
          });
          result = false;
          return;
        }
        return result;
      },
    },
  }

</script>
