<template>
  <div class="level__wrapper">
    <!-- 生成路段，指向上一道关卡 -->
    <Road :direction="road" :isBook="isBook"></Road>

    <!-- 解锁新关卡的动画 -->
    <div
      v-if="isLastUnlock"
      :class="{
        light: true,
        pointer: true,
        'pointer-none': true,
        isLastUnlock: true,
        isBook: isBook,
      }"
    >
      <!-- 8月6日修改 -->
      <img v-if="!isBook" class="new-bg-paopao" :src="bg_height" />
    </div>

    <div :class="{ level__container: true, hoist: isHoist, isBook: isBook }">
      <div class="user__list">
        <template v-if="friends?.length">
          <!-- 8月9日  修改  去除小人头像 -->
          <!-- <user-list v-model="isHoist" :list="friends"></user-list> -->
        </template>
      </div>
      <div class="level__content__wrapper">
        <div class="level__content pointer" @click="toLevel(levelId)">
          <div v-if="isBook" class="level__pattern">
            <img
              class="full-w-h"
              src="https://xuexiaole-1313840333.cos.ap-guangzhou.myqcloud.com/xuexiaoleClient/bg_paopao.png"
            />
          </div>
          <div v-show="!isLastUnlock && !isBook" class="level__pattern">
            <img class="full-w-h" :src="bg_level" />
          </div>
          <div :class="{ level__content__box: true, isBook: isBook }">
            <div v-if="!isOpen" class="item-lock">
              <img
                v-if="isBook"
                class="full-w-h"
                src="https://xuexiaole-1313840333.cos.ap-guangzhou.myqcloud.com/xuexiaoleClient/book_lock.png"
              />
              <div v-else style="height: 100%; width: 100%">
                <img v-if="type === 1" class="full-w-h" :src="bg_lock" />
                <img v-else class="full-w-h" :src="bg_lock_hard" />
              </div>
            </div>
            <span v-else :class="['level__num', { hardMode: type === 2 }]"> {{ levelName }}</span>
          </div>
        </div>
      </div>
      <div :class="{ star__list: true, isBook: isBook }">
        <!-- 简单模式显示的星星列表 -->
        <template v-if="type === 1">
          <div v-for="(item, index) in 3" :key="item" class="star__item">
            <div v-if="star && index < star" class="star">
              <img class="full-w-h" :src="icon_passed" />
            </div>
            <div v-else class="star">
              <img class="full-w-h" :src="icon_notPassed" />
            </div>
          </div>
        </template>
        <!-- 困难模式显示的星星列表 -->
        <template v-else>
          <div v-for="(item, index) in 2" :key="item" class="star__item">
            <div v-if="star && index < star" class="star">
              <img class="full-w-h" :src="icon_passed_hard" />
            </div>
            <div v-else class="star">
              <img class="full-w-h" :src="icon_notPassed" />
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import UserList from './UserList.vue'
import Road from './Road.vue'
import type { Friend } from '../interface'
import { useRouter } from 'vue-router'
import { useLearnWordStore } from '@/stores/learnWord/useLearnWordStore'

const props = defineProps<{
  friends?: Array<Friend> | null
  isOpen?: boolean
  isLastUnlock: boolean
  levelId: string
  recordId?: string | null
  star?: number | null
  type?: 1 | 2
  levelNum?: number
  road?: string | undefined
  isFirst: 0 | 1
  levelIdx: number
  stageName: string
}>()
const router = useRouter()

const OSS_URL = import.meta.env.VITE_OSS_URL
const bg_level = `${OSS_URL}/xuexiaole_clinet/learnWord/level.png`

const bg_height = `${OSS_URL}/xuexiaole_clinet/learnWord/level_light_new.svg`
const bg_lock = `${OSS_URL}/xuexiaole_clinet/learnWord/lock.png`
const bg_lock_hard = `${OSS_URL}/xuexiaole_clinet/learnWord/lock_hard.png`
const icon_notPassed = `${OSS_URL}/xuexiaole_clinet/learnWord/icon_notPassed.png`
const icon_passed = `${OSS_URL}/xuexiaole_clinet/learnWord/icon_passed.png`
const icon_passed_hard = `${OSS_URL}/xuexiaole_clinet/learnWord/icon_passed_hard.png`
const light_passed = `url(${OSS_URL}/xuexiaole_clinet/learnWord/light_passed.gif)  center no-repeat `

const state = useLearnWordStore()
const isBook = inject('isBook') as Ref<boolean>

/* 点击打开关卡 */
function toLevel(levelId: string) {
  if (props.isOpen) {
    state.currentLevelIndex = props.levelIdx
    let url
    if (props.type === 1) {
      url = `/subject/learnWord/normalMode?levelId=${levelId}&first=${props.isFirst}`
    } else {
      url = `/subject/learnWord/hardMode?levelId=${levelId}&first=${props.isFirst}`
    }

    if (isBook.value) {
      url += '&from=textbook'
    }

    // uni.navigateTo({
    //     url: url,
    // });
    router.push(url)
    // router.push()
  }
}

const levelName = computed(() => {
  if (isBook.value) {
    return `${props.stageName}${props.type === 1 ? '入门' : '进阶'}\r第${props.levelNum}关`
  } else {
    return props.levelNum
  }
})

// 刷新人物跳跃动画key
const anikey = ref(1)

const isHoist = ref(false)

onMounted(() => {
  anikey.value++
})
</script>

<style lang="scss" scoped>
.level__wrapper {
  width: 360px;
  height: 30vh;
  position: relative;

  .light {
    width: 500px;
    height: 41.67vh;
    position: absolute;
    left: -72px;
    top: -1.33vh;
    &.isBook {
      // z-index: 0;
      top: 1.67vh;
      left: -20px;
      width: 400px;
      height: 33.33vh;
    }
    // 8月6日新增

    .new-bg-paopao {
      width: 200px;
      height: 15.5vh;
      position: absolute;
      bottom: 10.83vh;
      right: 146px;
    }

    .light_passed {
      display: none;
      position: absolute;
      left: -250px;
      top: -20.83vh;
      width: 1000px;
      height: 83.33vh;
    }

    .role {
      display: none;
      width: 250px;
      height: 33.33vh;
      position: absolute;
      left: 125px;
      top: -1.67vh;
    }
  }

  .level_prev {
    width: 950px;
    height: 70.83vh;
    position: absolute;
    left: -290px;
    top: -26.67vh;

    .star_burst {
      width: 800px;
      height: 83.33vh;
      position: absolute;
      left: 75px;
      top: -25vh;
    }
  }

  .level__container {
    position: absolute;
    left: calc(50% - 100px);
    bottom: 0.67vh;
    // transform: translateX(-50%);
    z-index: 1;
    &.hoist {
      z-index: 99;
    }
    &.isBook {
      bottom: 7.5vh;
      left: calc(50% - 120px);

      .level__pattern {
        width: 245px;
        height: 19.58vh;
      }
    }

    .user__list {
      width: 200px;
      height: 10vh;
    }

    .level__pattern {
      width: 200px;
      height: 15.5vh;
    }

    .level__content__wrapper {
      width: 200px;
      height: 15.5vh;
    }

    .level__content {
      position: relative;

      .level__content__box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 10vh;
        display: flex;
        align-items: center;
        justify-content: center;
        &.isBook {
          width: 145px;
          left: 50px;
          top: 2.92vh;

          .level__num {
            font-family: $font-special;
            font-size: 2.67vh;
            font-weight: 400;
            line-height: 4vh;
            letter-spacing: 0em;
            text-align: center;
            color: rgba($color: #000000, $alpha: 0.6);
            /* 150% */
            &.hardMode {
              color: rgba($color: #000000, $alpha: 0.6);
            }
          }
        }

        .item-lock {
          width: 72px;
          height: 6vh;
        }

        .level__num {
          color: #ffa51f;
          text-align: center;
          font-family: $font-special;
          font-size: 3.33vh;
          font-style: normal;
          font-weight: 400;
          line-height: 5vh;
          /* 150% */
          &.hardMode {
            color: #e5731c;
          }
        }
      }
    }
  }

  .star__list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 224px;
    height: 5.33vh;
    position: absolute;
    left: -12px;
    bottom: 0;
    &.isBook {
      bottom: -5vh;
      left: 10px;
      justify-content: center;
    }

    .star__item {
      .star {
        width: 5.33vh;
        height: 5.33vh;
      }

      & + .star__item {
        margin-left: 16px;
      }
    }
  }
}

.pointer-none {
  position: relative;

  .animate__once {
    position: absolute;
    top: 0;
    left: 0;
    animation: show-once 5s steps(1) forwards;
  }

  .animate__role {
    position: absolute;
    top: -7.5vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    &.isBook {
      // top: -60px;
      // left: 51%;
      // display: none;
    }
    .animate__role__lottie {
      width: 250px;
      height: 34.58vh;
    }
  }
}

@keyframes show-once {
  0% {
    background: v-bind(light_passed);
  }

  100% {
    background: transparent;
  }
}
</style>
