<script setup lang="ts">
import { userStore } from '@/stores'
import { storeToRefs } from 'pinia'
withDefaults(
  defineProps<{
    modelValue: boolean
    tip?: string
  }>(),
  {
    modelValue: false,
    tip: '正在统计成绩中',
  },
)
const emits = defineEmits(['update:modelValue', 'ok'])
const OSS_URL = import.meta.env.VITE_OSS_URL
const { userInfo } = storeToRefs(userStore())

function getLoading(type: number) {
  return `${OSS_URL}/xuexiaole_clinet/learnWord/loading${type}.gif`
}
// function onOk() {
//   emits('update:modelValue', false)
// }
</script>
<template>
  <div v-if="modelValue" class="mask">
    <img :src="(getLoading(userInfo.sex) as any) || 1" />

    <div class="tip">
      {{ tip }}
      <div class="dot">.</div>
      <div class="dot">.</div>
      <div class="dot">.</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
//
.mask {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  background-color: #00000040;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tip {
  font-family: $font-special;
  font-size: 3.33vh;
  font-weight: 400;
  line-height: 5vh;
  text-align: center;
  color: beige;
  display: flex;
  .dot {
    &:nth-child(2) {
      animation: loading 1s 0s linear infinite;
    }
    &:nth-child(3) {
      animation: loading 1s 0.2s linear infinite;
    }
  }
}
@keyframes loading {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
</style>
