<script setup lang="ts">
import type { PaperQuestionType } from '@/types'
interface Props {
  index: number
  status: number
  question: PaperQuestionType
}
const { question } = defineProps<Props>()

const disabled = $ref<boolean>(inject('disabled'))

// 处理后的options数据
const currentOptions = computed(() => {
  if (!question.question_options) {
    return []
  }
  return question.question_options.map((item: any, index: number) => {
    // 英文字母 + 名称
    item.abc = A_Z[index]
    item.abc_option = `${A_Z[index]}. ${item.option}`
    return item
  })
})
// 26个英文字母
const A_Z = $computed(() => {
  const result = []
  for (let i = 0; i < 26; i++) {
    result.push(String.fromCharCode(65 + i))
  }
  return result
})
// 试题类型
const questionType = computed(() => {
  return question.child_question_type || question.question_type
})
// 正确答案
const correctAnswerText = computed(() => {
  return question.question_options
    .filter((item: any) => item.checked)
    .map((item: any) => item.abc)
    .join('、')
})
// 提交的答案
const submitAnswerText = computed(() => {
  return question.question_options
    .filter((item: any) => item.user_checked)
    .map((item: any) => item.abc)
    .join('、')
})
const value = computed({
  get() {
    return question.user_answer
  },
  set(value) {
    question.user_answer = value
  }
})
const checkboxValues = computed({
  get() {
    return question.user_answer ? question.user_answer.split(',') : []
  },
  set(values) {
    question.user_answer = values.join(',')
  }
})
</script>

<template>
  <div class="question-item">
    <div class="question-item-hd">
      <div class="question-item-hd__num">{{ index }}.</div>
      <div class="question-item-hd__title" v-html="question.question_content"></div>
    </div>
    <div class="question-item-bd">
      <!-- 单选 -->
      <template v-if="[1, 6].includes(questionType)">
        <el-radio-group :disabled="disabled" v-model="value">
          <div class="question-option-item" v-for="item in currentOptions" :key="item.id">
            <el-radio :label="item.id">
              <div class="question-option-item__text" v-html="item.abc_option"></div>
            </el-radio>
          </div>
        </el-radio-group>
      </template>
      <!-- 多选 -->
      <template v-if="questionType === 2">
        <el-checkbox-group :disabled="disabled" v-model="checkboxValues">
          <div class="question-option-item" v-for="item in currentOptions" :key="item.id">
            <el-checkbox :label="item.id">
              <div class="question-option-item__text" v-html="item.abc_option"></div>
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </template>
      <!-- 简答题 -->
      <template v-if="questionType === 3">
        <el-input
          type="textarea"
          placeholder="请输入答案内容"
          :autosize="{ minRows: 4, maxRows: 6 }"
          :disabled="disabled"
          :maxlength="500"
          :show-word-limit="true"
          v-model="value"
        ></el-input>
      </template>
    </div>
    <div class="question-item-ft" v-if="status === 3">
      <h3 class="question-item-ft__title">答案解析</h3>
      <template v-if="questionType !== 3">
        <div class="answer-item">
          <div class="answer-item-label">正确答案：</div>
          <div class="answer-item-content">{{ correctAnswerText }}</div>
        </div>
        <div class="answer-item">
          <div class="answer-item-label">您的答案：</div>
          <div class="answer-item-content">{{ submitAnswerText }}</div>
        </div>
      </template>
      <template v-else>
        <div class="answer-item" v-if="question.reviews">
          <div class="answer-item-label">老师点评：</div>
          <div class="answer-item-content">{{ question.reviews }}</div>
        </div>
      </template>
      <div class="answer-item" v-if="question.question_analysis">
        <div class="answer-item-label">解析：</div>
        <div class="answer-item-content" v-html="question.question_analysis"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.question-item {
  margin-bottom: 40px;
}
.question-item-hd {
  display: flex;
}
.question-item-hd__num {
  font-size: 32px;
  font-weight: bold;
  color: #222;
  line-height: 45px;
  margin-top: 5px;
}
.question-item-hd__title {
  margin-left: 5px;
  padding-top: 18px;
  font-size: 18px;
  font-weight: bold;
  color: #222;
  line-height: 25px;
}
.question-option-item {
  margin-top: 20px;
  width: 100%;
}
.question-option-item__text {
  display: inline-block;
  font-size: 18px;
  color: #222;
  white-space: normal;
}

.question-item-ft {
  margin-top: 20px;
}
.question-item-ft__title {
  font-size: 18px;
  font-weight: bold;
  color: #222;
  line-height: 25px;
}
.answer-item {
  margin-top: 10px;
  margin-left: 28px;
  display: flex;
  font-size: 18px;
  color: #222;
  line-height: 25px;
}
.answer-item-label {
  white-space: nowrap;
}
.answer-item-content {
  flex: 1;
  overflow: hidden;
}
</style>
