<script setup>
    import { onMounted, ref } from 'vue';
    import { useCompanyStore } from '../stores/company';
    import Spiner from '../components/ui/Spiner.vue';
    import CardProposal from '../components/CardProposal.vue';
    import LoadDetailModal from '../components/LoadDetailModal.vue';
import MakeProposalModal from '../components/MakeProposalModal.vue';

    const companyStore = useCompanyStore();
    const loading = ref(false);
    const proposalCurrent = ref(null);
    const openModal = ref(false);
    const openModalProposal = ref(false);

    onMounted(() =>{
        getInitData();
    })

    const getInitData = async() => {
        loading.value = true;
        await companyStore.getProposalsCompany();
        loading.value = false;
    }

    const handleSetCurrentProposal = (data) => {
        if(data.modal === 'detail') {
            openModal.value = true;
        } else {
            openModalProposal.value = true;
        }
        proposalCurrent.value = data.proposal;
    }

    const handleResetCurrentProposal = () => {
        openModal.value = false;
        openModalProposal.value = false;
        proposalCurrent.value = null;
        console.log('clear proposal');
    }
</script>

<template>
    <LoadDetailModal 
        v-if="openModal"
        :proposal="proposalCurrent"
        @reset-proposal="handleResetCurrentProposal"
    />
    <MakeProposalModal
        v-if="openModalProposal"
        :proposal="proposalCurrent"
        :load="proposalCurrent.load"
        @reset-load="handleResetCurrentProposal"
    />
    <div>
        <h2 class="title mb-5">Mis ofertas aceptadas</h2>
        <Spiner v-if="loading"/>
        <CardProposal 
            v-else
            v-for="proposal in companyStore.proposals"
            :key="proposal._id"
            :proposal="proposal" 
            @set-proposal="handleSetCurrentProposal"
        />
    </div>
</template>

<style scoped>

</style>