<!-- eslint-disable vue/no-v-html -->
<template>
  <div v-if="show_preview" class="essayquestion-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>

    <el-input
      v-model="answer.answer_list[0].text"
      class="write-input"
      rows="12"
      resize="none"
      type="textarea"
      placeholder="请输入"
      :maxlength="1000"
      show-word-limit
      :readonly="disabled"
      :autosize="{ minRows: 12 }"
      @input="handleInput"
      @blur="handleTone(answer.answer_list[0].text)"
    />

    <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 { addTone, handleToneValue } from '@/views/exercise_questions/data/common';

export default {
  name: 'EssayQuestionPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      show_preview: false,
    };
  },
  watch: {
    data: {
      handler(val) {
        if (!val || this.data.type !== 'essay_question') return;
        this.handleData();
      },
      deep: true,
      immediate: true,
    },
    'answer.answer_list': {
      handler(val) {
        if (val.length === 0) {
          this.handleData();
        }
      },
      deep: true,
    },
  },
  methods: {
    // 初始化数据
    handleData() {
      if (!this.isJudgingRightWrong) {
        this.answer.answer_list.push({
          text: '',
        });
      }
      this.show_preview = true;
    },
    handleInput(value) {
      if (value.length >= 1000) {
        this.$message.warning(`字数达到1000字！`);
      }
    },
    handleTone(value) {
      this.answer.answer_list[0].text = value
        .trim()
        .split(/\s+/)
        .map((item) => {
          return handleToneValue(item);
        })
        .map((item) =>
          item.map(({ number, con }) => (number && con ? addTone(Number(number), con) : number || con || '')),
        )
        .filter((item) => item.length > 0)
        .join(' ');
    },
  },
};
</script>

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

.essayquestion-preview {
  @include preview;

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

  .write-input {
    font-size: 16px;
  }

  :deep .el-textarea .el-textarea__inner {
    padding-bottom: 25px;
  }

  :deep .el-textarea .el-input__count {
    font-size: 14px;
    background-color: $fill-color;
  }

  .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>
