<!--连线题-->
<style>

</style>
<template>
  <div class="matchingQuestion">
    <span>第一组</span>
    <table v-if="data&&data.length>0">
      <tr v-for="(item,index) in data[0]">
        <td>
          {{item.Name}}
        </td>
        <td>
          <UeEditor v-model="item.Content" :config="config"></UeEditor>
        </td>
        <td>
          <a style="cursor:pointer;" @click="deleteOpion(0,index)">删除</a>
        </td>
      </tr>
      <tfoot>
        <tr>
          <td colspan="3">
            <a style="cursor:pointer;" @click="addOption(0)">添加选项</a>
          </td>
        </tr>
      </tfoot>
    </table>
    <span>第二组</span>
    <table v-if="data&&data.length>1">
      <tr v-for="(item,index) in data[1]">
        <td>
          {{item.Name}}
        </td>
        <td>
          <UeEditor v-model="item.Content" :config="config"></UeEditor>
        </td>
        <td>
          <a style="cursor:pointer;" @click="deleteOpion(0,index)">删除</a>
        </td>
      </tr>
      <tfoot>
        <tr>
          <td colspan="3">
            <a style="cursor:pointer;" @click="addOption(1)">添加选项</a>
          </td>
        </tr>
      </tfoot>
    </table>
    <span>答案</span>
    <table v-if="data&&data.length>2">
      <tr v-for="(item,index) in data[2]">
        <td>
          {{item.Name}}
        </td>
        <td>
          -----
        </td>
        <td>
          <select v-model="item.Content">
            <template v-for="(cItem,cIndex) in data[1]">
              <option :key="cIndex" :label="cItem.Name" :value="cItem.Name">
              </option>
            </template>
          </select>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
  import {
    getOptionList, //获取选择标签【A,B,C,D....】
  } 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: [],
      };
    },
    computed: {

    },
    created() {
      this.initConfig();
    },
    methods: {
      initConfig() {
        this.optionTitleList = getOptionList();
      },
      //删除选项
      deleteOpion(index, subIndex) {
        this.data[index].splice(subIndex, 1);
        this.calcOptionTitle();
      },
      //新增选项
      addOption(index) {
        if (index == 0) {
          this.data[2].push({
            Name: "",
            Content: "A",
          });
        }
        this.data[index].push({
          Name: "",
          Content: "",
        });
        this.calcOptionTitle();
      },
      //重新计算选择Title[A,B,C,D....]
      calcOptionTitle() {
        if (this.data && this.data.length > 0) {
          this.data.forEach((item, index) => {
            item.forEach((subItem, subIndex) => {
              if (index == 0 || index == 2) {
                subItem.Name = subIndex + 1;
              } else if (index == 1) {
                subItem.Name = this.optionTitleList[subIndex];
              }
            })
          })
        }
      },
      //返回数据到父组件
      returnDataToParent() {
        this.$emit('getChild', this.data);
      },
    },
    mounted() {

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

</script>
