<!--完型填空-->
<style>

</style>
<template>
  <div class="clozeQuestion">
    <template v-if="data&&data.length>0" v-for="(item,index) in data">
      <table>
        <thead>
          <tr>
            <th colspan="3" style="text-align:left;">
              第 {{index+1}} 题
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(subItem,subIndex) in item">
            <td>
              <el-checkbox v-model="subItem.IsAnswer" @change="ChangeItem(item,subItem)">{{subItem.Name}}</el-checkbox>
            </td>
            <td>
              <UeEditor v-model="subItem.Content" :config="config"></UeEditor>
            </td>
            <td>
              <a style="cursor:pointer;" @click="deleteOpion(item,subIndex)">删除</a>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3">
              <a style="cursor:pointer;" @click="addOption(item)">添加选项</a>
              &nbsp;
              <a style="cursor:pointer;" @click="deleteQuestion(index)">删除问题</a>
            </td>
          </tr>
        </tfoot>
      </table>
    </template>
    <br />
    <a style="cursor:pointer;color:blue;" @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,
      }
    },
    components: {
      UeEditor
    },
    data() {
      return {
        data: this.questionData,
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 80,
        },
        optionTitleList: [],
      };
    },
    created() {
      this.initConfig();
    },
    methods: {
      initConfig() {
        this.optionTitleList = getOptionList();
      },
      //删除小问题
      deleteQuestion(index) {
        this.data.splice(index, 1);
      },
      //删除选项
      deleteOpion(item, index) {
        item.splice(index, 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() {
        this.data.push(optionListConfig());
      },
      //重新计算选择Title[A,B,C,D....]
      calcOptionTitle() {
        if (this.data && this.data.length > 0) {
          this.data.forEach((item, index) => {
            item.forEach((subItem, subIndex) => {
              subItem.Name = this.optionTitleList[subIndex];
            })
          })
        }
      },
      //返回数据到父组件
      returnDataToParent() {
        this.$emit('getChild', this.data);
      },
      ChangeItem(item, subItem) {
        if (item && item.length > 0) {
          item.forEach(childItem => {
            childItem.IsAnswer = false;
          })
        }
        subItem.IsAnswer = true;
      },
    },
    mounted() {

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

</script>
