<!--判断题-->
<style>
  .judgeQuestion {
    width: 100%;
  }

</style>
<template>
  <div class="judgeQuestion">
    <table v-if="data&&data.length>0" class="common_TiTable">
      <tr v-for="(item,index) in data" :key="index">
        <td style="width:50px;text-align:center;">
          <div class="Answer_List" @click="ChangeItem(item)" :class="{'Is_Answer':item.IsAnswer}">
            {{item.Name}}
          </div>
        </td>
        <td style="vertical-align:middle;">
          {{item.Content}}
        </td>
      </tr>
    </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,
        },
      };
    },
    created() {},
    methods: {
      //返回数据到父组件
      returnDataToParent() {
        this.getAnswer();
        this.$emit('getChild', this.data);
      },
      ChangeItem(item) {
        if (this.data && this.data.length > 0) {
          this.data.forEach(item => {
            item.IsAnswer = false;
          })
        }
        item.IsAnswer = true;
        this.getAnswer();
      },
      //获取正确答案
      getAnswer() {
        this.setOption.Answer = "";
        if (this.data && this.data.length > 0) {
          this.data.forEach(item => {
            if (item.IsAnswer) {
              this.setOption.Answer = item.Name;
            }
          })
        }
      },
    },
    mounted() {

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

</script>
