<template>
    <div class="col-12">
        <div class="b-b b-dashed b-grey p-b-25" v-show="!showDetails">
            <div class="row align-items-center m-b-5 parentContainer">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Company</div>
                </div>
                <div class="col-2 text-center">
                    <div class="font-heading fs-10 muted all-caps">Booking</div>
                </div>
                <div class="col-3 text-right pull-right">
                    <div class="font-heading fs-10 muted all-caps">Action</div>
                </div>
            </div>
            <list-component key="2" :section="section" :endpoint="route('api.company.list')" :options="{ business_type: 2, with_bookings: true }">
                <template #list="{ data }">
                    <company-list-component :data="data"></company-list-component>
                </template>
            </list-component>
        </div>
        <company-details-component v-show="showDetails" :company_details="companyDetails"></company-details-component>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import route from '@/general/functions/router';
import emitter from '@/utils/emitter';
import { useQueueStore } from '@/stores/queue';

const queueStore = useQueueStore();

const section = 'companyQuickViewSection';
const showDetails = ref(false);
const companyDetails = ref<Record<string, any>>({});

const onBack = () => {
    showDetails.value = false;
    queueStore.reloadList({ name: section });
};

const onView = (details: any) => {
    showDetails.value = true;
    companyDetails.value = details;
};

onMounted(() => {
    emitter.on('backToCompanyList', onBack);
    emitter.on('viewCompany', onView);
});

onUnmounted(() => {
    emitter.off('backToCompanyList', onBack);
    emitter.off('viewCompany', onView);
});
</script>
