<!--连线题-->
<style>
  .matchingQuestion {
    width: 100%;
  }

  .matchingQuestion .team_tit {
    font-size: 14px;
    color: #A8A8B3;
  }

  .matchingQuestion .line_center {
    display: inline-block;
    width: 28px;
    height: 10px;
    border-top: 1px solid #E1E1E5;
    margin: 13px 12px 0 0;
  }

  .matchingQuestion .selectBox2 {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    position: relative;
    cursor: pointer;
    width: 58px;
    line-height: 24px;
    height: 24px;
    background: #FFFFFF;
    border: 1px solid #E1E1E5;
    border-radius: 4px;
    font-size: 12px;
    color: #181E33;
    outline: none;
  }

  .matchingQuestion .matching_td {
    width: 50px;
    text-align: center;
  }

</style>
<template>
  <div class="matchingQuestion">
    <table v-if="data&&data.length>0" class="common_TiTable">
      <!--第一组-->
      <tr>
        <td colspan="3" class="team_tit">
          第1组：
        </td>
      </tr>
      <tr v-for="(item,index) in data[0]" :key="index">
        <td class="matching_td" style=" padding-top:10px;">
          {{item.Name}}
        </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="matching_td">
          <i class="iconfont icon-guanbi Tiku_DelIcon" v-if="data[0].length>1" @click="deleteOpion(0,index)"></i>
        </td>
      </tr>
      <tr>
        <td>
        </td>
        <td colspan="2">
          <a class="addTiMuList" @click="addOption(0)">
            <i class="iconfont icon-add"></i>添加更多
          </a>
        </td>
      </tr>
      <!--第二组-->
      <tr>
        <td colspan="3" class="team_tit">
          第2组：
        </td>
      </tr>
      <tr v-for="(item,index) in data[1]" :key="index+1000">
        <td class="matching_td" style="padding-top:10px;">
          {{item.Name}}
        </td>
        <td>
          <div class="InpDIV" v-html="item.Content" v-if="commonIndex2!=index" @click="changeEdit2(index)"></div>
          <UeEditor v-model="item.Content" :config="config" v-else></UeEditor>
        </td>
        <td class="matching_td">
          <i class="iconfont icon-guanbi Tiku_DelIcon" v-if="data[1].length>1" @click="deleteOpion(1,index)"></i>
        </td>
      </tr>
      <tr>
        <td>
        </td>
        <td colspan="2">
          <a class="addTiMuList" @click="addOption(1)">
            <i class="iconfont icon-add"></i>添加更多
          </a>
        </td>
      </tr>
      <!--答案-->
      <tr>
        <td colspan="3" class="team_tit">
          答案：
        </td>
      </tr>
      <tr v-for="(item,index) in data[0]" :key="index+2000">
        <td class="matching_td">
          {{item.Name}}
        </td>
        <td colspan="2">
          <span class="line_center"></span>
          <select v-model="data[2][index].Content" class="selectBox2">
            <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,
      },
      setOption: {
        type: Object,
      }
    },
    components: {
      UeEditor
    },
    data() {
      return {
        data: this.questionData,
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 80,
        },
        optionTitleList: [],
        commonIndex: -1,
        commonIndex2: -1
      };
    },
    computed: {

    },
    created() {
      this.initConfig();
    },
    methods: {
      initConfig() {
        this.optionTitleList = getOptionList();
      },
      //删除选项
      deleteOpion(index, subIndex) {
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          //删除第一组是，也删除答案里面的
          if (index == 0) {
            this.data[2].splice(subIndex, 1);
          }
          this.data[index].splice(subIndex, 1);
          //删除的第二组
          if (index == 1) {
            var temp1 = this.data[1];
            this.data[2].forEach(item => {
              var isExists = false;
              if (temp1 && temp1.length > 0) {
                temp1.forEach(subItem => {
                  if (subItem.Name == item.Content) {
                    isExists = true;
                  }
                })
              }
              if (!isExists) {
                item.Content = "";
              }
            })
          }
          this.commonIndex = -1;
          this.commonIndex2 = -1;
          this.calcOptionTitle();
        }).onCancel(() => {

        });
      },
      //新增选项
      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.getAnswer();
        this.$emit('getChild', this.data);
      },
      //获取正确答案
      getAnswer() {
        this.setOption.Answer = "";
        if (this.data && this.data.length > 0) {
          var answer = "";
          this.data[2].forEach(item => {
            answer += "," + item.Content;
          })
          if (answer != "") {
            answer = answer.substring(1);
          }
          this.setOption.Answer = answer;
        }
      },
      //点击切换输入
      changeEdit(index) {
        this.commonIndex = index;
        this.commonIndex2 = -1;
      },
      changeEdit2(index) {
        this.commonIndex2 = index;
        this.commonIndex = -1;
      }
    },
    mounted() {},
    watch: {
      data: {
        handler(newValue) {
          this.returnDataToParent();
        },
        deep: true
      },
      questionData: {
        handler(newValue) {
          this.data = this.questionData;
        },
        deep: true
      },
    }
  };

</script>
