<template>
  <ModuleBase :type="data.type">
    <template #content>
      <ul class="option-list">
        <li v-for="(item, i) in data.option_list" :key="item.mark" class="option-item">
          <span class="serial-number">{{ convertNumberToLetter(i) }}.</span>
          <div class="option-contnet">
            <span :class="['checkbox', { active: isAnswer(item.mark) }]" @click="selectAnswer(item.mark)">
              <SvgIcon icon-class="check-mark" width="10" height="7" />
            </span>
            <RichText v-model="item.content" placeholder="输入内容" :inline="true" :height="32" />
          </div>
          <span class="delete" @click="deleteOption">
            <SvgIcon icon-class="delete-2" width="12" height="12" />
          </span>
        </li>
      </ul>
      <div class="add">
        <SvgIcon icon-class="add-circle" width="14" height="14" />
        <span class="add-button" @click="addOption">增加选项</span>
      </div>
    </template>
  </ModuleBase>
</template>

<script>
import ModuleMixin from '../../common/ModuleMixin';

import { getSelectData, getOption } from '@/views/book/courseware/data/select';

export default {
  name: 'SelectPage',
  mixins: [ModuleMixin],
  data() {
    return {
      data: getSelectData(),
    };
  },
  methods: {
    // 将数字转换为小写字母
    convertNumberToLetter(number) {
      return String.fromCharCode(97 + number);
    },
    /**
     * @description 判断是否为答案
     * @param {string} mark 选项标记
     */
    isAnswer(mark) {
      return this.data.answer.answer_list.includes(mark);
    },
    /**
     * @description 选择答案
     * @param {string} mark 选项标记
     */
    selectAnswer(mark) {
      const index = this.data.answer.answer_list.indexOf(mark);
      if (index === -1) {
        this.data.answer.answer_list.push(mark);
      } else {
        this.data.answer.answer_list.splice(index, 1);
      }
    },
    /**
     * @description 添加选项
     */
    addOption() {
      this.data.option_list.push(getOption());
    },
    /**
     * @description 删除选项
     * @param {number} index 选项索引
     */
    deleteOption(index) {
      this.data.option_list.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.option-list {
  display: flex;
  flex-direction: column;
  row-gap: 8px;

  .option-item {
    display: flex;
    column-gap: 8px;
    align-items: center;
    min-height: 36px;

    .serial-number {
      width: 40px;
      height: 36px;
      padding: 4px 8px;
      color: $text-color;
      background-color: $fill-color;
      border-radius: 2px;
    }

    .option-contnet {
      display: flex;
      flex: 1;
      column-gap: 6px;
      align-items: center;
      padding: 0 12px;
      overflow: hidden;
      background-color: $fill-color;

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

        .svg-icon {
          display: none;
        }

        &.active {
          color: #fff;
          background-color: #000;

          .svg-icon {
            display: block;
          }
        }
      }
    }

    .delete {
      margin-left: 8px;
      cursor: pointer;
    }
  }
}

.add {
  display: flex;
  column-gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;

  .svg-icon {
    cursor: pointer;
  }

  .add-button {
    font-size: 14px;
    color: $main-color;
    cursor: pointer;
  }
}
</style>
