<script setup>
    import { onMounted } from 'vue';
    import useAttachments from '../composables/useAttachments';
    import Spiner from './ui/Spiner.vue';
    import { useLoadsStore } from '../stores/loads';

    const loadStore = useLoadsStore();
    const { getAttachmentLoad, loading, attachments } = useAttachments();

    onMounted(() => {
        console.log('se ejcyta attach');
        getAttachmentLoad();
    })

    const clearLoad = () => {
        loadStore.openAttachmentsModal = false;
        loadStore.currentLoad = null;
    }

</script>

<template>
    <div class="modal fade" id="attachmentModal" tabindex="-1" role="dialog" aria-labelledby="attachmentModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h2 class="title mt-2 mb-3">Evidencias adjuntas</h2>
                <button 
                    id="btnCloseAttachmentModal" 
                    type="button" 
                    class="close bg-white" 
                    data-dismiss="modal" 
                    @click="clearLoad"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <Spiner v-if="loading"/>
                <div v-else>
                    <div v-if="!attachments || attachments.total == 0" class="card-body">
                        <p class="empty">No hay evidencias subidas</p>
                    </div>
                    <div  v-else class="card-body">
                        <div class="attachment" v-for="data in attachments.data">
                            <p v-if="data.type == 'Loading'">Evidencia de carga</p>
                            <p v-else>Evidencia de descarga</p>
                            <img 
                                :src="`https://api.etaviaporte.com/api/v1/public-load-attachments/download/${data._id}`" 
                                :alt="data.type"
                            />
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button 
                    type="button" 
                    class="btn btn-dark" 
                    @click="clearLoad"
                    data-dismiss="modal">Cerrar</button>
            </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .attachment {
        width: 100%;
        /* border: 1px #e9e9e9 solid; */
        display: flex;
        flex-direction: column;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 13px;
        align-content: center;
        align-items: center;
        box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);
        -webkit-box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);
        -moz-box-shadow: 3px 5px 10px 5px rgba(0,0,0,0.10);

    }

    .attachment p {
    font-size: 1rem;
    font-weight: 900;
    color: black;
    }

    .attachment img {
        width: 50%;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        align-content: center;
    }

</style>