<template>
    <view class="card column" :style="cardStyle">
        <slot />
    </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    width: { type: String, default: '90%' },
    bgColor: { type: String, default: '#FFFFFF' },
    radius: { type: String, default: '10rpx' },
    marginTop: { type: String, default: '20rpx' },
    padding: { type: String, default: '20rpx 0rpx 30rpx 0rpx' },
    boxShadow: { type: Boolean, default: true },
    justify: { type: String, default: 'center' }
})

const cardStyle = computed(() => {
    const style = {
        width: props.width,
        backgroundColor: props.bgColor,
        borderRadius: props.radius,
        margin: `${props.marginTop} auto 0`,
        display: 'flex',
        justifyContent: props.justify
    }
    if (props.padding) {
        style.padding = props.padding
    }
    if (props.boxShadow) {
        style.boxShadow = '0 0 10px 3px rgba(0, 0, 0, 0.1)'
    }
    return style
})
</script>

<style scoped lang="scss"></style>


