<script setup>
import { onMounted, ref, watch } from 'vue';
import axios from 'axios';
import SkeletonSummary from 'components/ui/SkeletonSummary.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 = 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">
        <q-card>
            <skeleton-summary v-if="!entity" />
            <template v-if="entity">
                <div class="header bg-primary q-pa-sm q-mb-md">
                    <slot name="header" :entity="entity">
                        {{ entity.id }} - {{ entity.name }}
                    </slot>
                </div>
                <div class="body q-pa-md q-mb-md">
                    <slot name="body" :entity="entity" />
                </div>
            </template>
        </q-card>
    </div>
</template>

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

.summary {
    .q-card {
        width: 100%;
        max-width: 1200px;
    }

    .negative {
        color: red;
    }
    .q-list {
        .q-item__label--header {
            display: flex;
            justify-content: space-between;

            a {
                color: $primary;
            }
        }
    }

    .body > .q-card__section.row {
        flex-wrap: wrap;

        & > .col {
            min-width: 250px;
        }
    }

    .header {
        text-align: center;
        font-size: 18px;
    }

    #slider-container {
        max-width: 80%;
        margin: 0 auto;

        .q-slider {
            .q-slider__marker-labels:nth-child(1) {
                transform: none;
            }
            .q-slider__marker-labels:nth-child(2) {
                transform: none;
                left: auto !important;
                right: 0%;
            }
        }
    }
}

.q-dialog .summary {
    max-width: 1200px;
}
</style>
