<template>
    <div class="info-box">
        <div class="info-title-block">
            <span class="title-text">{{ title }}</span>
        </div>
        <div class="info-content-block">
            <div class="info-item-list-wrapper">
                <div class="info-item" v-for="(item, index) in dataConfig" :key="index">
                    <template v-if="item.slot">
                        <slot :item="item.slot" v-bind="item" />
                    </template>
                    <template v-else>
                        <div class="label">{{ getLabelText(item) }}</div>
                        <div class="value">{{ getValueText(item) }}</div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    data: {
        type: Object,
        default: () => {}
    },
    dataConfig: {
        type: Array,
        default: () => []
    }
})

const getLabelText = (item) => {
    if(typeof item.label == 'function') {
        return item.label(props.data)
    }
    return item.label;
}
const getValueText = (item) => {
    if(typeof item.value == 'function') return item.value(props.data)
    return props.data[item.name]; 
}
</script>
<style scoped lang="scss">
.info-box {
    width: 100%;

    .info-title-block {
        margin: 10px 0;

        .title-text {
            font-size: 16px;
            font-weight: 600;
        }
    }

    .info-content-block {
        width: 100%;
        padding: 15px;
        background-color: #fff;
        border-radius: 6px;

        .info-item-list-wrapper {
            display: grid;
            width: 100%;
            row-gap: 15px;

            .info-item {
                display: flex;
                align-items: center;
                width: 100%;

                .label {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    margin-right: 10px;
                    line-height: 14px;
                    white-space: nowrap;

                    &::after {
                        content: ":"
                    }
                }

                .value {
                    line-height: 14px;
                    font-size: 14px;
                    white-space: nowrap;
                }

            }
        }


    }
}
</style>