<template>
    <view class="design-card" :class="cardClass" :style="cardStyle">
        <view class="title" v-if="title" :class="setClass">
            <text class="label">{{ title }}</text>
            <slot v-if="showRight" name="right" />
        </view>
        <slot />
    </view>
</template>

<script setup lang="ts">
import { computed, useSlots } from 'vue'

const props = defineProps({
    title: {
        type: String,
        defualt: ''
    },
    shape: {
        type: String,
        default: 'round'
    },
    cardStyle: {
        type: Object,
        default: {}
    }
})
const cardClass = computed(() => {
    const classes = []
    const { shape } = props
    classes.push(`design-card--${shape}`)
    return classes
})
const slots = useSlots()
const showRight = computed(() => slots.right)
const setClass = computed(() => (showRight.value ? 'slot-right' : ''))
</script>

<style lang="scss" scoped>
.design-card {
    background-color: $white-1;
    &--square {
        border-radius: 0;
    }
    &--round {
        border-radius: 16rpx;
    }
    .title {
        position: relative;
        padding: 32rpx 0 0 32rpx;
        display: flex;
        &.slot-right {
            justify-content: space-between;
        }
        .label {
            font-weight: 700;
        }

        // &::before {
        //     content: '';
        //     width: 4px;
        //     height: calc(100% - 42rpx);
        //     background-color: $blue1;
        //     position: absolute;
        //     left: 7rpx;
        //     top: 36rpx;
        // }
    }
}
</style>
