<script setup lang="ts">
import { choiceEnum } from '@/types/enum'
const props = withDefaults(
  defineProps<{
    optionList: string[][]
    answer?: string | null
    submitAnswer?: string
    reportFlag: number // 0 | 1
    isDeadline?: boolean
  }>(),
  { isDeadline: true },
)

const emit = defineEmits(['submit'])

const selectChoice = ref<string[]>([])

function handleSelect(idx: number, cidx: number) {
  if (props.reportFlag) return
  if (selectChoice.value[idx] !== choiceEnum[cidx]) {
    selectChoice.value[idx] = choiceEnum[cidx]
    // 提交答案
    emit('submit', { submitAnswer: selectChoice.value.join(',') })
  }
}

watch(
  () => props.optionList,
  () => {
    selectChoice.value = []
    if (props.submitAnswer) {
      selectChoice.value = props.submitAnswer.split(',')
    }
    props.optionList.forEach((_i, idx) => {
      selectChoice.value[idx] || (selectChoice.value[idx] = '')
    })
  },
  {
    immediate: true,
  },
)

const answerList = computed(() => props.answer?.split(','))

const content = computed(() => {
  return (str: string) => {
    return str?.replace(/http:\/\//gi, 'https://').replace(/&nbsp;/g, ' ') || ''
  }
})
</script>
<template>
  <div>
    <div class="cloze-test choice-box">
      <div v-for="(i, idx) in optionList" :key="idx" class="cloze-test-item">
        <div class="no">({{ idx + 1 }})</div>
        <div class="children-box">
          <div
            v-for="(item, cidx) in i"
            :key="item"
            :class="{
              'cloze-test-item-children': true,
              pointer: true,
              active: !reportFlag && selectChoice[idx] === choiceEnum[cidx],
              success: isDeadline && reportFlag && answerList![idx] === choiceEnum[cidx],
              fail: isDeadline && reportFlag && selectChoice[idx] === choiceEnum[cidx],
            }"
            @click="handleSelect(idx, cidx)"
          >
            <div class="item">{{ choiceEnum[cidx] }}</div>
            <latex-text class="content hidden_scroll_x" :text="content(item)"></latex-text>
            <!-- <div class="content hidden_scroll_x" v-html="content(item)"></div> -->
          </div>
        </div>
      </div>
    </div>
    <slot name="markAnswer"></slot>
  </div>
</template>
<style scoped lang="scss">
.cloze-test {
  // height: 100%;
  // overflow-y: auto;
  &-item {
    .no {
      color: $font-color;

      font-family: $font-special;
      font-size: 2.67vh;
      font-style: normal;
      font-weight: 400;
      line-height: 4vh; /* 150% */
      margin-bottom: 1.33vh;
    }
    .children-box {
      display: flex;
      flex-wrap: wrap;
    }
    &-children {
      margin-right: 16px;
      width: calc(50% - 16px);
      // height: 124px;
      flex-shrink: 0;
      border-radius: 1.67vh;
      border: 0.33vh solid #bed5fe;
      background: #f7faf9;
      display: flex;
      align-items: center;
      margin-bottom: 2vh;
      overflow: hidden;
      &:nth-child(2n) {
        margin-right: 0;
      }
      .item {
        width: 78px;
        height: 100%;
        line-height: 10.33vh;
        flex-shrink: 0;
        background-color: #f1f6fe;
        border-right: 0.33vh solid #bed5fe;
        text-align: center;
        color: #669cfe;
        font-family: Arial;
        font-size: 3.33vh;
        font-style: normal;
        font-weight: 400;
      }
      .content {
        flex: 1;
        color: $font-color;
        font-family: Arial;
        font-size: 2.67vh;
        font-style: normal;
        font-weight: 400;
        line-height: 4vh; /* 150% */
        padding-left: 32px;
        white-space: pre-wrap;
        // word-break: keep-all;
      }
      &.active {
        border-color: #669cfe;
        .item {
          color: #fff;
          background-color: #a5c5fe;
          border-color: #669cfe;
        }
      }
      &.fail {
        border-color: #f00a0a;
        .item {
          color: #f00a0a;
          background-color: #febebf;
          border-color: #f00a0a;
        }
      }
      &.success {
        border-color: #8fcc00;
        .item {
          color: #8fcc00;
          background-color: #ddff8c;
          border-color: #8fcc00;
        }
      }
    }
  }
}
</style>
