<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="select-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>
    <AudioPlay
      v-if="isEnable(data.property.is_enable_listening) && data.file_id_list.length > 0"
      :file-id="data.file_id_list[0]"
      :show-slider="true"
    />

    <div v-if="isEnable(data.property.is_option_subdivision)" class="option-subdivision">
      <div v-for="item in data.option_list" :key="item.mark" class="option-subdivision-item">
        <div class="option-subdivision-top">
          <span :style="{ fontSize: data.property.option_question_number_font_size }">
            {{ questionNumberEndIsBracket(item.question_number) }}
          </span>
          <span class="rich-text" v-html="sanitizeHTML(item.stem)"></span>
        </div>
        <ul class="option-subdivision-list">
          <li
            v-for="{ content, mark } in item.data_list"
            :key="mark"
            :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
            :class="['option-item', { active: isAnswer(mark, item.mark) }, ...computedAnswerClass(mark, item.mark)]"
            @click="selectAnswer(mark, item.mark)"
          >
            <span class="selectionbox"></span>
            <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
          </li>
        </ul>
      </div>
    </div>

    <ul v-else class="option-list">
      <li
        v-for="({ content, mark }, i) in data.option_list"
        :key="mark"
        :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
        :class="['option-item', { active: isAnswer(mark) }, ...computedAnswerClass(mark)]"
        @click="selectAnswer(mark)"
      >
        <span class="selectionbox"></span>
        <span class="serial-number" :style="{ fontSize: data.property.option_question_number_font_size }">
          {{ computeOptionMethods[data.option_number_show_mode](i) }}
        </span>
        <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
      </li>
    </ul>

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

import PreviewMixin from './components/PreviewMixin';

export default {
  name: 'ListenSelectPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      computeOptionMethods,
    };
  },
  computed: {
    isSubdivision() {
      return isEnable(this.data.property.is_option_subdivision);
    },
  },
  methods: {
    isAnswer(mark, parent_mark) {
      if (isEnable(this.data.property.is_option_subdivision)) {
        return this.answer.answer_list.find((item) => item.mark === parent_mark)?.value_list?.includes(mark);
      }
      return this.answer.answer_list.includes(mark);
    },
    selectAnswer(mark, parent_mark) {
      if (this.disabled) return;
      let answer_list = this.answer.answer_list;
      let index = this.isSubdivision
        ? answer_list.findIndex((item) => item.mark === parent_mark)
        : answer_list.indexOf(mark);
      if (this.data.property.select_type === selectTypeList[0].value) {
        if (this.isSubdivision) {
          if (index === -1) {
            answer_list.push({ mark: parent_mark, value_list: [mark] });
          } else {
            this.$set(this.answer.answer_list[index], 'value_list', [mark]);
          }
        } else {
          this.$set(this.answer, 'answer_list', [mark]);
        }
      }
      if (this.data.property.select_type === selectTypeList[1].value) {
        if (this.isSubdivision) {
          if (index === -1) {
            answer_list.push({ mark: parent_mark, value_list: [mark] });
          } else {
            let mIndex = answer_list[index].value_list.findIndex((item) => item === mark);
            if (mIndex === -1) {
              answer_list[index].value_list.push(mark);
            } else {
              answer_list[index].value_list.splice(mIndex, 1);
            }
          }
          return;
        }
        if (index === -1) {
          answer_list.push(mark);
        } else {
          answer_list.splice(index, 1);
        }
      }
    },
    computedAnswerClass(mark, parent_mark) {
      if (!this.isJudgingRightWrong && !this.isShowRightAnswer) {
        return [];
      }
      let answer_list = this.answer.answer_list;
      let isHas = this.isSubdivision
        ? answer_list.find((item) => item.mark === parent_mark)?.value_list?.includes(mark)
        : answer_list.includes(mark); // 是否已选中的选项
      let isRight = this.isSubdivision
        ? this.data.answer.answer_list.find((item) => item.mark === parent_mark)?.value_list?.includes(mark)
        : this.data.answer.answer_list.includes(mark); // 是否是正确答案

      if (!isHas && this.isShowRightAnswer) {
        return isRight ? ['answer-right'] : [];
      }
      // 判断是否是正确答案
      if (this.isJudgingRightWrong) {
        return isRight ? ['right'] : ['wrong'];
      }
      return [];
    },
  },
};
</script>

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

.select-preview {
  @include preview;

  %option-list,
  .option-list {
    display: flex;
    flex-direction: column;
    row-gap: 16px;

    .option-item {
      display: flex;
      column-gap: 8px;
      align-items: center;
      padding: 12px 24px;
      color: #706f78;
      cursor: pointer;
      background-color: $content-color;
      border-radius: 40px;

      .selectionbox {
        width: 14px;
        min-width: 14px;
        height: 14px;
        min-height: 14px;
        margin-right: 8px;
        border: 2px solid #dcdbdd;
        border-radius: 50%;
      }

      .serial-number {
        font-size: 16pt;
      }

      .content {
        flex: 1;
      }

      &.answer-right {
        background-color: #e8f7f2;

        &::after {
          font-size: 14px;
          color: $right-color;
          content: '正确答案';
        }
      }

      &.active {
        color: #34343a;
        background-color: $main-active-color;

        .selectionbox {
          border-color: $light-main-color;
          border-width: 4px;
        }

        &.right {
          background-color: $content-color;
          border: 1px solid $right-color;

          &::after {
            font-size: 14px;
            color: $right-color;
            content: '已选';
          }
        }

        &.wrong {
          background-color: $content-color;
          box-shadow: 0 0 0 1px $error-color;

          &::after {
            font-size: 14px;
            color: #a09fa6;
            content: '已选';
          }
        }
      }
    }
  }

  .option-subdivision {
    display: flex;
    flex-direction: column;
    row-gap: 24px;

    &-item {
      display: flex;
      flex: 1;
      flex-direction: column;
      row-gap: 8px;

      .option-subdivision-top {
        display: flex;
        column-gap: 24px;
        align-items: center;

        .rich-text {
          flex: 1;
        }
      }

      :deep p {
        margin: 0;
      }
    }

    &-list {
      @extend %option-list;

      .serial-number {
        font-size: 16pt;
      }

      flex-direction: row;
      column-gap: 24px;
      align-items: center;

      .option-item {
        flex: 1;
      }

      :deep p {
        margin: 0;
      }
    }
  }
}
</style>
