<template>
    <div class="row m-b-10 parentContainer">
        <div class="col">
            <div class="row p-b-10 b-b b-grey">
                <div class="col-2">{{ item.imported_date }}</div>
                <div class="col-2">
                    <button class="btn btn-xs btn-outline-success b-rad-none m-r-5" @click="downloadInvoiceMapped(item.imported_date)">
                            Download Receipts Mapped
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { useComponentHandler } from '@/composables/useComponentHandler';
    import { useRequest } from '@/composables/useRequest';

    const props = defineProps<{
        data: any;
        stage?: number;
        section: string;
    }>();

    const { item } = useComponentHandler(props);
    const { submit } = useRequest();

    const downloadInvoiceMapped = (importedDate: string) => {
        const arrDateTime = importedDate.split(" ");
        const fileName = 'ReceiptMapped';
        const url = (window as any).route('importedReceiptMapped.export') + '?date=' + arrDateTime[0] + '&time=' + arrDateTime[1] + '&fileName=' + fileName;
        
        if ((window as any).LARAVEL_VAPOR_ENABLED) {
            submit(
                url,
                'get',
                props.section,
                true,
                true,
                undefined,
                {
                    successHandler: (response: any) => {
                        if (response.src) {
                            window.open(response.src, '_blank');
                        }
                    }
                }
            );
        } else {
            window.open(url, '_blank');
        }
    };
</script>

