<script setup lang="ts">
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
defineProps<{
  loading?: boolean
  text?: string
}>()
const OSS_URL = import.meta.env.VITE_OSS_URL
</script>
<template>
  <div class="empty">
    <div v-if="loading" class="loading">
      <Icon name="global_loading" loading :size="80"></Icon>
    </div>
    <div v-else class="empty-box">
      <div
        class="empty-top"
        :style="{
          'background-image': `url(${OSS_URL}/urm/free_record_empty_bg.svg)`,
        }"
      >
        <div>根据您选择学习的知识点，智能推荐关联练习题</div>
        <div><span>练习题量</span>最多不超过<span>10道</span>哦～</div>
      </div>
      <img :src="`${OSS_URL}/urm/empty_email.svg`" />
      <div class="text">{{ text }}</div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.empty {
  width: 100%;
  height: 100%;
  position: relative;
  line-height: 1.5;
  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    img {
      width: 240px;
      height: 20vh;
    }
  }
  &-box {
    position: absolute;
    top: 6.17vh;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  &-top {
    box-sizing: border-box;
    width: 820px;
    height: 15.33vh;
    background-size: 100%;
    text-align: center;
    padding: 3vh;
    margin-bottom: 4vh;
    color: $font-color;
    font-family: $font-special;
    font-size: 2.67vh;
    line-height: 4.5vh;
    span {
      color: #99d609;
    }
  }
  img {
    width: 320px;
    height: 26.67vh;
  }
  .text {
    color: #afbfcf;
    text-align: center;
    font-family: $font-special;
    font-size: 2.33vh;
  }
}
</style>
