<script setup>
import { ref } from 'vue'
import { portalService } from '@/services/portalService'
import { formatCurrency, formatDate } from '@/utils/formatador'

const visivel = ref(false)
const isLoading = ref(false)
const transacoes = ref([])
const mensagemErro = ref('')

async function abrir(idContaCorrente) {
    visivel.value = true
    isLoading.value = true
    transacoes.value = []
    mensagemErro.value = ''
    try {
        const res = await portalService.getTransacoes(idContaCorrente)
        transacoes.value = res.data ?? []
    } catch (e) {
        mensagemErro.value = e?.data?.description ?? 'Erro ao buscar transações.'
    } finally {
        isLoading.value = false
    }
}

defineExpose({ abrir })
</script>

<template>
    <Dialog
        v-model:visible="visivel"
        modal
        header="Transações da Conta Corrente"
        :style="{ width: 'min(95vw, 56rem)' }"
    >
        <div v-if="isLoading" class="flex justify-center p-8">
            <ProgressSpinner />
        </div>
        <p v-else-if="mensagemErro" class="text-sm text-red-600">{{ mensagemErro }}</p>
        <DataTable
            v-else
            :value="transacoes"
            show-gridlines
            size="small"
            scrollable
            scroll-height="400px"
            empty-message="Nenhuma transação encontrada."
        >
            <Column field="id" header="ID" style="width: 60px" />
            <Column field="data" header="Data" style="width: 100px">
                <template #body="{ data }">{{ formatDate(data.data) }}</template>
            </Column>
            <Column field="tipoTransacao" header="Tipo" />
            <Column field="numDocOrigem" header="Doc. Origem" style="width: 110px" />
            <Column field="valorPrincipal" header="Principal" body-class="text-right">
                <template #body="{ data }">{{ formatCurrency(data.valorPrincipal) }}</template>
            </Column>
            <Column field="valorMulta" header="Multa" body-class="text-right">
                <template #body="{ data }">{{ formatCurrency(data.valorMulta) }}</template>
            </Column>
            <Column field="valorJuros" header="Juros" body-class="text-right">
                <template #body="{ data }">{{ formatCurrency(data.valorJuros) }}</template>
            </Column>
            <Column field="valorTotal" header="Total" body-class="text-right">
                <template #body="{ data }">
                    <strong>{{ formatCurrency(data.valorTotal) }}</strong>
                </template>
            </Column>
        </DataTable>
    </Dialog>
</template>
