<!--共用选择题-->
<style>
  .v_sharingChooseQuestion {
    width: 100%;
  }

  .B-info {
    font-size: 14PX;
    color: #A8A8B3;
    padding-bottom: 10px;
    margin-left: 13px;
  }

  .v_sharingChooseQuestionBold {
    font-weight: bold;
  }
  .shareChooseTable td{
    vertical-align: middle!important;
  }
  .shareChooseTable td p{
    margin:0!important;
  }
</style>
<template>
  <div class="v_sharingChooseQuestion">
    <table v-if="data.QuestionContentObj&&data.QuestionContentObj.length>0" class="common_TiTable shareChooseTable">
      <thead>
        <tr>
          <th colspan="2" style="text-align:left;">
            <template v-if="data.QuestionContentObj[1]&& data.QuestionContentObj[1].length>0">
              (1)-({{data.QuestionContentObj[1].length}})题共用备选答案：
            </template>
          </th>
        </tr>
      </thead>
      <tr v-for="(item,index) in data.QuestionContentObj[0]" :key="index">
        <td style="width:40px;text-align:center;height:40px; ">
          {{item.Name}}
        </td>
        <td>
          <div v-html="item.Content"></div>
        </td>
      </tr>
    </table>
    <table v-if="data.QuestionContentObj&&data.QuestionContentObj.length>0" class="common_TiTable shareChooseTable">
      <tbody v-for="(item,index) in data.QuestionContentObj[1]" :key="index">
        <tr>
          <td style="width:40px;text-align:center;height:40px;">
            ({{index+1}})
          </td>
          <td>
            <div v-html="item.Content"></div>
          </td>
        </tr>
        <tr>
          <td>
          </td>
          <td>
            <template v-if="isShowAnswer">
              答案: {{data.QuestionContentObj[1][index].Name}}
            </template>
            <template v-if="isOperate">
              <el-select v-model="item.Name" style="width:100px" 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>
      </tbody>
      <tfoot v-if="isShowStudentAnswer">
        <tr>
          <td colspan="2" class="v_sharingChooseQuestionBold" style="height:70px" :style="{color:data.Answer ==data.StundetAnswer?'#67c23a':'red'}">
            考生答案：{{data.StundetAnswer}}
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <q-input v-if="isEditStudentScore" filled style="width:180px" v-model="data.StudentScore" label="得分："
              maxlength="20" @input="getQuestionScore" />
            <span v-else class="v_sharingChooseQuestionBold">考生得分：{{data.StudentScore}}</span>
          </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,
      }
    },
    components: {

    },
    data() {
      return {
        data: this.questionObj,
      };
    },
    methods: {
      //调用父组件计算学生分数
      getQuestionScore() {
        this.$emit('getScore');
      },
    },
    mounted() {

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

        },
        deep: true
      },
    }
  };

</script>
