<template>
  <div class="kole-empty">
    <div class="kole-empty-icon">{{ resolved.icon }}</div>
    <div class="kole-empty-title">{{ resolved.title }}</div>
    <div class="kole-empty-desc" v-if="resolved.desc">{{ resolved.desc }}</div>
    <div class="kole-empty-actions" v-if="actionText || secondaryText">
      <button v-if="actionText" class="kole-empty-btn primary" @click="emit('action')">{{ actionText }}</button>
      <button v-if="secondaryText" class="kole-empty-btn" @click="emit('secondary')">{{ secondaryText }}</button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
  type: { type: String, default: 'empty' },
  icon: { type: String, default: '' },
  title: { type: String, default: '' },
  desc: { type: String, default: '' },
  actionText: { type: String, default: '' },
  secondaryText: { type: String, default: '' }
});
const emit = defineEmits(['action', 'secondary']);

const resolved = computed(() => {
  const p = {
    empty: { icon: '📭', title: '暂无数据', desc: '当前列表为空，试试新增一条记录。' },
    permission: { icon: '🔒', title: '无访问权限', desc: '你没有查看该内容的权限。' },
    search: { icon: '🔍', title: '未找到结果', desc: '换个关键词或筛选条件再试。' },
    error: { icon: '⚠️', title: '加载失败', desc: '网络异常，请稍后重试。' }
  }[props.type] || {};
  return {
    icon: props.icon || p.icon || '📭',
    title: props.title || p.title || '暂无数据',
    desc: props.desc || p.desc || ''
  };
});
</script>

<style src="./EmptyPro.css"></style>
