<template>
    <div class="panel panel-default bd bd-l-0 bd-r-0 mb-1">
        <div @click="toggleAccordion" class="panel-heading1 rounded-0 shadow-sm">
            <h4 class="panel-title1">
                <a :class="isOpen ? '' : 'collapsed'" class="accordion-toggle" data-bs-toggle="collapse"
                    :aria-expanded="isOpen" :href="'#' + uniq">
                    {{ props.title }}
                </a>
            </h4>
        </div>
        <div :id="uniq" :class="isOpen ? 'show' : 'collapse'" class="panel-collapse" role="tabpanel"
            :aria-expanded="isOpen">
            <div class="panel-body" :class="bodyClass">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
//#region props
const props = defineProps({
    id: String,
    title: String,
    preOpen: {
        type: Boolean,
        default: false
    },
    bodyClass: {
        type: String,
        default: ''
    },
});
//#endregion

//#region Data
const isOpen = ref(props.preOpen);
const uniq = ref('');

//#endregion

//#region Methods
function toggleAccordion() {
    isOpen.value = !isOpen;
}
//#endregion

onMounted(() => {
    if (props.id == null || props.id.length <= 0) {
        uniq.value = 'la' + (new Date()).getTime() + Math.floor(Math.random() * 100);
    } else {
        uniq.value = props.id;
    }
})


</script>

