<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="activity-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>
    <UploadFiles
      :fille-number="999"
      file-type-name="文件"
      :max-size="4096"
      upload-type="*"
      :file-id-list="answer.accessory_file_id_list"
      :disabled="disabled"
      @upload="handleUpload"
      @deleteFile="handleDelete"
    />
  </div>
</template>

<script>
import PreviewMixin from './components/PreviewMixin';

import UploadFiles from './components/common/UploadFiles.vue';

export default {
  name: 'ActivityPreview',
  components: {
    UploadFiles,
  },
  mixins: [PreviewMixin],
  data() {
    return {};
  },
  created() {
    this.$set(this.answer, 'accessory_file_id_list', []);
  },
  methods: {
    // 文件上传成功
    handleUpload(fileId) {
      this.answer.accessory_file_id_list.push(fileId);
    },
    // 删除文件
    handleDelete(fileId) {
      this.answer.accessory_file_id_list.splice(this.answer.accessory_file_id_list.indexOf(fileId), 1);
    },
  },
};
</script>

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

.activity-preview {
  @include preview;
}
</style>
