<script setup lang="ts">
import { computed } from 'vue'
import { crudLabel } from '../crud/style'
import { getScarceSvgUrl } from '../lib/scarce-assets'

defineOptions({ name: 'vm-empty' })

/** scarce SVG 文件名 → crudLabel key（文件名保持中文） */
const KIND_LABEL_KEY: Record<string, string> = {
  暂无数据: 'empty',
  暂无内容: 'emptyContent',
  页面不存在: 'pageNotFound',
}

const props = withDefaults(
  defineProps<{
    /** 对应 scarce 文件名（不含 .svg），如「暂无数据」 */
    kind?: string
    description?: string
    class?: string
  }>(),
  {
    kind: '暂无数据',
    description: '',
  },
)

const src = computed(() => getScarceSvgUrl(props.kind))

const displayText = computed(() => {
  if (props.description) return props.description
  const key = KIND_LABEL_KEY[props.kind]
  return key ? crudLabel(key) : props.kind
})
</script>

<template>
  <div class="vm-empty" :class="props.class">
    <img v-if="src" :src="src" :alt="displayText" class="vm-empty__img" />
    <p class="vm-empty__text">{{ displayText }}</p>
    <slot />
  </div>
</template>

<style lang="scss" scoped>
.vm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 0;
  text-align: center;
}

.vm-empty__img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  opacity: 0.9;
}

.vm-empty__text {
  margin: 0;
  font-size: 12px;
  color: var(--muted-foreground);
}
</style>
