<script setup lang="ts">
import { choiceEnum } from '@/types/enum'

const props = defineProps<{
  optionList: string[]
}>()
</script>
<template>
  <div v-if="optionList.length > 1" class="choice">
    <div v-for="(i, idx) in optionList" :key="idx" class="choice-item cloze_test-item">
      <div class="choice-item-no">({{ idx + 1 }})</div>
      <div class="choice-item-main">
        <div v-for="(item, cidx) in i" :key="item" class="choice-item-main-content">
          <span class="item">{{ choiceEnum[cidx] }}. </span>
          <span class="content" v-html="item?.replace(/http:\/\//gi, 'https://') || ''"></span>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="choice">
    <div v-for="(i, idx) in optionList[0]" :key="idx" class="choice-item">
      <span class="item">{{ choiceEnum[idx] }}.</span>
      <span class="content" v-html="i?.replace(/http:\/\//gi, 'https://') || ''"></span>
    </div>
  </div>
</template>
<style scoped lang="scss">
.choice-item {
  color: $font-color;
  font-family: OPPOSans;
  font-size: 2.67vh;
  line-height: 4vh;
  margin-bottom: 1.33vh;
  &-main {
    display: flex;
    flex-wrap: wrap;
    &-content {
      margin: 0 24px;
      .item {
        // margin-right: 12px;
        color: #679cfe;
      }
    }
  }
  &-no {
    color: black;
  }
}
.cloze_test-item {
  display: flex;
}
</style>
