<template>
  <div v-if="showModal" class="medal__mask">
    <div class="medal__mask__content">
      <div class="medal__mask__content__wrapper">
        <div class="icon__wrapper">
          <div ref="lottieRef" class="icon__wrapper__svg"></div>
        </div>
        <div v-if="showBtn" class="foot">
          <div class="foot__wrapper">
            <div class="foot__view" @click="handleView">
              <span>前往查看</span>
            </div>
            <div class="foot__confirm" @click="handleConfirm">
              <span>确认</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import lottie, { type AnimationItem } from 'lottie-web'
import wordTestApi from '@/api/subject/wordTest'
import { useRouter } from 'vue-router'

export interface IModelItem {
  id: any
  name: string
}

const props = defineProps<{
  medalList: Array<IModelItem>
}>()
const OSS_URL = import.meta.env.VITE_OSS_URL

const jsonMap: { [key: string]: string } = {
  拼写能手: `${OSS_URL}/xuexiaole_clinet/lottieJSON/spell_gooder.json`,
  拼写之星: `${OSS_URL}/xuexiaole_clinet/lottieJSON/spell_start.json`,
  千词达人: `${OSS_URL}/xuexiaole_clinet/lottieJSON/thousands_word.json`,
  百词入门: `${OSS_URL}/xuexiaole_clinet/lottieJSON/hundred_word.json`,
}
const router = useRouter()

let showModal = ref(false)
let lottieRef = ref()
let showBtn = ref(false)

let animation = ref<AnimationItem>()
let modalIdx = ref(0)
let medalPathList = ref<Array<{ path: string; id: number | string }>>([])

let params = ref<{ ids: string; checkFlag: 0 | 1 }>({ ids: '', checkFlag: 1 })

const showMask = () => {
  showModal.value = true
}
const closeMask = (callback?: () => void) => {
  showModal.value = false
  callback && setTimeout(() => callback())
}

// 加载动画
const startLottie = (path: string | undefined) => {
  return lottie.loadAnimation({
    container: lottieRef.value,
    renderer: 'svg',
    loop: false, // 循环播放
    autoplay: true,
    path,
  })
}

// 调用接口更新是否查看勋章状态
const checkStatus = (params: { ids: string; checkFlag: 0 | 1 }) => {
  return wordTestApi.checkMedalStatus({
    ...params,
    ids: params.ids,
  })
}

const handleView = () => {
  // uni.navigateTo({
  //     url: '/pages/growthRoad/growthRoad?updateCheck=true',
  // });
  router.push('/system/user')
  showModal.value = false
}

const handleConfirm = () => {
  ++modalIdx.value

  const handleCheckStatus = () => {
    // checkStatus(params.value)
    //     .then(() => {})
    //     .catch(error => {
    //         console.log(error);
    //     });
  }

  if (modalIdx.value === medalPathList.value.length) {
    params.value.ids = medalPathList.value[modalIdx.value - 1].id as string
  }

  if (modalIdx.value >= medalPathList.value.length) {
    handleCheckStatus()
    showModal.value = false
    // animation.value?.destroy();
    return
  }
  params.value.ids = medalPathList.value[modalIdx.value - 1].id as string
  handleCheckStatus()

  // animation.value?.destroy();
  startLottie(medalPathList.value[modalIdx.value].path)
}

const handleShowBtn = () => {
  showBtn.value = true
}

watch(
  () => props.medalList,
  // 处理并获取勋章路径列表
  val => {
    Object.keys(jsonMap).forEach(key => {
      props.medalList.forEach(medal => {
        if (medal.name === key) {
          medalPathList.value.push({ path: jsonMap[key], id: medal.id })
        }
      })
    })

    if (val.length > 0) {
      showMask()
      setTimeout(() => {
        animation.value = startLottie(medalPathList.value[0].path)
        if (animation.value) {
          animation.value.addEventListener('DOMLoaded', handleShowBtn)
        }
      })
    }
  },
)

defineExpose({
  showModal,
  showMask,
  closeMask,
})
</script>

<style lang="scss" scoped>
.medal__mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--unnamed, rgba(0, 0, 0, 0.45));
  backdrop-filter: blur(4px);
  z-index: 999;

  &__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;

    &__wrapper {
      width: 750px;
      height: auto;
      text-align: center;
      position: relative;

      .icon__wrapper {
        width: 100%;
        height: 62.5vh;
        display: flex;
        align-items: center;
        justify-content: center;

        &__svg {
          width: 750px;
          height: 62.5vh;
        }
      }

      .foot {
        position: absolute;
        box-sizing: border-box;
        bottom: 4.17vh;

        &__wrapper {
          display: flex;
          position: relative;
          justify-content: space-around;
          width: 750px;
          height: 5.5vh;
        }

        &__view {
          width: 192px;
          height: 5.5vh;
          cursor: pointer;
          text-align: center;
          flex-shrink: 0;
          border-radius: 3.5vh;
          border: 0.33vh solid #6a3906;
          background: var(--1, #fff78c);
          color: var(--grey-3, rgba(0, 0, 0, 0.65));
          font-family: $font-text;
          font-size: 2.33vh;
          font-style: normal;
          font-weight: 500;
          line-height: 3.5vh; /* 150% */
          // margin-bottom: 100px;

          > span {
            line-height: 5.5vh;
          }
        }

        &__confirm {
          width: 192px;
          height: 5.5vh;
          cursor: pointer;
          flex-shrink: 0;
          text-align: center;
          border-radius: 3.5vh;
          border: 0.33vh solid var(--4, #6a3906);
          background: var(--1, #fff01f);
          color: var(--grey-2, rgba(0, 0, 0, 0.75));
          font-family: $font-text;
          font-size: 2.33vh;
          font-style: normal;
          font-weight: 500;
          line-height: 3.5vh; /* 150% */

          > span {
            line-height: 5.5vh;
          }
        }
      }
    }
  }
}
</style>
