<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { updateComment } from '../api'
const props = defineProps({
  // 题目项数据
  question: {
    type: Object,
    default() {
      return {}
    }
  },
  // 大题索引
  currentIndex: {
    type: Number
  },
  // 小题索引
  childIndex: {
    type: Number
  },
  // 试卷id
  questionId: {
    type: String
  }
})
const showComment = ref(false) // 评论框显示状态
const reviews = ref('') // 评语
const questionData: any = reactive(Object.assign({}, props.question)) // 题目数据
// 题目类型
const questionType = computed(() => {
  // 1单选，2多选，3简答，5案例题， 6判断， 7实操，8情景
  if (props.question.child_question_type !== 0) {
    return parseInt(props.question.child_question_type)
  } else {
    return parseInt(props.question.question_type)
  }
})
// 点评
const fetchComment = () => {
  const params: any = {
    id: props.questionId,
    index: props.currentIndex,
    child_index: props.childIndex,
    user_score: questionData.user_score,
    reviews: reviews.value
  }
  updateComment(params).then(() => {
    ElMessage.success('点评成功')
    questionData.is_reviewed = true
    showComment.value = false
  })
}
</script>
<template>
  <!-- <el-card> -->
  <div class="question-item">
    <div class="question-item-title" v-html="props.question.question_content"></div>
    <!-- 单选判断 -->
    <template v-if="questionType === 1 || questionType === 6">
      <el-radio-group v-model="questionData.user_answer" :disabled="true" class="question-item-content">
        <div class="question-item-option" v-for="subItem in questionData.question_options" :key="subItem.id">
          <el-radio :label="subItem.id">{{ subItem.option }}</el-radio>
        </div>
      </el-radio-group>
    </template>
    <!-- 多选 -->
    <template v-if="questionType === 2">
      <el-checkbox-group v-model="questionData.user_answer" :disabled="true" class="question-item-content">
        <div class="question-item-option" v-for="subItem in questionData.question_options" :key="subItem.id">
          <el-checkbox :label="subItem.id"> {{ subItem.option }} </el-checkbox>
        </div>
      </el-checkbox-group>
    </template>
    <!-- 问答 -->
    <template v-if="questionType === 3">
      <div class="SAQ">{{ questionData.user_answer || '' }}</div>
      <div style="text-align: right">
        <el-button
          type="primary"
          size="small"
          plain
          @click="showComment = !showComment"
          v-if="questionData.is_reviewed !== true"
          >点击评分</el-button
        >
      </div>
      <div class="comment" v-show="showComment">
        <div class="comment-top">
          <p>本题{{ props.question.score }}分</p>
          <div class="get-score">
            学生得分：<el-input-number
              :disabled="questionData.is_reviewed"
              v-model="questionData.user_score"
              controls-position="right"
              :min="0"
              :max="questionData.score"
              size="small"
            ></el-input-number>
          </div>
        </div>
        <el-input
          type="textarea"
          placeholder="请输入评语"
          v-model="reviews"
          rows="3"
          :disabled="questionData.is_reviewed"
        />
        <div style="text-align: center; padding-top: 10px">
          <el-button type="primary" size="small" @click="fetchComment" :disabled="questionData.is_reviewed"
            >提交点评</el-button
          >
        </div>
      </div>
    </template>
    <div class="question-item-score">得分：{{ questionData.user_score }}分</div>
  </div>
  <!-- </el-card> -->
</template>

<style lang="scss" scoped>
.question-item {
  font-size: 14px;
  color: #454545;
  border-bottom: 1px solid #f3f3f3;
  margin-bottom: 10px;
  .question-item-content {
    padding-left: 10px;
    .question-item-option {
      padding-top: 10px;
    }
  }
  .SAQ {
    min-height: 60px;
    font-size: 14px;
    line-height: 24px;
    color: #888;
    border: 1px solid #eee;
    background: #f3f3f3;
    margin: 10px 0;
    border-radius: 6px;
  }
  .comment {
    border: 1px solid rgba(192, 28, 64, 0.3);
    border-radius: 4px;
    padding: 10px;
    margin-top: 15px;
    background: #f9f9f9;
    .comment-top {
      display: flex;
      margin-bottom: 10px;
      p {
        flex: 1;
      }
    }
  }
  .question-item-score {
    color: #777;
    padding: 10px 0;
  }
}
:deep(.el-radio-group) {
  display: block;
}
</style>
