<template>
  <div class="progress__container">
    <div class="progress__bar">
      <div class="progress__rate" :style="{ width: `${props.rate}%` }"></div>
    </div>
    <div v-if="props.mode === 'normal'" class="star__list">
      <div
        :class="{
          star__item: true,
          star__animate: props.rate >= 60,
        }"
      ></div>
      <div
        :class="{
          star__item: true,
          star__animate: props.rate >= 80,
        }"
      ></div>
      <div
        :class="{
          star__item: true,
          star__animate: props.rate >= 100,
        }"
      ></div>
    </div>
    <div v-else class="hardMode star__list">
      <div
        :class="{
          star__item: true,
          star__animate: props.rate >= 50,
        }"
      ></div>
      <div
        :class="{
          star__item: true,
          star__animate: props.rate >= 100,
        }"
      ></div>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    rate: number
    mode?: string
  }>(),
  {
    mode: 'normal',
  },
)

const OSS_URL = import.meta.env.VITE_OSS_URL

const icon_notPassed = `url(${OSS_URL}/xuexiaole_clinet/normalMode/icon_notPassed.png) center/3.33333vw no-repeat`
const star_full = `url(${OSS_URL}/xuexiaole_clinet/normalMode/star_full.gif) center/11.97917vw no-repeat`
const star_full_hard = `url(${OSS_URL}/xuexiaole_clinet/normalMode/star_full_hard.gif) center/11.97917vw no-repeat`
const icon_passed = `url(${OSS_URL}/xuexiaole_clinet/normalMode/icon_passed.png) center/3.33333vw no-repeat`
const icon_passed_hard = `url(${OSS_URL}/xuexiaole_clinet/normalMode/icon_passed_hard.png) center/3.33333vw no-repeat`
</script>
<style lang="scss" scoped>
.progress__container {
  position: relative;
  margin: 0 110px;
  user-select: none;
  .progress__bar {
    width: 100%;
    height: 1.5vh;
    border-radius: 2.5vh;
    border: 0.17vh solid var(--1, #d9d163);
    background: #fffbbf;

    .progress__rate {
      box-sizing: border-box;
      height: 100%;
      border-radius: 2.5vh;
      // border-right: 2px solid var(--1, #d9d163);
      background: var(--1, #fff01f);
      transition: width 1s;
    }
  }
  .star__list {
    position: absolute;
    left: 0;
    top: -11.75vh;
    width: 100%;
    height: 25vh;
    pointer-events: none;
    .star__item {
      width: 300px;
      height: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      background: v-bind(icon_notPassed);
      img {
        width: 64px;
        height: 5.33vh;
      }
      &:nth-child(1) {
        right: calc(40% - 150px);
      }
      &:nth-child(2) {
        right: calc(20% - 150px);
      }
      &:nth-child(3) {
        right: -150px;
      }
    }
    .star__animate {
      animation: star 1.15s steps(1) forwards;
    }
    &.hardMode {
      .star__item {
        &:nth-child(1) {
          right: calc(60% - 150px);
        }
        &:nth-child(2) {
          right: -150px;
        }
      }
      .star__animate {
        animation: hardModestar 1.15s steps(1) forwards;
      }
    }
  }
}

@keyframes star {
  0% {
    background: v-bind(star_full);
  }
  100% {
    background: v-bind(icon_passed);
  }
}
@keyframes hardModestar {
  0% {
    background: v-bind(star_full_hard);
  }
  100% {
    background: v-bind(icon_passed_hard);
  }
}
</style>
