<!--填空题-->
<style>
  .v_fillInQuestion {
    width: 100%;
  }

  .v_fillInBold {
    font-weight: bold
  }

  .v_fillInTitle {
    width: 70px;
    text-align: center;
    padding-top: 8px;
  }
  .Fill_AnswerPaer P{
    margin: 0;
  }
</style>
<template>
  <div class="v_fillInQuestion">
    <table v-if="data&&data.QuestionContentObj&&data.QuestionContentObj.length>0" class="common_TiTable">
      <template v-if="isShowAnswer">
        <tbody v-for="(item,index) in data.QuestionContentObj" :key="index">
          <tr>
            <td class="v_fillInTitle">
              第{{index+1}}空
            </td>
            <td>
              <div class="InpDIV" style="border:0;margin-top:-2px;" v-html="item.Content"></div>
            </td>
          </tr>
        </tbody>
      </template>
      <!--可以填写-->
      <template v-if="isOperate">
        <tbody v-for="(item,index) in data.QuestionContentObj" :key="index+1000">
          <tr>
            <td class="v_fillInTitle">
              第{{index+1}}空
            </td>
            <td>
              <el-input v-model="item.Content" :placeholder="'请填写第 '+(index+1)+' 空答案'"> </el-input>
            </td>
          </tr>
        </tbody>
      </template>
      <tbody>
        <tr>
          <td colspan="2"><span v-if="data&&data.IsMutex==1" style="font-size:13px;">答案顺序打乱也判正确</span></td>
        </tr>
        <tr>
          <td colspan="2" style="height:40px;">1. 一个空有多种答案时请用";"隔开。如：水;H2O</td>
        </tr>
        <tr>
          <td colspan="2" style="height:40px;">2. 若试题答案是数字，可设置范围，两个数字之间用"-"。如：1-9，学生填写1到9之间的数字都算正确（包括1和9）</td>
        </tr>
      </tbody>
      <tfoot v-if="isShowAnswer">
        <tr v-if="isShowStudentAnswer">
          <td class="v_fillInBold" style="height:40px;">
            考生答案
          </td>
          <td>
          </td>
        </tr>
        <template v-if="isShowStudentAnswer">
          <tr v-for="(item,index) in data.AnswerList" :key="index+2000">
            <td class="v_fillInBold">
              第{{index+1}}空
            </td>
            <td class="v_fillInBold">
              {{item}}
            </td>
          </tr>
        </template>
        <tr v-if="isShowStudentAnswer">
          <td colspan="2" style="height:70px;">
            <q-input v-if="isEditStudentScore" filled style="width:180px;" v-model="data.StudentScore" label="得分："
              maxlength="20" @input="getQuestionScore" />
            <span v-else class="v_fillInBold">考生得分：{{data.StudentScore}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div style="display:flex;align-items:center;">
              <span class="v_fillInBold">
                解析：
              </span>
              <span class="Fill_AnswerPaer" v-html="data.AnswerParse"></span>
            </div>
          </td>
        </tr>
      </tfoot>
    </table>
  </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
      },
      //是否可以编辑学生得分
      isEditStudentScore: {
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {
        data: this.questionObj,
      };
    },
    created() {},
    methods: {
      //调用父组件计算学生分数
      getQuestionScore() {
        this.$emit('getScore');
      },
    },
    mounted() {

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

        },
        deep: true
      },
    }
  };

</script>
