<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="talkpictrue-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>
    <div class="content">
      <div v-for="(item, index) in data.option_list" :key="index" class="content-item">
        <!-- <el-image
          v-if="pic_list[item.picture_file_id]"
          style="width: 370px; height: 238px"
          :src="pic_list[item.picture_file_id]"
          fit="contain"
        /> -->
        <div class="img-box">
          <img
            v-if="pic_list[item.picture_file_id]"
            :src="pic_list[item.picture_file_id]"
            style="max-width: 370px; max-height: 238px"
          />
        </div>

        <div v-if="item.picture_info" class="content-box">
          <span class="option-number">{{ computeOptionMethods[data.option_number_show_mode](index) }} </span>
          <p class="pic-info rich-text" v-html="sanitizeHTML(item.picture_info)"></p>
        </div>
        <div class="content-box" style="align-items: center">
          <span v-if="!item.picture_info" class="option-number">
            {{ computeOptionMethods[data.option_number_show_mode](index) }}
          </span>
          <!-- 语音作答 -->
          <div v-if="isEnable(data.property.is_enable_voice_answer) && answer.answer_list[index]" class="sound-box">
            <SoundRecordPreview
              :disabled="disabled"
              :wav-blob.sync="answer.answer_list[index].audio_file_id"
              type="small"
            />
          </div>
        </div>

        <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(item.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>
    </div>
  </div>
</template>

<script>
import PreviewMixin from './components/PreviewMixin';
import { GetFileStoreInfo } from '@/api/app';
import SoundRecordPreview from './components/common/SoundRecordPreview.vue';
import { computeOptionMethods } from '@/views/exercise_questions/data/common';

export default {
  name: 'TalkPictruePreview',
  components: {
    SoundRecordPreview,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      computeOptionMethods,
      pic_list: {},
      active_index: 0,
    };
  },
  watch: {
    data: {
      handler(val) {
        if (!val || this.data.type !== 'talk_picture') return;
        this.handleData();
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.handleData();
  },
  methods: {
    // 初始化数据
    handleData() {
      this.pic_list = {};
      this.active_index = 0;
      this.data.file_id_list.forEach((item) => {
        GetFileStoreInfo({ file_id: item }).then(({ file_id, file_url }) => {
          this.$set(this.pic_list, file_id, file_url);
        });
      });
      if (!this.isJudgingRightWrong) {
        this.data.option_list.forEach((item) => {
          let obj = {
            mark: item.mark,
            audio_file_id: '',
          };
          this.answer.answer_list.push(obj);
        });
      }
    },
    changeImg(index) {
      this.active_index = index;
    },
  },
};
</script>

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

.talkpictrue-preview {
  @include preview;

  :deep p {
    margin: 0;
  }

  .content {
    display: flex;
    column-gap: 8px;
    width: 100%;
    padding-bottom: 24px;
    overflow: auto;

    .img-box {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 238px;
    }

    .pic-title {
      margin: 8px 0 4px;
      font-size: 12px;
      font-weight: 600;
      line-height: 20px;
      color: #000;
      word-break: break-word;
    }

    .pic-info {
      margin: 0;

      // font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
      word-break: break-word;
    }

    .sound-record-wrapper {
      :deep .sound-item-btn {
        background-color: #fff;
      }
    }

    &-right {
      flex: 1;

      .el-textarea {
        height: 276px;
        margin-bottom: 16px;
      }
    }
  }

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

    .reference-title {
      margin: 0 0 10px;
      font-size: 14px;
      font-weight: 400;
      line-height: 32px;
      color: #4e5969;
    }
  }

  .sound-box {
    width: max-content;
    padding: 4px;
    background: $content-color;
    border-radius: 40px;
  }

  .content-box {
    display: flex;
    justify-content: center;
    margin-top: 8px;

    .option-number {
      margin-right: 8px;
      font-size: 16px;
      line-height: 20px;
    }
  }
}

/* 横向滚动条 */
::-webkit-scrollbar {
  height: 5px;
  background-color: #f5f5f5;
}

/* 横向滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 2px;
}

/* 鼠标悬停在滚动条上的滑块 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
</style>
