<!--完型填空-->
<style>
  .clozeQuestion {
    width: 100%;
  }

  .clozeQuestion .question_Title {
    color: #A8A8B3;
    font-size: 12px;
    margin-top: 20px;
  }

  .clozeQuestion .clozeTest_question_tit {
    width: 100%;
    background: #F7F8FA;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #646873;
  }

  .clozeQuestion .add_LiteBtn {
    width: 100px;
    height: 30px;
    display: inline-block;
    box-shadow: 0 3px 12px 0 rgba(39, 125, 255, 0.30);
    color: #FFFFFF;
    text-align: center;
    line-height: 30px;
    border-radius: 20px;
    cursor: pointer;
    background-color: #2961fe;
    margin-bottom: 20px;
  }

  .clozeQuestion .add_LiteBtn:hover {
    opacity: 0.8;
  }

  .clozeQuestion .tdFirst {
    width: 40px;
    text-align: center;
  }

  .clozeQuestion .clozeSubTitle {
    cursor: pointer;
    padding-left: 10px;
  }

  .clozeQuestion .clozeSubScore {
    width: 120px;
    margin-left: 5px;
  }

</style>
<template>
  <div class="clozeQuestion">
    <div class="question_Title">小题数：{{data.length}}</div>
    <template v-if="data&&data.length>0">
      <table class="common_TiTable" v-for="(item,index) in data" :key="index">
        <thead>
          <tr class="clozeTest_question_tit">
            <th colspan="2" style="text-align:left;">
              <span @click="showNav(index)" class="clozeSubTitle">
                <i class="iconfont icon-arrowdown2" v-if="(commonIndex==index)&&!isShow">
                </i>
                <i class="iconfont icon-arrowright" v-else>
                </i>
                第{{index+1}}小题
                <q-tooltip anchor="top middle" self="bottom middle">
                  <strong v-if="!isShow">点击收起</strong>
                  <strong v-else>点击展开</strong>
                </q-tooltip>
              </span>
              <el-input v-if="isShowScore" placeholder="分数" v-model="item.SubScore" size="small" maxlength="6"
                @keyup.native="checkPrice(item,'SubScore')" @input="getQuestionScore" class="clozeSubScore">
                <template slot="append">分</template>
              </el-input>
            </th>
            <th class="tdFirst">
              <i class="iconfont icon-img_delete_small" @click.stop="deleteQuestion(index)"></i>
            </th>
          </tr>
        </thead>
        <tbody v-if="(commonIndex==index)&&!isShow">
          <tr v-for="(subItem,subIndex) in item.OptionList" :key="subIndex">
            <td class="tdFirst">
              <div class="Answer_List" @click="ChangeItem(item,subItem)" :class="{'Is_Answer':subItem.IsAnswer}">
                {{subItem.Name}}
              </div>
            </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 class="tdFirst">
              <i class="iconfont icon-guanbi Tiku_DelIcon" @click="deleteOpion(item,subIndex)"></i>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <a class="addTiMuList" @click="addOption(item)">
                <i class="iconfont icon-add"></i>添加选项
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </template>
    <a class="add_LiteBtn" @click="addQuestion()">
      +添加小题
    </a>
  </div>
</template>
<script>
  import {
    getOptionList, //获取选择标签【A,B,C,D....】
    optionListConfig,
  } from '../../api/question/questionconfig'
  import UeEditor from '../editor/UeEditor'
  export default {
    props: {
      questionData: {
        type: Array,
      },
      setOption: {
        type: Object,
      },
      //是否显示小题分数
      isShowScore: {
        type: Boolean,
        default: false,
      }
    },
    components: {
      UeEditor
    },
    data() {
      return {
        data: this.questionData,
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 80,
        },
        optionTitleList: [],
        commonIndex: -1,
        childIndex: -1,
        isShow: true,
        commonIndex2: -2,
      };
    },
    created() {
      this.initConfig();
    },
    methods: {
      //计算分数
      getQuestionScore() {
        this.$emit('getScore');
      },
      initConfig() {
        this.optionTitleList = getOptionList();
      },
      //删除小问题
      deleteQuestion(index) {
        this.$q.dialog({
          title: "删除小题",
          message: "确实要删除该小题吗？",
          persistent: true,
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true
          }
        }).onOk(() => {
          this.data.splice(index, 1);
        });
      },
      //删除选项
      deleteOpion(item, index) {
        this.$q.dialog({
          title: "删除小题",
          message: "确实要删除该选项吗？",
          persistent: true,
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true
          }
        }).onOk(() => {
          item.splice(index, 1);
          this.childIndex = -1;
          this.calcOptionTitle();
        });
      },
      //新增选项
      addOption(item) {
        if (item.length < 7) {
          item.push({
            Name: "",
            Content: "",
            IsAnswer: false
          });
          this.calcOptionTitle()
        } else {
          this.$q.notify({
            type: 'warning',
            position: 'center',
            timeout: 1500,
            message: `最多只能添加7个选项`
          })
          return
        }
      },
      //添加小题
      addQuestion() {
        var tempArray = optionListConfig();
        var clozeObj = {
          SubScore: 0,
          OptionList: tempArray,
        };
        this.data.push(clozeObj);
      },
      //重新计算选择Title[A,B,C,D....]
      calcOptionTitle() {
        if (this.data && this.data.length > 0) {
          this.data.forEach((item, index) => {
            item.OptionList.forEach((subItem, subIndex) => {
              subItem.Name = this.optionTitleList[subIndex];
            })
          })
        }
      },
      //返回数据到父组件
      returnDataToParent() {
        this.getAnswer();
        this.$emit('getChild', this.data);
      },
      //获取答案
      getAnswer() {
        this.setOption.Answer = "";
        if (this.data && this.data.length > 0) {
          var answer = "";
          this.data.forEach((item) => {
            item.OptionList.forEach((subItem) => {
              if (subItem.IsAnswer) {
                answer += "," + subItem.Name;
              }
            })
          })
          if (answer != "") {
            answer = answer.substring(1);
          }
          this.setOption.Answer = answer;
        }
      },
      ChangeItem(item, subItem) {
        if (item && item.OptionList.length > 0) {
          item.OptionList.forEach(childItem => {
            childItem.IsAnswer = false;
          })
        }
        subItem.IsAnswer = true;
      },
      //点击展开收起
      showNav(index) {
        if (this.commonIndex2 == index) {
          this.commonIndex = index;
          this.isShow = !this.isShow;
        } else {
          this.commonIndex = index;
          this.isShow = false;
          this.commonIndex2 = index;
        }
      },
      //点击切换输入
      changeEdit(index) {
        this.childIndex = index;
      }
    },
    mounted() {

    },
    watch: {
      data: {
        handler(newValue) {
          this.returnDataToParent();
        },
        deep: true
      },
      questionData: {
        handler(newValue) {
          this.data = this.questionData;
        },
        deep: true
      },
    }
  };
</script>