<script setup>
import { onMounted, ref, watch } from 'vue';
import axios from 'axios';
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';

onMounted(() => fetch());

const entity = ref();
const props = defineProps({
    url: {
        type: String,
        default: '',
    },
    filter: {
        type: Object,
        default: null,
    },
});
const emit = defineEmits(['onFetch']);

defineExpose({
    entity,
    fetch,
});

async function fetch() {
    const params = {};

    if (props.filter) params.filter = JSON.stringify(props.filter);

    const { data } = await axios.get(props.url, { params });
    entity.value = data;

    emit('onFetch', data);
}

watch(props, async () => {
    entity.value = null;
    fetch();
});
</script>

<template>
    <div class="summary container">
        <QCard class="cardSummary">
            <SkeletonSummary v-if="!entity" />
            <template v-if="entity">
                <div class="summaryHeader bg-primary q-pa-md text-weight-bolder">
                    <slot name="header-left">
                        <span></span>
                    </slot>
                    <slot name="header" :entity="entity">
                        <VnLv :label="`${entity.id} -`" :value="entity.name" />
                    </slot>
                    <slot name="header-right">
                        <span></span>
                    </slot>
                </div>
                <div class="summaryBody row q-mb-md">
                    <slot name="body" :entity="entity" />
                </div>
            </template>
        </QCard>
    </div>
</template>

<style lang="scss">
.summary.container {
    display: flex;
    justify-content: center;
}

.cardSummary {
    width: 100%;

    .summaryHeader {
        text-align: center;
        font-size: 20px;
        display: flex;
        justify-content: space-between;
    }
    .summaryBody {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: 15px;
        padding: 15px;
        background-color: var(--vn-gray);

        > .q-card.vn-one {
            width: 350px;
            flex: 1;
        }
        > .q-card.vn-two {
            flex: 2;
        }
        > .q-card.vn-three {
            flex: 4;
        }
        > .q-card.vn-max {
            width: 100%;
        }

        > .q-card {
            width: 100%;
            background-color: var(--vn-gray);
            padding: 15px;
            font-size: 16px;
            min-width: 275px;

            .vn-label-value {
                display: flex;
                flex-direction: row;
                margin-top: 5px;
                .label {
                    color: var(--vn-label);
                    width: 8em;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin-right: 10px;
                    flex-grow: 0;
                    flex-shrink: 0;
                }
                .value {
                    color: var(--vn-text);
                    overflow: hidden;
                }
            }
            .header {
                color: $primary;
                font-weight: bold;
                margin-bottom: 25px;
                font-size: 20px;
                display: inline-block;
            }
            .header.link:hover {
                color: lighten($primary, 20%);
            }
        }
    }

    @media (max-width: $breakpoint-xs) {
        .summaryBody {
            padding: 0;
        }
    }
}
</style>
<style lang="scss" scoped>
.summaryHeader .vn-label-value {
    display: flex;
    flex-direction: row;
}
.summaryHeader {
    color: $white;
}
</style>
