<!--完型填空-->
<style>
  .vClozeQuestion {
    width: 100%;
  }

  .vClozeQuestion .question_Title {
    color: #A8A8B3;
    font-size: 12px;
    margin-top: 20px;
  }

  .vClozeQuestion .clozeTest_question_tit {
    width: 50%;
    height: 40px;
    background: #F7F8FA;
    padding: 0 20px;
    line-height: 40px;
    font-size: 14px;
    color: #646873;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .vClozeQuestion .clozeTest_question_tit i {
    color: #acbfd9;
    cursor: pointer;
  }

  .vClozeQuestion .chooseOptionList {
    padding-top: 10px;
    height: 40px;
    line-height: 40px;
  }

  .vClozeQuestionBold {
    font-weight: bold;
  }
  .chooseOptionList:before{
      content: "-";
      display: block;
      line-height: 1.5em;
      color: transparent;
  }
  .chooseOptionList:after{
      content: "-";
      display: block;
      line-height: 1em;
      color: transparent;
  }
</style>
<template>
  <div class="vClozeQuestion">
    <template v-if="data&&data.QuestionContentObj&&data.QuestionContentObj.length>0">
      <table class="common_TiTable" style="margin-bottom:20px;" v-for="(item,index) in data.QuestionContentObj" :key="index">
        <thead>
          <tr>
            <th colspan="2">
              <div class="clozeTest_question_tit">
                第{{index+1}}小题 <template v-if="isShowScore">（{{item.SubScore}}分）</template>
              </div>
            </th>
          </tr>
        </thead>
        <tbody class="chooseOptionList">
          <tr v-for="(subItem,subIndex) in item.OptionList" :key="subIndex">
            <td style="width:40px;text-align:center;height:50px;">
              <template v-if="isOperate">
                <div class="Answer_List" @click="ChangeItem(item,subItem)" :class="{'Is_Answer':subItem.IsAnswer}">
                  {{subItem.Name}}
                </div>
              </template>
              <template v-else>
                <div class="Answer_List2">
                  {{subItem.Name}}
                </div>
              </template>
            </td>
            <td>
              <div class="InpDIV" style="border:0;margin-top:-2px;" v-html="subItem.Content">
              </div>
            </td>
          </tr>
        </tbody>
        <tfoot v-if="isShowAnswer">
          <tr>
            <td style="height:40px" colspan="2" class="vClozeQuestionBold">
              答案： {{data.QuestionAnswerList[index].SubAnswer}}
            </td>
          </tr>
          <tr>
            <td style="height:40px" v-if="isShowStudentAnswer" colspan="2" class="vClozeQuestionBold"
              :style="{color:data.QuestionAnswerList[index].SubAnswer ==data.AnswerList[index].SubAnswer?'#67c23a':'red'}">
              考生答案: {{data.AnswerList[index].SubAnswer}}
            </td>
          </tr>
          <tr v-if="isShowStudentAnswer">
            <td colspan="2">
              <q-input v-if="isEditStudentScore" filled style="width:180px;"
                v-model="data.AnswerList[index].StudentScore" label="得分：" maxlength="20" @input="getQuestionScore" />
              <span v-else class="vClozeQuestionBold">考生得分：{{data.AnswerList[index].StudentScore}}</span>
            </td>
          </tr>
        </tfoot>
      </table>
      <table class="common_TiTable" v-if="isShowAnswer">
        <tfoot>
          <tr>
            <td colspan="2">
              <div style="display:flex;align-items:center;">
                <span class="vClozeQuestionBold">
                  解析：
                </span>
                <span class="Fill_AnswerPaer" v-html="data.AnswerParse"></span>
              </div>
            </td>
          </tr>
        </tfoot>
      </table>
    </template>
  </div>
</template>
<script>
  export default {
    props: {
      questionObj: {
        type: Object,
      },
      //是否显示答案和解析
      isShowAnswer: {
        type: Boolean,
        default: false,
      },
      //是否可操作(PC端考试使用【可以点击选中】)
      isOperate: {
        type: Boolean,
        default: false,
      },
      //是否显示学生答案
      isShowStudentAnswer: {
        type: Boolean,
        default: false
      },
      //是否显示小题分数
      isShowScore: {
        type: Boolean,
        default: false,
      },
      //是否可以编辑学生得分
      isEditStudentScore: {
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {
        data: this.questionObj,
      };
    },
    methods: {
      //获取答案
      getAnswer() {
        this.data.Answer = "";
        if (this.data && this.data.QuestionContentObj && this.data.QuestionContentObj.length > 0) {
          var answer = "";
          this.data.QuestionContentObj.forEach((item) => {
            item.OptionList.forEach((subItem) => {
              if (subItem.IsAnswer) {
                answer += "," + subItem.Name;
              }
            })
          })
          if (answer != "") {
            answer = answer.substring(1);
          }
          this.data.Answer = answer;
        }
      },
      ChangeItem(item, subItem) {
        if (item && item.OptionList.length > 0) {
          item.OptionList.forEach(childItem => {
            childItem.IsAnswer = false;
          })
        }
        subItem.IsAnswer = true;
        this.getAnswer();
      },
      //调用父组件计算学生分数
      getQuestionScore() {
        this.$emit('getScore');
      },
    },
    mounted() {

    },
    watch: {
      isShowAnswer: {
        handler(newValue) {

        },
        deep: true
      },
    }
  };

</script>
