<template>
  <div class="options__container">
    <div class="options__list">
      <div
        v-for="(item, index) in props.list"
        :key="item.wordId"
        class="options__item"
        @click="showAnimate(item)"
      >
        <div :class="[item?.result, 'options__item__content']" @click="playSound(index)">
          <div class="options__item__content__sort">
            <text>{{ String.fromCharCode(65 + index) }}</text>
          </div>
          <text class="options__item__content__text">
            <AbbrImg v-if="item.valueCategory === 2" :abbr="item.abbr"></AbbrImg>

            {{ item.value }}</text
          >
          <div v-show="props?.result === question_wrong && titleType === 2" class="yinbiao">
            <Horn
              v-if="item.accent"
              :ref="setItemRef(index)"
              :src="item.accent"
              :autoplay="false"
            />
            <div class="yinbiao-text">{{ item.wordAccentSpell }}</div>
          </div>
          <div v-if="item?.result" class="options__item__content__result">
            <div v-if="item?.result === question_right" class="right">
              <img class="icon__result" :src="tick" />
            </div>
            <div v-if="item?.result === question_wrong" class="wrong">
              <img class="icon__result" :src="cross" />
            </div>
          </div>
        </div>
        <div v-show="props?.result === question_wrong" class="options__item__answer">
          <div class="options__item__answer__wrap">
            <AbbrImg v-if="item.tipsCategory === 2" :abbr="item.abbr"></AbbrImg>

            <text>{{ item.tips }}</text>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { question_right, question_wrong } from '../..'
import { single_choice_cn } from '../../word-table/test/components/single-choice'
import type { Option } from '../interface'
import Horn from '../../../../../components/HornC.vue'

const props = defineProps<{
  list?: Array<Option>
  result: string | null
  titleType: number
}>()
const emit = defineEmits<(e: 'selected', answer: boolean, optionsItem: Option) => void>()
const isShowStar = ref(true)
const OSS_URL = import.meta.env.VITE_OSS_URL

const cross = `${OSS_URL}/xuexiaole_clinet/normalMode/cross.png`
const tick = `${OSS_URL}/xuexiaole_clinet/normalMode/tick.png`

const refGroup = ref<anyObj[]>([])

function showAnimate(item: Option) {
  isShowStar.value = true
  emit('selected', item.answer, item)
}

function playSound(index: number) {
  if (props?.result === question_wrong && props.titleType === single_choice_cn) {
    refGroup.value[index].handlePlay()
  }
}

function setItemRef(index: number) {
  return (el: anyObj) => {
    refGroup.value[index] = el
  }
}

watch(
  () => props.result,
  () => {
    if (props.result === question_right) {
      setTimeout(() => {
        isShowStar.value = false
      }, 1000)
    }
  },
)
</script>
<style lang="scss" scoped>
$red: #d9574e;

* {
  box-sizing: border-box;
}

.options__container {
  position: relative;
  user-select: none;

  .options__list {
    .options__item {
      position: relative;
      cursor: pointer;

      & + .options__item {
        margin-top: 3.83vh;
      }

      .options__item__content {
        color: var(--grey-2, rgba(0, 0, 0, 0.75));
        padding: 0.33vh 44px;
        border-radius: 3.33vh;
        border: 0.33vh solid transparent;
        display: inline-flex;

        &.right {
          border-color: #8fcc00;
          cursor: auto;
          transition: all 0.5s ease;

          .options__item__content__sort {
            border-color: #8fcc00;
            background-color: #c1f052;
            color: #fff;
          }

          .icon__result {
            opacity: 0;
            animation: show-icon 0.4s linear 0s forwards;
          }
        }

        &.wrong {
          border: 0.33vh dashed #bf4d45;
          background: #ffd6d6;
          cursor: auto;
          transition: all 0.5s ease;

          .options__item__content__sort {
            border-color: #d9574e;
            background-color: #d9766f;
            color: #fff;
          }

          .icon__result {
            opacity: 0;
            animation: show-icon 0.5s linear 0.3s forwards;
          }
        }

        .options__item__content__sort {
          width: 6vh;
          height: 6vh;
          line-height: 6vh;
          flex-shrink: 0;
          margin-right: 24px;
          border: 0.33vh solid #d9d163;
          border-radius: 50%;
          text-align: center;

          font-size: 3.33vh;
        }

        .options__item__content__text {
          font-size: 2.83vh;
          line-height: 4.17vh;
          padding: 0.83vh 0;
          word-break: break-all;
          display: flex;
          align-items: center;
        }
        .yinbiao {
          display: flex;
          align-items: center;
          margin-left: 18px;
          .horn {
            // margin-right: 12px;
            pointer-events: none;
          }
          .yinbiao-text {
            font-size: 2.17vh;
            color: #666;
          }
        }

        .options__item__content__result {
          width: 4vh;
          height: 4vh;
          flex-shrink: 0;
          margin: 1vh 0 1vh 32px;
          font-size: 0;

          .icon__result {
            width: 4vh;
            height: 4vh;
          }
        }
      }

      .options__item__answer {
        display: inline-block;
        margin-left: 14px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0;
        vertical-align: middle;

        &__wrap {
          display: flex;
          /*设置子元素的宽度不自动继承父元素*/
          width: fit-content;
          /*设置子元素的宽度自适应*/
          width: -webkit-fit-content;
          width: -moz-fit-content;
          border-radius: 0.83vh;
          background: #fff01f;
          opacity: 0;
          animation: animate__fadeIn 0.3s linear 0.5s forwards;
          padding: 0.17vh 14px 0.17vh 10px;
          margin-top: 0.5vh;
          word-break: break-all;
        }

        text {
          margin-left: 8px;
          color: rgba(0, 0, 0, 0.65);
          font-size: 2.67vh;
        }
      }
    }
  }

  .getStar {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 700px;
    height: 66.67vh;
  }
}

@keyframes animate__fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes show-icon {
  0% {
    display: inline-block;
    transform: scale(0.3);
    opacity: 0;
  }

  60% {
    display: inline-block;
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    display: inline-block;
    transform: scale(1);
    opacity: 1;
  }
}
</style>
