<template>
  <div v-if="status" class="masks">
    <div class="wrapper">
      <div class="result">
        <div class="theme">
          <ShowLottie name="text_success" width="100%" height="100%" :loop="false" />
        </div>
      </div>
      <div class="g-container">
        <div class="text">
          <div class="title">{{ levelTitle }} 统计结果</div>
          <div class="info">
            <template v-if="breakThrough">
              <div v-if="breakTimeStr" class="breakRecord">
                通关耗时：{{ breakTimeStr }}（打败了<text class="weight">{{ proportion }}</text
                >的人！）
              </div>
              <div v-else class="breakRecord">
                打败了<text class="weight">{{ proportion }}</text
                >的人！
              </div>
            </template>
            <!-- <div v-if="exp > 0" class="exp_text">
                            <text class="exp_label">经验值</text>
                            <img class="icon_exp" :src="img_icon_exp" />
                            <text class="exp_value">+{{ exp }}</text>
                        </div> -->
            <div v-for="item in rewardList" :key="item.iconname" class="exp_text">
              <span class="exp_label">{{ item.name }}</span>
              <img class="icon_exp" :src="item.iconname" />
              <span class="exp_value">+{{ item.number || 0 }}</span>
            </div>
          </div>
        </div>
        <ResultTable
          :list="statList"
          :style="{ 'max-height': '37.6vh' }"
          @viewDetail="handlePopup"
        ></ResultTable>
      </div>
      <div v-if="breakThrough" class="seal__container pointer-none">
        <div class="seal">
          <ShowLottie name="seal" width="100%" height="100%" :loop="false"></ShowLottie>
        </div>
        <div class="star_seal">
          <ShowLottie
            name="star_burst_seal"
            width="100%"
            height="100%"
            :delay="1000"
            :loop="false"
          ></ShowLottie>
        </div>
      </div>
      <div class="light">
        <ShowLottie name="light_success" width="100%" height="100%" :delay="800"></ShowLottie>
      </div>
      <div v-if="breakThrough" class="light_break">
        <ShowLottie
          name="light_break"
          width="100vw"
          height="100vh"
          :rendererSettings="{ preserveAspectRatio: 'xMidYMid slice' }"
        ></ShowLottie>
      </div>
      <div class="star__list pointer-none">
        <div v-for="item in 3" :key="item" class="star__item">
          <ShowLottie
            v-if="item <= simpleStar"
            name="star_result_fill"
            width="140%"
            height="140%"
            :delay="320 * item"
            @getAnimation="ani => ani.playSegments([36, 180])"
          >
          </ShowLottie>
          <ShowLottie
            v-else
            name="star_result_empty"
            width="140%"
            height="140%"
            :delay="320 * item"
            @getAnimation="ani => ani.playSegments([50, 180])"
          ></ShowLottie>
        </div>
      </div>
      <div class="stars pointer-none">
        <ShowLottie name="star_burst" width="100%" height="100%" :loop="false"></ShowLottie>
      </div>
      <div class="btn__box">
        <div class="btn btn__exit animate__animated animate__slideInLeft pointer" @click="exit">
          <div class="btn__icon">
            <img :src="img_close" />
          </div>
          <div class="btn__text">退出</div>
        </div>
        <div
          v-show="showNextLevel"
          class="btn btn__next animate__animated animate__slideInLeft pointer"
          @click="next"
        >
          <div class="btn__icon animate__animated animate__infinite animate__breath">
            <img :src="img_arrow" />
          </div>
          <div class="btn__text">下一关</div>
        </div>
        <div
          v-show="showNextStage"
          class="btn btn__next animate__animated animate__slideInLeft pointer"
          @click="nextStage"
        >
          <div class="btn__icon animate__animated animate__infinite animate__breath">
            <img :src="img_arrow" />
          </div>
          <div class="btn__text">下一阶</div>
        </div>
        <div class="btn btn__again animate__animated 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 ResultTable from './ResultTable.vue'
import type { Statistics } from '../interface/index'
import useCommonAudio from '../../../../../hooks/useCommonAudio.ts'
import { $sleep } from '@/utils/tool'
import { debounce } from 'lodash-es'
import SearchWordPup from '../../../strangeBook/components/SearchWordPup.vue'

import useNextStage from '../../hardMode/hooks/useNextStage'
import useAudio from '../../hardMode/hooks/useAudio.ts'

const props = defineProps<{
  status: boolean
  levelTitle: string
  breakThrough: boolean | null
  breakTimeStr: string | null
  proportion: string | null
  simpleScore: number
  simpleStar: number
  statList: Array<Statistics>
  levelNum?: string
  nextLevelOpen: boolean
  exp?: number
  diamond?: number
}>()

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

const showNextLevel = computed(() => {
  return props.nextLevelOpen && props.simpleStar === 3
})

const showNextStage = computed(() => {
  return !props.nextLevelOpen && props.simpleStar === 3 && !isFromTextBook.value
})

const isFromTextBook = inject('isFromTextBook') as Ref<any>
const sound = useCommonAudio(true)
const audio = useAudio()
const wordIdRef = ref('')
const spellRef = ref('')
const showCircle = ref(false)
const showPop = ref(false)
const OSS_URL = import.meta.env.VITE_OSS_URL

const img_arrow = `${OSS_URL}/xuexiaole_clinet/normalMode/arrow.png`
const img_close = `${OSS_URL}/xuexiaole_clinet/normalMode/close.png`
const img_again = `${OSS_URL}/xuexiaole_clinet/normalMode/again.png`
function exit() {
  sound.play('click.wav')
  emit('exit')
}

function next() {
  debounce(
    () => {
      sound.play('click.wav')
      emit('next')
    },
    1000,
    {
      leading: true,
      trailing: false,
    },
  )()
}

function again() {
  debounce(
    () => {
      sound.play('click.wav')
      emit('again')
    },
    1000,
    {
      leading: true,
      trailing: false,
    },
  )()
}

function nextStage() {
  debounce(
    () => {
      // sound.play('click.wav');
      useNextStage()
    },
    2000,
    {
      leading: true,
      trailing: false,
    },
  )()
}

const rewardList = computed(() => {
  return [
    {
      iconname: `${OSS_URL}/xuexiaole_clinet/normalMode/icon_exp.png`,
      name: '奖励',
      number: props.exp,
    },
    {
      iconname: `${OSS_URL}/icon/diamond.svg`,
      number: props.diamond,
    },
  ]
})

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() {
  // uni.getSystemInfo({
  //     success: res => {
  //         // windowHeightRpx.value = res.windowHeight * (750 / res.windowWidth);
  //         height.value = res.windowHeight - 5;
  //     },
  // });
}

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

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

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  user-select: none;
}
.pointer {
  cursor: pointer;
}
.pointer-none {
  pointer-events: none;
}

.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;
}

.wrapper {
  position: relative;
  margin-top: 7vh;
  width: 1366px;

  border-radius: 3.33vh;
  background: #fff;

  .result {
    position: absolute;
    left: 0;
    top: -10.17vh;
    width: 100%;
    display: flex;
    justify-content: center;

    .theme {
      width: 348px;
      height: 12vh;
    }
  }

  .g-container {
    position: relative;
    width: 100%;
    padding: 6.5vh 64px 2.33vh;
    display: flex;
    flex-direction: column;

    &::-webkit-scrollbar {
      display: none;
      width: 0 !important;
      height: 0 !important;
      -webkit-appearance: none;
      background: transparent;
      color: transparent;
    }

    .text {
      text-align: center;
      font-family: $font-special;
      margin-bottom: 2vh;

      .title {
        color: #736d20;
        font-size: 3.33vh;
      }

      .info {
        display: flex;
        align-items: center;
        justify-content: center;

        & > uni-view {
          margin-left: 24px;
        }
      }

      .breakRecord {
        color: rgba(0, 0, 0, 0.75);
        font-size: 2vh;

        .weight {
          color: #99d609;
        }
      }
    }
  }

  .light {
    position: absolute;
    left: 50%;
    top: -35.83vh;
    transform: translateX(calc(-50% - 16px));
    z-index: -1;
    width: 800px;
    height: 66.67vh;
  }

  .light_break {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
  }

  .star__list {
    display: flex;
    position: absolute;
    top: -4vh;
    left: 50%;
    transform: translateX(-50%);

    .star__item {
      width: 104px;
      height: 8.67vh;
      position: relative;

      .lottie__container {
        position: absolute;
        left: 50%;
        transform: translateX(calc(-50%));
      }
    }
  }

  .stars {
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%, -50%);
    width: 1750px;
    height: 90vh;
  }

  .seal__container {
    width: 800px;
    height: 66.67vh;
    position: absolute;
    right: -160px;
    bottom: -13.33vh;

    .seal {
      width: 100%;
      height: 100%;
    }

    .star_seal {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  .btn__box {
    width: 145px;
    height: 38vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
  }
  .btn {
    width: 145px;
    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 #d9d163;
    border-left: none;
    background-color: #fffbc2;
    animation-delay: 0.5s;
    animation-duration: 0.5s;
    animation-fill-mode: both;

    .btn__text {
      color: #d9d163;
    }
  }
  .btn__again {
    height: 16.33vh;
    border: 0.33vh solid #bacc18;
    border-left: none;
    background-color: #fefff2;
    animation-delay: 1s;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    .btn__text {
      color: #bacc18;
    }
  }

  .exp_text {
    display: flex;
    align-items: center;
    margin-left: 20px;

    .exp_label {
      color: #736d20;
      font-size: 2.33vh;
    }

    .icon_exp {
      width: 4vh;
      height: 4vh;
      margin-left: 10px;
    }

    .exp_value {
      color: rgba(0, 0, 0, 0.75);
      font-size: 2.67vh;
      font-weight: 500;
    }
  }
}

.ani_seal {
  animation: scale 0.2s ease-out 1s both;
}

@keyframes scale {
  from {
    transform: scale(1.5);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.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: 216px;
        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: 48px;
          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>
