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

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