<!-- 空状态组件:<ls-empty></ls-empty> -->
<template>
    <div class="empty-state" :class="[`empty-state--${type}`]">
        <div class="empty-state__icon" :class="`empty-state__icon--${type}`">
            <slot name="icon">
                <img v-if="type === 'no-data'" src="@/assets/images/暂无项目.png">
                <img v-else-if="type === 'no-permission'" src="@/assets/images/暂无权限.png">
                <img v-else src="@/assets/images/空空如也.png">
            </slot>
        </div>

        <h3 class="empty-state__title">{{ title }}</h3>

        <p class="empty-state__desc" v-if="description">{{ description }}</p>

        <div class="empty-state__action" v-if="$slots.default">
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts">
type EmptyStateType = 'no-data' | 'no-permission' | 'not-opened'
export default defineComponent({
    name: 'LsEmpty',
    label: '空状态',
    props: {
        type: {
            type: String as () => EmptyStateType,
            default: 'no-data',
            validator: (value: string): value is EmptyStateType =>
                ['no-data', 'no-permission', 'not-opened'].includes(value as EmptyStateType)
        },
        title: {
            type: String,
            default: ''
        },
        description: {
            type: String,
            default: ''
        }
    },
    emits: ['update:title', 'update:description'],
    setup(props, { emit }) {
        // const iconComponent = computed(() => {
        //   const icons: Record<EmptyStateType, string> = {
        //     'no-data': 'el-icon-data-analysis',
        //     'no-permission': 'el-icon-thumb',
        //     'not-opened': 'el-icon-receiving'
        //   }
        //   return icons[props.type] || 'el-icon-receiving'
        // })

        const defaultTitles: Record<EmptyStateType, string> = {
            'no-data': '暂无数据',
            'no-permission': '无访问权限',
            'not-opened': '暂未开通'
        }

        const defaultDescriptions: Record<EmptyStateType, string> = {
            'no-data': '当前没有找到相关数据',
            'no-permission': '您没有权限访问此内容',
            'not-opened': '该功能暂未开通，敬请期待'
        }

        // Set default title and description if not provided
        if (!props.title) {
            emit('update:title', defaultTitles[props.type])
        }
        if (!props.description) {
            emit('update:description', defaultDescriptions[props.type])
        }
    }
})
</script>

<style lang="scss" scoped>
.empty-state {
    $block: &;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    animation: fadeIn 0.5s ease-in-out;
    img{
        width:100%;
    }
    &__icon {
        width: 120px;
        height: 120px;
        margin-bottom: 24px;
        animation: bounceIn 0.8s ease-in-out;

        svg {
            width: 100%;
            height: 100%;
        }

        &--no-data {
            color: #909399;
        }

        &--no-permission {
            color: #f56c6c;
        }

        &--not-opened {
            color: #e6a23c;
        }
    }

    &__title {
        margin: 0 0 12px;
        font-size: 18px;
        font-weight: 500;
        color: #303133;
        animation: slideInUp 0.5s ease-in-out;
    }

    &__desc {
        margin: 0;
        font-size: 14px;
        color: #606266;
        line-height: 1.5;
        animation: slideInUp 0.6s ease-in-out;
    }

    &__action {
        margin-top: 24px;
        animation: slideInUp 0.7s ease-in-out;
    }

    // 动画定义
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes bounceIn {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }

        50% {
            opacity: 1;
            transform: scale(1.05);
        }

        70% {
            transform: scale(0.9);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}
</style>