<template>
  <div class="readSentence">
    <div class="title">
      <div class="sort">
        <span>{{ index + 1 }}</span>
      </div>
      <div class="enSenc">
        <span v-for="(item, index) in data.sentence" :key="index" @click="showWordDetail(item)">
          {{ item }}
        </span>
      </div>
    </div>
    <div class="options">
      <div
        v-for="(i, n) in data.options"
        :key="i.id"
        :class="{
          'options-item': true,
          select: clickNum === n,
          isTrue: showNext && i.isRight,
          isError: errorNum === n && showNext,
        }"
        @click="pickAnswer(i, n)"
      >
        <span class="options-title">
          {{ ['A', 'B', 'C', 'D'][n] }}
        </span>
        {{ i.optionContent }}
        <div
          v-if="showNext && (errorNum === n || i.isRight)"
          class="img"
          :style="{
            backgroundImage: i.isRight ? tick : cross,
          }"
        ></div>
      </div>
    </div>
    <!-- <div v-if="showNext" class="analysis">
            <div class="title">解析：</div>
            <div class="content">
                细节理解题。根据第一句Mike is an English boy 可知迈克来自英国，故选B
            </div>
        </div> -->
  </div>
</template>

<script lang="ts" setup>
import type { sentenceChoose, optionType } from '../interface/interface'
// import { useSound } from '@/hooks';
import { useRoute } from 'vue-router'

const props = defineProps<{
  data: sentenceChoose
  index: number
  isEnd: boolean
  showNext: boolean
  answer: anyObj
}>()

const emits = defineEmits(['chooseAnswer', 'seeWord'])

const OSS_URL = import.meta.env.VITE_OSS_URL
const cross = `url(${OSS_URL}/xuexiaole_clinet/normalMode/cross.png)`
const tick = `url(${OSS_URL}/xuexiaole_clinet/normalMode/tick.png)`
const route = useRoute()
// const showAnswer = ref(false);
const clickNum = ref<number>()
const errorNum = ref<number>()
// 选择选项
function pickAnswer(item: optionType, idx: number) {
  if (props.showNext || clickNum.value === idx) return
  errorNum.value = undefined
  // showAnswer.value = true;
  emits('chooseAnswer', { number: idx, isRight: item.isRight })
  // useSound(`${OSS_URL}/sound/touch_effects.mp3`);
  clickNum.value = idx
  if (!item.isRight) {
    errorNum.value = idx
  }
  // if (item.isRight) {
  //     // 答对
  //     useSound(`${OSS_URL}/xuexiaole_clinet/sound/right.mp3`);
  // } else {
  //     errorNum.value = idx;
  //     // 答错
  //     useSound(`${OSS_URL}/xuexiaole_clinet/sound/error.mp3`);
  // }
}
function showWordDetail(item: string) {
  if (!props.isEnd) return
  emits('seeWord', {
    id: '1',
    word: item,
  })
}

onMounted(() => {
  if (route.query.id) {
    // answer
    if (!props.answer.isRight) {
      console.log(props.answer)

      errorNum.value = props.answer.number
    }
  }
})
</script>

<style lang="scss" scoped>
.readSentence {
  color: #666;
  font-family: 'Droid Serif';
  font-size: 2.33vh;
  font-style: normal;
  line-height: 3.5vh; /* 150% */
  margin-top: 2vh;

  .title {
    display: flex;
    font-weight: 700;
    .sort {
      display: flex;
      flex-shrink: 0;
      width: 3.5vh;
      height: 3.5vh;
      justify-content: center;
      align-items: center;
      color: #666;
      font-family: 'Droid Serif';
      font-size: 2.17vh;
      font-weight: 700;
      border-radius: 50%;
      margin-right: 8px;
      padding-right: 4px;
      position: relative;
      box-sizing: content-box;
      // font-style: italic;
      transform: skew(-15deg);

      span {
        position: relative;
        display: block;
        z-index: 2;
        width: 42px;
        height: 3.5vh;
        text-align: center;
        padding-right: 0px;
      }
      &:after {
        position: absolute;
        font-size: 2.17vh;

        // left: -6px;
        top: 0.08vh;
        content: '';
        z-index: 1;
        height: 3.17vh;
        width: 3.17vh;
        background-color: #d6f2ff;
        transform: skew(15deg) rotate(45deg);
        border-radius: 0.33vh;
      }
    }
    span {
      padding-right: 12px;
      cursor: pointer;
    }
    .enSenc {
      display: flex;
      flex-wrap: wrap;
    }
  }
  .options {
    margin-top: 1.33vh;
    display: flex;
    flex-wrap: wrap;
    .options-item {
      cursor: pointer;
      display: flex;
      padding: 0.67vh 16px;
      align-items: center;
      font-size: 2.33vh;
      font-weight: 400;
      margin-right: 24px;
      min-width: calc(50% - 24px);
      margin-top: 0.83vh;
      border: 0.33vh dashed transparent;
      padding-right: 76px;
      position: relative;
      &:nth-child(2n) {
        // margin-right: 0;
      }
      .options-title {
        // border: 4px solid #eee;
        background-color: #eee;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Arial;
        font-size: 2.96vh;
        font-weight: 400;
        line-height: 4.44vh;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        margin-right: 24px;
        height: 5.33vh;
        width: 5.33vh;
      }
      .img {
        height: 5vh;
        width: 60px;
        background-size: contain;
        background-repeat: no-repeat;
        margin-left: auto;
        position: absolute;
        right: 10px;
      }

      &.isTrue,
      &.isError {
        border-radius: 1.33vh;
        color: $font-color;

        .options-title {
          color: #fff;
        }
      }
      &.select {
        // color: #5c8de5;
        border: 0.33vh solid #70d2ff;
        border-radius: 1.33vh;
        background-color: #f0faff;
        color: $font-color;

        .options-title {
          border-color: #70d2ff;
          background-color: #ade5ff;
          color: white;
        }
      }
      &.isTrue {
        border: 0.33vh solid #8fcc00;
        background-color: #fbfff2;

        .options-title {
          border-color: #8fcc00;
          background-color: #c1f052;
        }
      }
      &.isError {
        border: 0.33vh dashed #d9574e;
        background-color: #fff2f2;
        .options-title {
          border-color: #d9574e;
          background-color: #d9766f;
        }
      }
    }
  }
  .analysis {
    background-color: #f5f6fe;
    border-radius: 1.5vh;
    padding: 1.33vh;
    color: $font-color;
    font-size: 2.33vh;
    line-height: 3.5vh; /* 150% */
    font-family: OPPOSans;
    margin: 0.67vh 0 2.67vh;

    .title {
      &::before {
        content: '';
        display: block;
        margin-right: 16px;
        width: 10px;
        background-color: #b1b5ff;
        border-radius: 0 0.58vh 0.58vh 0;
      }
    }
    .content {
      margin-left: 26px;
      margin-top: 0.67vh;
    }
  }
}
</style>
