<!--排序题-->
<style>
  .v_sortingProblemQuestion {
    width: 100%
  }

  .v_sortingProblemQuestion .team_tit {
    font-size: 14px;
    color: #A8A8B3;
    padding-bottom: 20px;
  }

  .selectBox {
    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;
    margin: 0 20px 14px 0;
  }

  .blue-border {
    border: 1px solid #FFFFFF;
    box-shadow: 0 0 7px 1px #75BAFF;
  }

  .v_sortingProblemQuestionBold {
    font-weight: bold;
  }

</style>
<template>
  <div class="v_sortingProblemQuestion">
    <table v-if="data&&data.QuestionContentObj&&data.QuestionContentObj.length>0">
      <tr v-for="(item,index) in data.QuestionContentObj[0]" :key="index">
        <td style="width:40px;text-align:center;">
          {{item.Name}}
        </td>
        <td>
          <div class="InpDIV" style="border:0;margin-top:-2px;padding-left:0;" v-html="item.Content"></div>
        </td>
        <td style="width:40px;text-align:center;">
        </td>
      </tr>
    </table>
    <br />
    <table v-if="isOperate&&data.QuestionContentObj&&data.QuestionContentObj.length>0">
      <tr>
        <td>
          <template v-for="(item,index) in data.QuestionContentObj[1]">
            <el-select v-model="item.Name" :key="index" style="width:100px;margin-right:20px;" size="small" placeholder="请选择">
              <el-option
                v-for="(cItem,cIndex) in data.QuestionContentObj[0]"
                :key="cIndex"
                :label="cItem.Name"
                :value="cItem.Name">
              </el-option>
            </el-select>
          </template>
        </td>
      </tr>
    </table>
    <table v-if="isShowAnswer">
      <tr>
        <td class="v_sortingProblemQuestionBold">
          答案：{{data.Answer}}
        </td>
      </tr>
      <tr v-if="isShowStudentAnswer">
        <td class="v_sortingProblemQuestionBold" :style="{color:data.Answer ==data.StundetAnswer?'#67c23a':'red'}">
          考生答案：{{data.StundetAnswer}}
        </td>
      </tr>
      <tr v-if="isShowStudentAnswer">
        <td>
          <q-input v-if="isEditStudentScore" standout="bg-primary text-white" v-model="data.StudentScore" label="得分："
            maxlength="20" @input="getQuestionScore" />
          <span v-else class="v_sortingProblemQuestionBold">考生得分：{{data.StudentScore}}</span>
        </td>
      </tr>
      <tr>
        <td>
          <span class="v_sortingProblemQuestionBold">
            解析：
          </span>
          <span v-html="data.AnswerParse"></span>
        </td>
      </tr>
    </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,
      };
    },
    methods: {
      //调用父组件计算学生分数
      getQuestionScore() {
        this.$emit('getScore');
      },
    },
    mounted() {

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

        },
        deep: true
      },
    }
  };

</script>
