<template>
  <div v-show="props.status" class="masks">
    <div class="g-container">
      <div class="result">
        <div class="theme">
          <ShowLottie
            name="text_fail"
            width="100%"
            height="100%"
            @getAnimation="ani => ani.playSegments([50, 180])"
          />
        </div>
      </div>
      <div class="text">
        <div class="title">{{ props.levelTitle }} 统计结果</div>
      </div>
      <ResultTable
        :list="props.statList"
        :timeStr="props.timeStr"
        :bombCount="props.bombCount"
        :glassCount="props.glassCount"
        :surrenderCount="props.surrenderCount"
        :allRightCount="props.allRightCount"
        :exp="props.exp"
        :rightRate="props.rightRate"
        @viewDetail="handlePopup"
      ></ResultTable>
      <div class="light">
        <ShowLottie name="light_fail" width="100%" height="100%"></ShowLottie>
      </div>
      <div class="stars">
        <ShowLottie name="star_burst_fail" width="100%" height="100%" :loop="false"></ShowLottie>
      </div>
      <div class="btn__box">
        <div class="btn btn__exit animate__slideInLeft pointer" @click="exit">
          <div class="btn__icon">
            <img :src="img_close" />
          </div>
          <div class="btn__text">退出</div>
        </div>
        <div class="btn btn__next animate__slideInLeft pointer" @click="again">
          <div class="btn__icon animate__animated animate__infinite animate__breath">
            <img :src="img_again" />
          </div>
          <div class="btn__text">再练一次</div>
        </div>
      </div>
    </div>
  </div>
  <div class="wordDetailPopup">
    <van-popup v-model:show="showPop" position="bottom" @maskClick="handleMaskClick">
      <SearchWordPup
        v-if="showPop"
        :wordId="wordIdRef"
        :wordSpell="spellRef"
        :closed="false"
        @tapDown="tapExpand(false)"
      ></SearchWordPup>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import ResultTable from './ResultTable.vue'
import type { Statistics } from '../interface/index'
// import useSoundEffect from '@/hooks/useSoundEffect';
import useCommonAudio from '../../../../../hooks/useCommonAudio.ts'

import { $sleep } from '@/utils/tool'
import { watch } from 'vue'
import SearchWordPup from '../../../strangeBook/components/SearchWordPup.vue'

import useAudio from '../hooks/useAudio.ts'
const props = defineProps<{
  status: boolean
  levelTitle: string
  levelNum?: string
  timeStr: string
  bombCount: number
  glassCount: number
  surrenderCount: number
  allRightCount: number
  rightRate: number
  statList: Array<Statistics>
}>()

const emit = defineEmits(['exit', 'again'])

const OSS_URL = import.meta.env.VITE_OSS_URL

const img_close = `${OSS_URL}/english_client/normalMode/close.png`
const img_again = `${OSS_URL}/english_client/normalMode/again.png`
const sound = useCommonAudio(true)
const audio = useAudio()
const wordIdRef = ref('')
const spellRef = ref('')
const showCircle = ref(false)
const showPop = ref(false)

const height = ref()
const handlePopup = (wordId: string, spell: string) => {
  wordIdRef.value = wordId
  spellRef.value = spell
  showPop.value = true
}

function tapExpand(val: boolean) {
  showPop.value = false
}

function viewVisible(value: any) {
  showCircle.value = value.value
}

function handleStop(event: any) {
  event.stopPropagation() // 阻止事件冒泡
}

// 点击遮罩层触发
function handleMaskClick() {
  showPop.value = false
}
// 窗口高度
function getHeight() {
  height.value = window.innerHeight - 5
  // uni.getSystemInfo({
  //     success: res => {
  //         // windowHeightRpx.value = res.windowHeight * (750 / res.windowWidth);
  //         height.value = res.windowHeight - 5;
  //     },
  // });
}

function exit() {
  sound.play('click.wav')
  emit('exit')
}

function again() {
  sound.play('click.wav')
  emit('again')
}

watch(
  () => props.status,
  async nv => {
    if (nv) {
      audio.play('show_fail.mp3')
      await $sleep(500)
      sound.play('show_nextBtn.mp3')
      await $sleep(500)
      sound.play('show_nextBtn.mp3')
    }
  },
)

onMounted(() => {
  window.onresize = () => {
    getHeight()
  }
  getHeight()
})
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.masks {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.g-container {
  position: relative;
  width: 1462px;
  height: 64.33vh;
  padding: 6.5vh 64px 4vh;
  border-radius: 3.33vh;
  background: #fff;
  .result {
    position: absolute;
    left: 0;
    top: -9.33vh;
    width: 100%;
    display: flex;
    justify-content: center;
    .theme {
      width: 800px;
      height: 25vh;
      margin-left: -90px;
    }
  }
  .megaphone {
    position: absolute;
    top: -6.17vh;
    left: 323px;
    img {
      width: 16.67vh;
      height: 16.67vh;
    }
  }
  .text {
    text-align: center;
    font-family: $font-special;
    margin-bottom: 2vh;
    .title {
      color: #736d20;
      font-size: 3.33vh;
    }
  }
  .light {
    position: absolute;
    left: 50%;
    top: -33.33vh;
    transform: translateX(-50%);
    z-index: -1;
    width: 1300px;
    height: 83.33vh;
  }
  .stars {
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 41.67vh;
  }
  .btn__box {
    width: 12.08vh;
    height: 38vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
  }
  .btn {
    width: 12.08vh;
    padding: 2.67vh 20px;
    border-radius: 0 1.67vh 1.67vh 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .btn__icon img {
      width: 8vh;
      height: 8vh;
    }
    .btn__text {
      color: #d9d163;
      text-align: center;
      font-size: 2vh;
      font-weight: 500;
    }
  }
  .btn__exit {
    height: 16.33vh;
    border: 0.33vh solid #bf4d45;
    border-left: none;
    background-color: #fff2f2;
    animation-delay: 0s;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    .btn__text {
      color: #bf4d45;
    }
  }
  .btn__next {
    height: 21.67vh;
    border: 0.33vh solid #bacc18;
    border-left: none;
    background-color: #fffbc2;
    animation-delay: 0.5s;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    .btn__text {
      color: #bacc18;
    }
  }
}

.wordDetailPopup {
  :deep(.uni-popup .uni-popup__wrapper) {
    .shangxia_icon {
      position: absolute;
      left: calc(50% - 108px);
      top: 0;
      z-index: 9;
      &::before {
        content: '';
        width: 1841px;
        height: 11.08vh;
        background: linear-gradient(180deg, #fffef5 1.38%, rgba(255, 254, 245, 0) 98.79%);
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      .xiala-btn {
        cursor: pointer;
        height: 6.67vh;
        width: 18vh;
        border: 0.33vh solid #d9d163;
        border-radius: 0 0 1.67vh 1.67vh;
        box-sizing: border-box;
        background-color: #fffbc2;
        font-family: $font-text;
        font-size: 2.67vh;
        font-weight: 500;
        color: #ccc018;
        display: flex;
        align-items: center;
        padding: 0 32px;
        filter: drop-shadow(0px 4px 4px rgba(153, 144, 18, 0.2));
        .icon_name {
          width: 4vh;
          height: 4vh;
          position: relative;
          display: inline-block;
        }
        .text {
          flex: 1;
          display: flex;
          justify-content: center;
        }
      }
    }

    .shangxia_icon1 {
      z-index: 99;
    }

    .popup_box {
      border: 0.33vh solid #d9d163;
      background-color: #fffef5;
      border-radius: 3.33vh 3.33vh 0 0;
      overflow-y: scroll;
      width: 100vw;

      /* 隐藏滚动条 */
      &::-webkit-scrollbar {
        display: none;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        background: transparent;
        color: transparent;
      }

      .show_details {
        // width: 1440px;
        width: 1432px;
        margin: auto;
        box-sizing: border-box;
      }
    }
  }
}
</style>
