<template>
  <div class="page__content">
    <div class="page__content__left hidden_scroll">
      <!-- 单词题型/第一轮 -->
      <template v-if="currentLevel.levelType === 1">
        <div class="left_content">
          <div class="word">
            <div class="spell">
              <AbbrImg v-if="currentLevel.titleCategory === 2" :abbr="currentLevel.abbr"></AbbrImg>
              {{ currentLevel.title }}
            </div>
            <div v-if="currentLevel.accent" class="horn pointer" @click="playAccent">
              <!-- <ShowLottie
                                name="sound_play"
                                :autoplay="false"
                                :isPlay="isPlay"
                                width="100%"
                                height="100%"
                            /> -->
              <Horn :active="isPlay"></Horn>
            </div>
          </div>
          <div v-if="currentLevel.titlePicture" class="illustration">
            <LazyLoad :src="currentLevel.titlePicture" @onTapEnlargeImg="tapEnlargeImg" />
          </div>
          <EnlargePicture
            v-if="showEnlarge"
            v-model="showEnlarge"
            :picture="currentLevel?.titlePicture"
          />
        </div>
      </template>
      <!-- 句子题型/第二轮 -->
      <template v-else>
        <div class="left_content">
          <div class="round-3">
            <div class="sentence">
              <AbbrImg v-if="currentLevel.titleCategory === 2" :abbr="currentLevel.abbr"></AbbrImg>
              <span v-html="topic"></span>
            </div>
            <div v-if="currentLevel.accent" class="horn" @click="playAccent">
              <!-- <ShowLottie
                                name="sound_play"
                                :autoplay="false"
                                :isPlay="isPlay"
                                width="100%"
                                height="100%"
                            /> -->
              <Horn :active="isPlay" :width="60"></Horn>
            </div>
          </div>
          <div class="chinese">{{ currentLevel?.titleTips }}</div>
          <div v-if="currentLevel.titlePicture" class="illustration">
            <LazyLoad :src="currentLevel.titlePicture" @onTapEnlargeImg="tapEnlargeImg" />
          </div>
          <div class="explain_form_box">
            <div
              v-show="
                answer.data.result === question_right &&
                currentLevel.sentenceMeaningWordFormLabel &&
                currentLevel.sentenceMeaningWordFormLabel !== 1
              "
              class="explain_form"
            >
              <span class="form">{{ currentLevel.sentenceMeaningWordSpell }}</span>
              <span class="prototype">{{ currentLevel.wordSpell }}</span>
              <span class="form_name">{{
                WORD_LABEL[currentLevel.sentenceMeaningWordFormLabel - 1] || WORD_LABEL[0]
              }}</span>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="page__content__line"></div>
    <div class="page__content__right">
      <div v-show="!showNext">
        <div class="game-props__list">
          <div
            v-if="propsNum?.glassNum"
            class="game-props__item pointer"
            @click="() => (answer.data.result === question_right ? null : useProp(1))"
          >
            <ShowLottie
              ref="glassRef"
              class="game-props__item__icon"
              name="glass"
              :autoplay="false"
              :loop="false"
            />
            <div class="game-props__item__num">x{{ propsNum?.glassNum }}</div>
          </div>
          <div v-else class="game-props__item--gray">
            <img class="image" mode="aspectFit" lazy-load :src="props_glass_gray" />
          </div>
          <div
            v-if="propsNum?.bombNum"
            class="game-props__item pointer"
            @click="() => (answer.data.result === question_right ? null : useProp(2))"
          >
            <ShowLottie
              ref="bombRef"
              class="game-props__item__icon"
              name="bomb"
              :autoplay="false"
              :loop="false"
            />
            <div class="game-props__item__num">x{{ propsNum?.bombNum }}</div>
          </div>
          <div v-else class="game-props__item--gray">
            <img class="image" mode="aspectFit" :src="props_bomb_gray" />
          </div>
          <div
            class="game-props__item pointer"
            @click="
              () => {
                $emit('clickSurrender')
                answer.data.result === question_right ? null : useProp(3)
              }
            "
          >
            <ShowLottie
              ref="surrenderRef"
              class="game-props__item__icon"
              name="surrender"
              :autoplay="false"
              :loop="false"
            />
          </div>
        </div>
      </div>
      <div>
        <div class="btn__detail__box">
          <div v-show="showNext" class="btn__detail">
            <span
              :class="['t-icon', wordType ? 't-icon-a-shengliang' : 't-icon-a-Property1an1']"
              @click="handleWords"
            >
            </span>
            <!-- <Horn
                            v-if="currentLevel.titleCategory === 4 && currentLevel.wordAccent"
                            :src="currentLevel.wordAccent"
                        ></Horn> -->
          </div>
          <div class="btn__detail__text">
            <AbbrImg :abbr="currentLevel.abbr"></AbbrImg>
            {{ currentLevel?.wordSimpleZnDesc }}
            <Horn
              v-if="!showNext && currentLevel.titleCategory === 4 && currentLevel.wordAccent"
              :active="isWordPlay"
              style="margin-left: 20px"
              @click="wordPlay"
            ></Horn>
          </div>
          <div v-show="showNext" class="yinbiao" @click="wordPlay">
            <Horn
              v-if="currentLevel.titleCategory === 4 && currentLevel.wordAccent"
              :active="isWordPlay"
              :width="60"
            ></Horn>
            <div class="yinbiao-text">{{ currentLevel.wordAccentSpell || '' }}</div>
          </div>
        </div>
      </div>
      <div class="input__list__box">
        <div class="input__list">
          <div
            v-for="(item, index) in inputList.data.length"
            :key="item + index"
            :class="[
              'input__item',
              answer.data.result,
              {
                inputting: index === inputList.data.index && inputList.data.enable,
                animate__prop: answer.data.prop,
              },
            ]"
            :style="{
              '--delay': 0.3 * index + 's',
              width: cellSize,
              height: cellSize,
              marginRight: index === inputList.data.length - 1 ? '' : cellGap,
            }"
          >
            {{ inputList.data.queen[index]?.value }}
          </div>
          <div
            v-show="inputList.data.queen.length > 0 && answer.data.result !== question_right"
            class="closeBtn pointer"
            @click="inputList.backspace()"
          >
            <img :src="btn_del" />
          </div>
        </div>
      </div>
      <div
        v-if="!isWordTest"
        :class="{
          char__list: true,
          char__list__animate: propPolish,
        }"
      >
        <div
          v-for="(item, index) in currentLevel.charList"
          :key="item.value + index"
          class="char__item__box"
        >
          <div
            :class="{
              char__item: true,
              char__item__hidden: item.prop ? false : item.selected,
              char__item__prop: item.prop,
            }"
            @click="inputList.choose(item)"
          >
            {{ item.value }}
          </div>
        </div>
      </div>
      <Keyboard
        v-if="currentLevel.charList && isWordTest && answer.data.result !== question_right"
        :keyList="currentLevel.charList"
        @chooseAnswer="inputList.choose($event)"
      ></Keyboard>
    </div>
    <div v-if="show_bomb_animate" class="page__bomb"></div>
  </div>
</template>
<script setup lang="ts">
// import { onUnload } from '@dcloudio/uni-app';
import { watch, ref, nextTick, computed } from 'vue'
import type { Level } from '../interface'
import { storeToRefs } from 'pinia'
import { useHardModeStore } from '@/stores/learnWord/useLearnWordStore'
import { useAnswer, WordTest, onNetLoading } from '../hooks/useAnswer'
import LazyLoad from '../../../../../components/LazyLoad.vue'
import useAnimate from '../hooks/useAnimate'
// import PartOfSeech from '@/components/PartOfSpeech/PartOfSpeech.vue';
import { useAudio } from '@/hooks'

import wordDetailApi from '@/api/subject/wordDetail'
import Keyboard from './Keyboard.vue'
import { question_right } from '../..'

const props = defineProps<{
  currentLevel: Level
  isWordTest?: boolean
  modelValue?: boolean

  handleRight: () => void
}>()
const emit = defineEmits([
  'onCloseDetailPop',
  'handleOpenMask',
  'onTapEnlargeImg',
  'clickSurrender',
  'update:modelValue',
])
watch(
  () => props.isWordTest,
  nv => {
    WordTest.value = nv
  },
  {
    immediate: true,
  },
)

const OSS_URL = import.meta.env.VITE_OSS_URL

const btn_del = `${OSS_URL}/xuexiaole_clinet/normalMode/btn_del.png`
const props_bomb_gray = `${OSS_URL}/xuexiaole_clinet/normalMode/props_bomb_gray.png`
const props_glass_gray = `${OSS_URL}/xuexiaole_clinet/normalMode/props_glass_gray.png`

const showEnlarge = ref(false)
const wordType = ref(false)
const showMaskRef = ref(true)
const { gameProps, inputList, answer, showNext } = useAnswer(
  props.handleRight,
  {
    playAccent: playAccent,
  },
  props.isWordTest,
)
const propsNum = useHardModeStore()
const { glassNum, bombNum } = storeToRefs(propsNum)
const WORD_LABEL = [
  '原型',
  '第一人称单数',
  '第三人称单数',
  '一般过去式',
  '过去分词',
  '现在分词',
  '复数形式',
  '比较级',
  '最高级',
]
const isWordPlay = ref(false)

const { bombRef, glassRef, surrenderRef, show_bomb_animate, propPolish, useProp } = useAnimate(
  {
    1: gameProps.glass.useEffect,
    2: gameProps.bomb.useEffect,
    3: gameProps.flag.useEffect,
  },
  {
    glassNum,
    bombNum,
  },
  inputList,
)

const isPlay = ref(false)
// 图片放大
function tapEnlargeImg() {
  if (props.currentLevel.titlePicture) {
    emit('onTapEnlargeImg', props.currentLevel.titlePicture)
  }
}
async function playAccent() {
  if (!props.currentLevel.accent) return
  await nextTick()
  isPlay.value = true
  useAudio({
    url: props.currentLevel.accent as string,
    autoplay: true,
    onEnded() {
      isPlay.value = false
    },
  })
}

function wordPlay() {
  isPlay.value = false
  isWordPlay.value = true
  useAudio({
    url: props.currentLevel.wordAccent,
    autoplay: true,
    onEnded() {
      isWordPlay.value = false
    },
  })
}

const handleWords = () => {
  wordType.value = !wordType.value
  showMaskRef.value = true
  emit('handleOpenMask', wordType.value)
  wordDetailApi
    .operateTag({
      id: props.currentLevel.wordId,
      meaningId: props.currentLevel.meaningId,
      levelId: props.currentLevel.levelId,
      knowFlag: null,
      strangeFlag: wordType.value ? 1 : 0,
    })
    .then(res => {
      console.log(res)
    })
    .catch(error => {
      console.log(error)
      showMaskRef.value = false
    })
}

const topic = computed(() => {
  if (answer.data.result === question_right) {
    return props.currentLevel.title?.replace(
      '_____',
      `<span style="color: #99d609;text-decoration:underline; text-underline-offset:6px">${props.currentLevel.sentenceDisplaySpell}</span>`,
    )
  } else {
    return props.currentLevel.title
  }
})

watch(
  () => onNetLoading.value,
  nv => {
    emit('update:modelValue', nv)
  },
  {
    immediate: true,
  },
)

/* rem 方法 */
const remUnit = 19.2
const cellSize = computed(() => {
  if (inputList.data.length < 8) {
    return ''
  } else {
    return (690 / inputList.data.length - 12) / remUnit + 'vw'
  }
})

const cellGap = computed(() => {
  if (cellSize.value) {
    return (
      (690 / remUnit - parseFloat(cellSize.value) * inputList.data.length) /
        (inputList.data.length - 1) +
      'vw'
    )
  } else {
    return 20 / remUnit + 'vw'
  }
})

watch(
  () => props.currentLevel,
  newValue => {
    answer.load(newValue)
    wordType.value = newValue.strangeWord === 1 ? true : false
    if (newValue.accent) {
      playAccent()
    }
  },
  { immediate: true },
)

onUnmounted(() => {})
</script>
<style lang="scss" scoped>
@use '../styles/page.scss' as *;
@use '../styles/animate.scss' as *;

.illustration {
  margin-top: 3.33vh;
}

.t-icon {
  cursor: pointer;
  width: 8.33vh;
  height: 8.33vh;
}
.btn__detail__text {
  display: flex;
  align-items: center;
  img {
    height: 3.83vh;
    margin-right: 10px;
    vertical-align: middle;
  }
  .icon {
    margin-left: 20px;
  }
}
.round-3 {
  .sentence {
    img {
      vertical-align: middle;
      margin-right: 20px;
    }
    :deep(.horn) {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
