<template>
  <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">{{objOption.CourseId==0?'新增问题信息':'修改问题信息'}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="text-caption q-mb-lg q-px-md text-grey-6">问题信息</div>
        <div class="row wrap">
          <div class="col-12" v-if="objOption.QuestionId==0">
            题型
            <template v-for="(fItem,fIndex) in firstTypeList">
              <q-btn :key="fIndex" color="primary" :label="fItem.Name" style="margin-left:5px;"
                @click="onItemClick(fItem)" />
            </template>
            <q-btn-dropdown color="primary" 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="col-12" style="color:blue;font-weight:800;">
            {{questionName}}
          </div>
          <br />
          <div class="col-12">
            <template v-if="questionObj.Key=='cloze'">
              选项处用##题号##替换，如##1##
            </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'" :questionData="AnswerList" @getChild="getChildData"></single>
          <!--多选题-->
          <multiple v-if="questionObj.Key=='multiple'" :questionData="AnswerList" @getChild="getChildData"></multiple>
          <!--填空题-->
          <fill-in v-if="questionObj.Key=='fill-in'" :questionData="AnswerList" @getChild="getChildData"
            :setOption="objOption"></fill-in>
          <!--判断题-->
          <judge v-if="questionObj.Key=='judge'" :questionData="AnswerList" @getChild="getChildData"></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>
          <!--分录题、资料题-->
          <entry-problem v-if="questionObj.Key=='entry-problem'|| questionObj.Key=='data-question'"
            :questionData="AnswerList" @getChild="getChildData">
          </entry-problem>
          <!--连线题-->
          <matching v-if="questionObj.Key=='matching'" :questionData="AnswerList" @getChild="getChildData"></matching>
          <!--排序题-->
          <sorting-problem v-if="questionObj.Key=='sorting-problem'" :questionData="AnswerList"
            @getChild="getChildData"></sorting-problem>
          <!--完型填空-->
          <cloze v-if="questionObj.Key=='cloze'" :questionData="AnswerList" @getChild="getChildData"></cloze>
          <!--阅读理解、听力题-->
          <reading-comprehensio v-if="questionObj.Key=='reading-comprehensio'||questionObj.Key=='listening'"
            :questionData="AnswerList" @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">
            答案解析<UeEditor v-model="objOption.AnswerParse" :config="config" ref="AnswerParse"></UeEditor>
          </div>
          <br />
          <div class="col-12">
            <br />
            <q-select filled stack-label option-value="Id" option-label="Name" v-model="objOption.DifficultyType"
              ref="DifficultyType" :options="questionDifficultyTypeList" label="难易程度" :dense="false"
              class="col-6 q-pr-lg q-pb-lg" emit-value map-options />
          </div>
          <div class="col-12">
            知识点: <a style="cursor:pointer;color:blue;" @click="isShowPoint=true">选择知识点</a>
            <div class="col">
              <q-chip v-for="(x, i) in choosePointArray" @remove="removePointTag(i)" :key="i" square color="red"
                class="q-ma-none q-mr-md" icon="bookmark" text-color="white" :label="x.PointName" removable />
            </div>
          </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
  } from '../../api/question/question'
  import {
    CreateQuestion, //生成问题
  } 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 entryProblem from '../questiontype/entry-problem'
  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, //简答题
      entryProblem, //分录题
      matching, //连线题
      sortingProblem, //排序题
      cloze, //完型填空
      readingComprehensio, //阅读理解
      sharingChoose, //共用选择题
    },
    props: {
      setingObj: {
        type: Object,
        default: null
      },
      CourseId: {
        type: String,
        default: "0",
      }
    },
    data() {
      return {
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 80,
        },
        persistent: true,
        objOption: {
          QuestionId: 0, //问题编号
          CourseId: 0, //课程编号
          Title: "", //问题名称
          DifficultyType: 1, //难易程度
          AnswerParse: "", //答案解析JSON
          QuestionTypeId: 0, //问题类型
          QuestionTypeKey: "", //问题类型Key
          Knowledge: "", //知识点编号
          IsUpdateJobExam: 0, //是否同步修改引用此题目的作业和考试(1-是)
          SortNum: 0, //排序
          Answer: "", //问题JSON
          IsMutex: 0, //填空题(答案顺序打乱也判正确)
        },
        AnswerList: [],
        optionTitle: "",
        questionObj: {}, //题目类型对象
        firstTypeList: [], //前5个数组
        secondTypeList: [], //后面的题型
        questionDifficultyTypeList: [], //问题难易程度列表
        saveCourseLoading: false,
        isShowPoint: false, //是否显示知识点弹窗
        choosePointArray: [], //知识点列表
      }
    },
    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();
    },
    mounted() {
      this.initObj()
    },
    methods: {
      //移除知识点
      removePointTag(index) {
        this.choosePointArray.splice(index, 1);
      },
      //获取知识点列表
      getPointList(obj) {
        if (obj && obj.length > 0) {
          if (this.choosePointArray && this.choosePointArray.length > 0) {
            this.choosePointArray.concat(obj);
          } else {
            this.choosePointArray = obj;
          }
        }
      },
      //关闭知识点弹窗
      closeQuestionPoint() {
        this.isShowPoint = false;
      },
      //获取子组件内容
      getChildData(obj) {
        if (obj) {
          this.objOption.Answer = 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;
      },
      //获取题型列表
      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;
        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.AnswerList = res.Data.AnswerObj;
            this.questionObj.Key = res.Data.QuestionTypeKey;
            this.questionObj.QId = res.Data.QuestionTypeId;
            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;
        }
      },
      //关闭弹窗
      closeCourseForm() {
        this.$emit('close')
        this.persistent = false
      },
      //保存问题
      setQuestion() {
        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;
        console.log("setQuestion", this.objOption);
        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
        })
      }
    },
  }

</script>
