<template>
    <view class="card">
        <view class="card-title">
            <view class="left">
                <global-icon :icon="titleIcon"></global-icon>
                <text class="txt">{{ title }}</text>
            </view>
        </view>
        <view class="card-content">
            <view class="card-empty" v-if="showEmpty">
                <global-empty></global-empty>
            </view>
            <slot v-else></slot>
        </view>
    </view>
</template>

<script setup>
const ps = defineProps({
    showEmpty: {
        type: Boolean,
        default: true
    },
    title: {
        type: String,
        default: ''
    },
    titleIcon: {
        type: String,
        default: 'email'
    }
})
</script>
<style lang="scss" scoped>
.card {
    margin-top: 16rpx;
    padding: 16rpx 24rpx;
    border-radius: 12rpx;
    color: $mocp-text-4;
    background: #ffffff;
    &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2rpx solid #f4f4f4;
        padding-bottom: 16rpx;
        font-size: 34rpx;
        color: $mocp-text-5;
        .left {
            display: flex;
            align-items: center;
            .txt {
                margin-left: 8rpx;
                color: $mocp-text-5;
            }
        }
    }
    &-empty {
        padding-top: 16rpx;
    }
}
</style>
