<script setup lang="ts">
import { px2vw } from '@/utils'

type showType =
  | 'network'
  | 'dev'
  | 'goods'
  | 'email'
  | 'announcement'
  | 'knowledge'
  | 'practice'
  | 'test'
  | 'report'
  | 'course'
  | 'activity'
  | 'task'
  | 'rank'
  | 'learn'
  | 'search'
  | 'loading'

const props = withDefaults(
  defineProps<{
    type?: showType
    content?: string
    size?: number | string
    delay?: number | string
  }>(),
  {
    type: 'email',
    content: '',
    size: 320,
    delay: 0,
  },
)

const DES_MAP: anyObj = {
  network: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_network.svg`,
    msg: '网络出问题了啦',
  },
  dev: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_dev.svg`,
    msg: '功能正在开发中，敬请期待！',
  },
  goods: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_goods.svg`,
    msg: '还没有商品哦～',
  },
  email: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_email.svg`,
    msg: '还没有收到邮件哦～',
  },
  announcement: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_announcement.svg`,
    msg: '还没有公告哦～',
  },
  knowledge: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_knowledge.png`,
    msg: '暂无知识图谱，快去训练吧！',
  },
  practice: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_practice.svg`,
    msg: '暂无练习记录，快去练习吧！',
  },
  test: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_test.svg`,
    msg: '暂无测试记录，快去测试吧！',
  },
  report: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_report.svg`,
    msg: '暂无督学报告，快去生成吧！',
  },
  course: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_course.svg`,
    msg: '暂无课程表，快去选课吧！',
  },
  activity: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_activity.svg`,
    msg: '还没有活动哦～',
  },
  task: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_task.svg`,
    msg: '还没有任务哦～',
  },
  rank: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_rank.svg`,
    msg: '还没有人上榜哦～',
  },
  learn: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_learn.svg`,
    msg: '暂无学习数据，快去学习吧！',
  },
  search: {
    img: `${import.meta.env.VITE_OSS_URL}/urm/empty_search.svg`,
    msg: '搜索内容为空哦～',
  },
  loading: {
    iconName: 'loading',
  },
}

const show = ref(false)
onMounted(() => {
  setTimeout(() => (show.value = true), Number(props.delay))
})
</script>

<template>
  <div v-if="show" class="empty">
    <slot>
      <template v-if="DES_MAP[type]?.iconName">
        <Icon :name="DES_MAP[type].iconName" loading size="96" />
      </template>
      <template v-else>
        <img
          :style="{
            width: px2vw(size),
            height: 'auto',
          }"
          :src="DES_MAP[type]['img']"
        />
        <div class="empty-content">
          {{ content || DES_MAP[type]['msg'] }}
        </div>
      </template>
    </slot>
  </div>
</template>

<style lang="scss" scoped>
.empty {
  width: 100%;
  height: inherit;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  img {
    user-select: none;
    pointer-events: none;
  }
  .empty-content {
    width: 100%;
    color: $font-color;
    font-size: $font-size-5;
    line-height: 1.83vh;
    margin-top: $space-1_h;
    font-family: $font-special;
  }
}
</style>
