<!--填空题-->
<style>
  .fillInQuestion {
    width: 100%;
  }

  .fillInQuestion .tk_info {
    color: #A8A8B3;
    font-size: 12px;
    cursor: default;
  }

  .fillInQuestion .fillIn_td {
    width: 50px;
    text-align: center;
  }

</style>
<template>
  <div class="fillInQuestion">
    <table v-if="data&&data.length>0" class="common_TiTable">
      <tr v-for="(item,index) in data" :key="index">
        <td class="fillIn_td" style="padding-top:8px;">
          第{{index+1}}空
        </td>
        <td>
          <div class="InpDIV" v-html="item.Content" v-if="commonIndex!=index" @click="changeEdit(index)"></div>
          <UeEditor v-model="item.Content" :config="config" v-else></UeEditor>
        </td>
        <td class="fillIn_td">
          <i class="iconfont icon-guanbi Tiku_DelIcon" v-if="data.length>1" @click="deleteOpion(index)"></i>
        </td>
      </tr>
      <tfoot>
        <tr>
          <td>
          </td>
          <td colspan="2">
            <a class="addTiMuList" @click="addOption()">
              <i class="iconfont icon-add"></i>添加更多
            </a>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            <el-checkbox v-model="setOption.IsMutex" :true-label="1" :false-label="0"><span
                style="font-size:12px;">答案顺序打乱也判正确</span></el-checkbox>
          </td>
        </tr>
        <tr>
          <td colspan="3" class="tk_info">
            1. 一个空有多种答案时请用";"隔开。如：水;H2O
          </td>
        </tr>
        <tr>
          <td colspan="3" class="tk_info">
            2. 若试题答案是数字，可设置范围，两个数字之间用"-"。如：1-9，学生填写1到9之间的数字都算正确（包括1和9）
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>
<script>
  import UeEditor from '../editor/UeEditor'
  export default {
    props: {
      questionData: {
        type: Array,
      },
      setOption: {
        type: Object,
      }
    },
    components: {
      UeEditor
    },
    data() {
      return {
        data: this.questionData,
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 80,
        },
        commonIndex: -1,
      };
    },
    created() {},
    methods: {
      //删除选项
      deleteOpion(index) {
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          this.data.splice(index, 1);
        }).onCancel(() => {

        });
      },
      //新增选项
      addOption() {
        this.data.push({
          Content: "",
        });
      },
      //返回数据到父组件
      returnDataToParent() {
        if (this.data && this.data.length > 0) {
          var answer = "";
          this.data.forEach(item => {
            answer += "★" + item.Content;
          })
          if (answer != "") {
            answer = answer.substring(1);
          }
          this.setOption.Answer = answer;
        }
        this.$emit('getChild', this.data);
      },
      //点击切换输入
      changeEdit(index) {
        this.commonIndex = index;
      }
    },
    mounted() {

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

</script>
