<!-- 试题答案 -->
<template>
  <div class="page-container answerKey-addPage">
    <div class="content-box scrollbar-box">
      <!-- 题目列表 -->
      <div class="question-list">
        <div class="question-item">
          <!-- 题干行 -->
          <div class="question-stem-row">
            <el-tag type="primary" class="tag-tigan">题 干</el-tag>
            <span class="stem-text" v-html="questionData.stem"></span>
            <div class="star-rate">
              <i v-for="s in 4" :key="s" :class="['star-icon', s <= questionData.difficulty ? 'star-active' : 'star-empty']">★</i>
            </div>
          </div>

          <!-- 选项列表 -->
          <div class="options-box">
            <div v-for="(opt, oi) in questionData.options" :key="oi"
              :class="['option-item', questionData.answer.includes(opt.label) ? 'option-correct' : '']">
              <span style="margin-right:10px;font-weight:700;">{{ opt.label }}.</span>
              <span v-html="opt.content"></span>
            </div>
          </div>

          <!-- 答案行 -->
          <div class="answer-row">
            <el-tag type="" class="tag-answer">答 案</el-tag>
            <span class="answer-text">{{ questionData.answer?questionData.answer.join('、'):'' }}</span>
          </div>

          <!-- 答案解析 -->
          <div class="analysis-box">
            <div class="analysis-title">答案解析</div>
            <div class="analysis-content" v-if="questionData.analysis" v-html="questionData.analysis"></div>
            <div class="analysis-content" style="color:#999;" v-else>未配置</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    examElQuestionBankDetail,
  } from "@/api/safetyEducationExaminationNew/index";
  export default {
    name: 'answerKey',
    props: {
      answerKeyPropsData: {}
    },
    data() {
      return {
        questionData: {
          // stem: '题目内容题目内容<b>重点内容</b>题目内容题目内容题目内容题目内容题目内容',
          // difficulty: 1,
          // options: [
          //   { label: 'A', content: '答案内容答案内容<img src="https://via.placeholder.com/60x30" style="vertical-align:middle;margin:0 4px"/>答案内容答案内容答案内容答案内容答案内容答案内容答案内容答案内容' },
          //   { label: 'B', content: '答案内容答案内容答案内容答案内容答案内容答案内容答案内容答案内容答案内容答案内容答案内容' },
          //   { label: 'C', content: '答案内容答案内容答案内容答案内容<b>关键选项</b>答案内容答案内容答案内容答案内容答案内容答案内容' },
          //   { label: 'D', content: '答案内容答案内容答案内容答案内容答案内容答案内容答案内容答案内容答案内容答案内容答案内容' },
          // ],
          // answer: ['A', 'C'],
          // analysis: '答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容<br/>答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容答案解析内容。'
        },
      }
    },
    mounted() {
      this.initialize()
    },
    methods: {
      initialize() {
        examElQuestionBankDetail({id:this.answerKeyPropsData.id}).then(response => {
          let obj ={
            stem:response.data.questionContent,
            difficulty:response.data.difficulty,
            options:[],
            answer:[],
            analysis:response.data.analysis,
          }
          if(response.data.questionType == 1 || response.data.questionType == 2){
            let list = [];
            for (let i=0;i<response.data.options.length;i++){
              list.push({
                label:response.data.options[i].optionTag,
                content:response.data.options[i].optionContent,
              })
            }
            obj.options = list;
            obj.answer = response.data.correctAnswer.split(',');
          }else if(response.data.questionType == 3){
            obj.answer = [response.data.correctAnswer=='Y'?'对':'错']
          }
          this.$set(this,'questionData',obj);
        })
      },
      backPage() {
        this.$parent.tableButton(6)
      }
    }
  }
</script>

<style scoped lang="scss">
  .answerKey-addPage {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .content-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 0 10px 0 20px;

      .header-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 16px;
        border-bottom: 1px solid #eee;
        margin-bottom: 20px;

        .title {
          font-size: 18px;
          font-weight: bold;
          color: #333;
        }

        .close-btn {
          font-size: 20px;
          color: #999;
          cursor: pointer;
          &:hover { color: #333; }
        }
      }

      .question-list {
        flex: 1;
        overflow-y: auto;

        .question-item {
          margin-bottom: 32px;

          .question-stem-row {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 16px;

            .tag-tigan {
              flex-shrink: 0;
              background-color: #409eff;
              border-color: #409eff;
              color: #fff;
              padding: 4px 10px;
              border-radius: 4px;
              font-size: 14px;
              line-height: 20px;
            }

            .stem-text {
              flex: 1;
              font-size: 15px;
              color: #333;
              line-height: 1.6;
              margin:0 20px;
            }

            .star-rate {
              display: flex;
              gap: 2px;
              flex-shrink: 0;

              .star-icon {
                font-size: 18px;
                font-style: normal;
              }
              .star-active { color: #f0a030; }
              .star-empty  { color: #ccc; }
            }
          }

          .options-box {
            padding-left: 60px;
            margin:20px 0;

            .option-item {
              display: flex;
              gap: 6px;
              align-items: baseline;
              font-size: 14px;
              color: #555;
              line-height: 1.8;
              margin-bottom: 8px;

              &.option-correct {
                color: #409eff;
              }
            }
          }

          .answer-row {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;

            .tag-answer {
              flex-shrink: 0;
              background-color: #fff;
              border: 1px solid #67c23a;
              color: #67c23a;
              padding: 4px 10px;
              border-radius: 4px;
              font-size: 14px;
              line-height: 20px;
            }

            .answer-text {
              font-size: 16px;
              font-weight: bold;
              color: #333;
            }
          }

          .analysis-box {
            padding-left: 0;
            margin-left:60px;

            .analysis-title {
              font-size: 15px;
              font-weight: bold;
              color: #333;
              margin-bottom: 10px;
            }

            .analysis-content {
              font-size: 14px;
              color: #409eff;
              line-height: 1.8;
            }
          }
        }
      }
    }
  }
</style>
