<!--阅读理解-->
<style>
  .readingComprehensioQuestion{
    width:100%;
  }
  .edui-editor-toolbarbox{
    text-align: left;
  }
  .readingComprehensioQuestion .clozeTest_question_tit {
    width: 100%;
    height: 40px;
    background: #F7F8FA;
    padding: 0 20px;
    line-height: 40px;
    font-size: 14px;
    color: #646873;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .clozeTest_question_tit i {
    color: #acbfd9;
    cursor: pointer;
  }
</style>
<template>
  <div class="readingComprehensioQuestion">
    <template v-if="data&&data.length>0" v-for="(item,index) in data">
      <table class="common_TiTable">
        <thead>
          <tr>
            <th colspan="3" style="text-align:left;">
              <div class="clozeTest_question_tit" @click="showNav(index)">
                <div>
                  <i class="iconfont icon-arrowdown2" v-if="(commonIndex==index)&&!isShow"></i>
                  <i class="iconfont icon-arrowright" v-else></i>
                  第{{index+1}}小题<span style="color:#A8A8B3;">({{item.QuestionName}})</span>
                </div>
                <div>
                  <i class="iconfont icon-img_delete_small" @click.stop="deleteQuestion(index)"></i>
                </div>
              </div>
            </th>
          </tr>
          <!-- <tr>
            <th colspan="3">
              <UeEditor v-model="item.SubTitle" :config="config"></UeEditor>
            </th>
          </tr> -->
        </thead>
        <tbody v-if="(commonIndex==index)&&!isShow">
          <tr>
            <td colspan="3">
              <UeEditor v-model="item.SubTitle" :config="config"></UeEditor>
            </td>
          </tr>
          <!--选择题-->
          <template v-if="item.QuestionKey=='single' ||item.QuestionKey=='multiple'|| item.QuestionKey=='single-number'">
            <tr v-for="(subItem,subIndex) in item.SubAnwser">
              <td style="width:40px;text-align:center;">
                <template v-if="item.QuestionKey=='single'||item.QuestionKey=='multiple'|| item.QuestionKey=='single-number'">
                  <div class="Answer_List" @click="ChangeItem(item,subItem)" :class="{'Is_Answer':subItem.IsAnswer}">
                    {{subItem.Name}}
                  </div>
                </template>
                <template v-else-if="item.QuestionKey=='multiple'">
                   <div class="Answer_List" @click="changeMutile(subItem)" :class="{'Is_Answer':subItem.IsAnswer}">
                     {{subItem.Name}}
                   </div>
                </template>
              </td>
              <td>
                <div class="InpDIV" v-html="subItem.Content" v-if="childIndex!=subIndex"
                @click="changeEdit(subIndex)"></div>
                <UeEditor v-model="subItem.Content" :config="config" v-else></UeEditor>
              </td>
              <td style="width:40px;text-align:center;">
                <i class="iconfont icon-guanbi Tiku_DelIcon" @click="deleteOpion(item,subIndex)"></i>
              </td>
            </tr>
          </template>
          <!--填空题-->
          <template v-if="item.QuestionKey=='fill-in'">
            <tr v-for="(subItem,subIndex) in item.SubAnwser">
              <td style="width:50px;text-align:center;padding-top:8px;">
                第{{subIndex+1}}空
              </td>
              <td>
                <div class="InpDIV" v-html="subItem.Content" v-if="childIndex!=subIndex"
                @click="changeEdit(subIndex)"></div>
                <UeEditor v-model="subItem.Content" :config="config" v-else></UeEditor>
              </td>
              <td style="width:30px;text-align:center;">
                <i class="iconfont icon-guanbi Tiku_DelIcon" @click="deleteOpion(item,subIndex)"></i>
              </td>
            </tr>
          </template>
          <!--判断题-->
          <template v-if="item.QuestionKey=='judge'">
            <tr v-for="(subItem,subIndex) in item.SubAnwser">
              <td style="width:50px;">
                <div class="Answer_List" @click="ChangeItem(item,subItem)" :class="{'Is_Answer':subItem.IsAnswer}">
                  {{subItem.Name}}
                </div>
              </td>
              <td colspan="2" style="text-align:left;vertical-align:middle;">
                {{subItem.Content}}
              </td>
            </tr>
          </template>
          <!--简答题-->
          <template v-if="item.QuestionKey=='short-answer'">
            <tr v-for="(subItem,subIndex) in item.SubAnwser">
              <td colspan="3">
                <UeEditor v-model="subItem.Content" :config="config"></UeEditor>
              </td>
            </tr>
          </template>
        </tbody>
        <tfoot v-if="item.QuestionKey=='single' ||item.QuestionKey=='multiple'||item.QuestionKey=='fill-in'">
          <tr>
            <td colspan="3">
              <!--选择题-->
              <template v-if="item.QuestionKey=='single' ||item.QuestionKey=='multiple'">
                <a class="addTiMuList" @click="addOption(item)">
                  <i class="iconfont icon-add"></i>添加选项
                </a>
              </template>
              <!--填空题-->
              <template v-if="item.QuestionKey=='fill-in'">
                <a class="addTiMuList" @click="addFillIn(item)">
                  <i class="iconfont icon-add"></i>添加更多
                </a>
              </template>
              &nbsp;
            </td>
          </tr>
        </tfoot>
      </table>
    </template>
    <br />
    <q-btn-dropdown color="primary" label="添加小题" style="margin:0 0 20px 5px;">
      <q-list>
        <q-item v-for="(fItem,fIndex) in firstTypeList" @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>
</template>
<script>
  import {
    getOptionList, //获取选择标签【A,B,C,D....】
    optionListConfig,
    CreateQuestion
  } from '../../api/question/questionconfig'
  import {
    queryQuestionTypeList,
  } from '../../api/question/question'
  import UeEditor from '../editor/UeEditor'
  export default {
    props: {
      questionData: {
        type: Array,
      }
    },
    components: {
      UeEditor
    },
    data() {
      return {
        data: this.questionData,
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 80,
        },
        optionTitleList: [],
        firstTypeList: [], //问题类型
        commonIndex:-1,
        isShow:true,
        commonIndex2:-2,
        childIndex: -1,
      };
    },
    created() {
      this.initConfig();
      this.getQuestionType();
    },
    methods: {
      //获取题型列表
      getQuestionType() {
        queryQuestionTypeList({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (tempArray && tempArray.length > 0) {
              this.firstTypeList = tempArray.slice(0, 5);
            }
          }
        });
      },
      initConfig() {
        this.optionTitleList = getOptionList();
      },
      //删除小题
      deleteQuestion(index) {
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          this.data.splice(index, 1);
        }).onCancel(() => {

        });
      },
      //添加小题
      onItemClick(item) {
        var qObj = {
          QuestionType: item.QId,
          QuestionKey: item.Key,
          QuestionName: item.Name,
          SubTitle: "", //题目内容
          SubAnwser: ""
        };
        if (item.Key == "short-answer") {
          qObj.SubAnwser = [];
          qObj.SubAnwser.push({
            Content: ""
          })
        } else {
          qObj.SubAnwser = CreateQuestion(item.Key);
        }
        this.data.push(qObj);
      },
      //删除选项
      deleteOpion(item, index) {
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          item.SubAnwser.splice(index, 1);
          this.childIndex=-1;
          this.calcOptionTitle();
        }).onCancel(() => {

        });
      },
      //新增选项
      addOption(item) {
        if (item.SubAnwser.length < 7) {
          item.SubAnwser.push({
            Name: "",
            Content: "",
            IsAnswer: false
          });
          this.calcOptionTitle();
        } else {
          this.$q.notify({
            type: 'warning',
            position: 'center',
            timeout: 1500,
            message: `最多只能添加7个选项`
          })
          return
        }
      },
      //添加填空
      addFillIn(item) {
        item.SubAnwser.push({
          Content: "",
        });
      },
      //添加小题
      addQuestion() {
        this.data.push(optionListConfig());
      },
      //重新计算选择Title[A,B,C,D....]
      calcOptionTitle() {
        if (this.data && this.data.length > 0) {
          this.data.forEach((item, index) => {
            if (item.QuestionKey == "single" || item.QuestionKey == "multiple")
              item.SubAnwser.forEach((subItem, subIndex) => {
                subItem.Name = this.optionTitleList[subIndex];
              })
          })
        }
      },
      //返回数据到父组件
      returnDataToParent() {
        this.$emit('getChild', this.data);
      },
      //单选
      ChangeItem(item, subItem) {
        if (item.SubAnwser && item.SubAnwser.length > 0) {
          item.SubAnwser.forEach(childItem => {
            childItem.IsAnswer = false;
          })
        }
        subItem.IsAnswer = true;
      },
       //多选题
      changeMutile(subItem){
        subItem.IsAnswer = !subItem.IsAnswer;
      },
      //点击切换输入
      changeEdit(index){
        this.childIndex=index;
      },
      // //点击展开收起
      showNav(index) {
        if(this.commonIndex2==index){
          this.commonIndex=index;
          this.isShow=!this.isShow;
        }else{
          this.commonIndex=index;
          this.isShow=false;
          this.commonIndex2=index;
        }
      },
    },
    mounted() {

    },
    watch: {
      data: {
        handler(newValue) {
          this.returnDataToParent();
        },
        deep: true
      },
    }
  };

</script>
