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

  .team_tit {
    display: inline-block;
    font-size: 14px;
    color: #A8A8B3;
    padding-bottom: 20px;
    margin-left: 13px;
  }

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

  .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;
  }

</style>
<template>
  <div class="matchingQuestion">
    <table v-if="data&&data.length>0" class="common_TiTable">
      <thead>
        <tr>
          <th colspan="2">第一组</th>
          <th colspan="2">第二组</th>
        </tr>
      </thead>
      <tr v-for="(item,index) in data[0]">
        <td style="width:40px;text-align:center;padding-top:10px;">
          {{item.Name}}
        </td>
        <td>
          <div class="InpDIV" style="width:100%;border:0;" v-html="item.Content"></div>
        </td>
        <td style="width:40px;text-align:center;padding-top:10px;">
          {{data[1][index].Name}}
        </td>
        <td>
          <div class="InpDIV" style="width:100%;border:0;" v-html="data[1][index].Content"></div>
        </td>
      </tr>
      <tfoot>
        <tr>
          <td colspan="3">
          </td>
        </tr>
      </tfoot>
    </table>

    <span class="team_tit">答案</span>
    <table v-if="data&&data.length>2" style="padding-left:13px;">
      <tr v-for="(item,index) in data[0]">
        <td style="width:30px;">
          {{item.Name}}
        </td>
        <td>
          <span class="line_center"></span>
        </td>
        <td>
          {{data[2][index].Content}}
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
  export default {
    props: {
      questionData: {
        type: Array,
      },
      setOption: {
        type: Object,
      }
    },
    components: {

    },
    data() {
      return {
        data: this.questionData,
      };
    },
    computed: {

    },
    created() {

    },
    methods: {
      //返回数据到父组件
      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;
        }
      },
    },
    mounted() {},
    watch: {
      data: {
        handler(newValue) {
          this.returnDataToParent();
        },
        deep: true
      },
    }
  };

</script>
