<style>
  .v_singleQuestion {
    width: 100%;
  }

  .v_singleQuestionBold {
    font-weight: bold;
    height:40px;
  }
  .Fill_AnswerPaer P{
    margin: 0;
  }

</style>
<!--单选题查看-->
<template>
  <div class="v_singleQuestion">
    <table v-if="data&&data.QuestionContentObj&&data.QuestionContentObj.length>0">
      <tbody v-for="(item,index) in data.QuestionContentObj" :key="index">
        <tr>
          <td style="width:40px;text-align:center;">
            <template v-if="isOperate">
              <div class="Answer_List2" style="cursor:pointer;" @click="ChangeItem(item)"
                :class="{'Is_Answer':item.IsAnswer}">
                {{item.ShowName}}
              </div>
            </template>
            <template v-else>
              <div class="Answer_List2">
                {{item.Name}}
              </div>
            </template>
          </td>
          <td>
            <div class="InpDIV" style="border:0;" v-html="item.Content"></div>
          </td>
        </tr>
      </tbody>
      <tfoot v-if="isShowAnswer">
        <tr>
          <td colspan="2" class="v_singleQuestionBold">正确答案：{{data.Answer}}</td>
        </tr>
        <tr v-if="isShowStudentAnswer">
          <td colspan="2" class="v_singleQuestionBold"
            :style="{color:data.Answer ==data.StundetAnswer?'#67c23a':'red'}">考生答案：{{data.StundetAnswer}}</td>
        </tr>
        <tr v-if="isShowStudentAnswer">
          <td colspan="2" style="height:70px;">
            <q-input v-if="isEditStudentScore" style="width:180px" filled v-model="data.StudentScore" label="得分："
              maxlength="20" @input="getQuestionScore" />
            <span v-else class="v_singleQuestionBold">考生得分：{{data.StudentScore}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="2" style="height:40px;">
            <div style="display:flex;align-items:center;">
              <span class="v_singleQuestionBold">
                解析：
              </span>
              <span style="height:40px;" 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,
      };
    },
    mounted() {},
    methods: {
      ChangeItem(item) {
        if (this.data.QuestionContentObj && this.data.QuestionContentObj.length > 0) {
          this.data.QuestionContentObj.forEach(item => {
            item.IsAnswer = false;
          })
        }
        item.IsAnswer = true;
        this.data.Answer = item.Name;
      },
      //调用父组件计算学生分数
      getQuestionScore() {
        var stuScore = 0;
        if (this.data.StudentScore != "") {
          stuScore = this.data.StudentScore;
        }
        if (stuScore > this.data.Score) {
          this.data.StudentScore = this.data.Score;
        }
        if (stuScore < 0) {
          this.data.StudentScore = 0;
        }
        this.$emit('getScore');
      },
    },
    watch: {
      isShowAnswer: {
        handler(newValue) {

        },
        deep: true
      },
    }
  };

</script>
