<template>
    <div class="content2" :style="styleColor">
        <div class="wrap1" v-for="item in result">
            <div class="wrap1_1">
                <slot :name="Object.keys(item).find(x => x.includes('l'))"></slot>
            </div>
            <div class="wrap1_2">
                <slot :name="Object.keys(item).find(x => x.includes('r'))"></slot>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useSlots, ref, defineProps } from 'vue'
const slots = useSlots();
const prop = defineProps({
    styleColor: {
        type: Object,
        default: () => {
            return { backgroundColor: '#fff' }
        }
    }
})
const groupObjectsByNumberKeys = (obj) => {
    const grouped = {};
    for (const key in obj) {
        const numericPart = key.slice(1);
        if (!grouped[numericPart]) {
            grouped[numericPart] = {};
        }
        grouped[numericPart][key] = obj[key];
    }
    return Object.values(grouped);
}
const result = ref(groupObjectsByNumberKeys(slots))

</script>

<style lang="scss" scoped>
.content2 {
    border-radius: 24rpx;
    padding-left: 18rpx;
    padding-right: 32rpx;

    .wrap1 {
        padding-left: 14rpx;
        padding-top: 26rpx;
        padding-bottom: 22rpx;
        border-bottom: 1rpx solid #E4EAF1;
        display: flex;

        &:last-child {
            border-bottom: none;
        }

        .wrap1_2 {
            flex-grow: 1;
            padding-left: 36rpx;
            font-size: 24rpx;
            color: #939393;
        }

        .wrap1_1 {
            display: flex;
            align-items: center;
            width: 192rpx;
            border-right: 1rpx solid #E4EAF1;
        }
    }
}
</style>