<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="answerquestion-preview">
    <div class="stem">
      <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
        {{ questionNumberEndIsBracket(data.property.question_number) }}
      </span>
      <span v-html="sanitizeHTML(data.stem)"></span>
    </div>
    <div
      v-if="isEnable(data.property.is_enable_description)"
      class="description rich-text"
      v-html="sanitizeHTML(data.description)"
    ></div>
    <SoundRecordPreview :wav-blob.sync="answer.answer_list[0].audio_file_id" :disabled="disabled" position="center" />
    <div v-if="isEnable(data.property.is_enable_reference_answer) && isShowRightAnswer" class="reference-box">
      <h5 class="reference-title">参考答案</h5>
      <span class="reference-answer rich-text" v-html="sanitizeHTML(data.reference_answer)"></span>
    </div>

    <div v-if="isEnable(data.property.is_enable_analysis) && isShowRightAnswer" class="analysis">
      <span class="analysis-title">解析</span>
      <div class="analysis-content" v-html="sanitizeHTML(data.analysis)"></div>
    </div>
  </div>
</template>

<script>
import PreviewMixin from './components/PreviewMixin';
import SoundRecordPreview from './components/common/SoundRecordPreview.vue';

export default {
  name: 'AnswerQuestionPreview',
  components: {
    SoundRecordPreview,
  },
  mixins: [PreviewMixin],
  created() {
    this.$set(this.answer.answer_list, 0, { audio_file_id: '' });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.answerquestion-preview {
  @include preview;

  :deep .sound-record-wrapper {
    justify-content: center;
  }

  .reference-box {
    padding: 12px;
    background: $content-color;

    .reference-title {
      margin: 0 0 10px;
      font-size: 14px;
      font-weight: 400;
      line-height: 32px;
      color: $font-light-color;
    }
  }
}
</style>
