<template>
    <view class="parent-card" :class="{ clickable }" @click="emit('click')">
        <view v-if="title || subtitle" class="card-head">
            <view>
                <text v-if="title" class="card-title">{{ title }}</text>
                <text v-if="subtitle" class="card-subtitle">{{ subtitle }}</text>
            </view>
            <slot name="extra"></slot>
        </view>
        <slot></slot>
    </view>
</template>

<script setup lang="ts">
withDefaults(
    defineProps<{
        title?: string;
        subtitle?: string;
        clickable?: boolean;
    }>(),
    {
        title: '',
        subtitle: '',
        clickable: false,
    },
);

// 点击事件由卡片统一透出，页面里可直接把整张卡作为操作入口。
const emit = defineEmits<{
    (event: 'click'): void;
}>();
</script>

<style lang="scss" scoped>
.parent-card {
    padding: 28rpx;
    border-radius: 32rpx;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 14rpx 36rpx rgba(8, 145, 178, 0.08),
        inset 0 -3rpx 0 rgba(207, 250, 254, 0.8);
}

.clickable:active {
    transform: translateY(2rpx);
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18rpx;
    margin-bottom: 22rpx;
}

.card-title {
    display: block;
    color: #164e63;
    font-size: 32rpx;
    font-weight: 900;
}

.card-subtitle {
    display: block;
    margin-top: 4rpx;
    color: #64748b;
    font-size: 24rpx;
}
</style>
