<template>
    <div class="col-12">
        <div class="b-b b-dashed b-grey p-b-25" v-show="!show_details" v-if="company">
            <div class="row align-items-center m-b-5 parentContainer">
                   <div class="col-10">
                        <div class="font-heading fs-10 muted all-caps">Announcement</div>
                    </div>
                    <div class="col-2 text-right pull-right">
                        <div class="font-heading fs-10 muted all-caps">Action</div>
                    </div>

            </div>
            <list-component  :section="section" :endpoint="route('api.announcement.list')" :options="{has_segments:segments,is_published:true}">
                <template #list="{ data }">
                    <announcement-list-component :data="data"></announcement-list-component>
                </template>
            </list-component>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useAuthStore } from '@/stores/auth';
import { useQueueStore } from '@/stores/queue';
import { useRequest } from '@/composables/useRequest';
import route from '@/general/functions/router';

const authStore = useAuthStore();
const queueStore = useQueueStore();
const { submit } = useRequest();

const section = ref('announcementsSection');
const company = ref<any>(null);
const show_details = ref(false);

const segments = computed(() =>
    (company.value?.segments || []).map((value: any) => value.id)
);

const successHandler = (response: any) => {
    queueStore.setListComplete({ name: section.value, data: [] });
    company.value = response.payload.data;
};

const fetchCompany = () => {
    submit(route('api.company.show', authStore.getCompanyId), 'get', section.value, false, false, {}, { successHandler });
};

onMounted(() => {
    queueStore.updateListQueue({ name: section.value });
    fetchCompany();
});
</script>
