<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="select-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <ul
        class="option-list"
        :style="{ flexDirection: data.property.arrange_type === arrangeTypeList[0].value ? 'column' : 'row' }"
      >
        <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="checkbox">
            <SvgIcon icon-class="check-mark" width="10" height="7" />
          </span>
          <span class="serial-number">
            {{ i + 1 }}
          </span>
          <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getSelectData, arrangeTypeList } from '@/views/book/courseware/data/select';

import PreviewMixin from '../common/PreviewMixin';

export default {
  name: 'SelectPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      data: getSelectData(),
      arrangeTypeList,
    };
  },
  methods: {
    isAnswer(mark) {
      return this.answer.answer_list.includes(mark);
    },
    selectAnswer(mark) {
      if (this.disabled) return;

      const index = this.answer.answer_list.indexOf(mark);
      if (index === -1) {
        this.answer.answer_list.push(mark);
      } else {
        this.answer.answer_list.splice(index, 1);
      }
    },
    computedAnswerClass(mark) {
      return this.isAnswer(mark) ? ['active'] : [];
    },
  },
};
</script>

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

.select-preview {
  @include preview-base;

  .option-list {
    display: flex;
    flex-flow: column wrap;
    gap: 16px;

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

      .checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        margin-right: 8px;
        cursor: pointer;
        background-color: #fff;
        border: 1px solid #dcdfe6;
        border-radius: 2px;

        .svg-icon {
          display: none;
        }
      }

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

      .content {
        flex: 1;
      }

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

        .checkbox {
          color: #fff;
          background-color: $light-main-color;

          .svg-icon {
            display: block;
          }
        }
      }
    }
  }
}
</style>
