<template>
  <div class="modal-field-grid">
    <div class="mf"><span class="mf-label">Date</span>{{ doc.posting_date }}</div>
    <div class="mf"><span class="mf-label">Mode</span>{{ doc.mode_of_payment || '---' }}</div>
    <div class="mf"><span class="mf-label">Montant paye</span><strong>{{ formatMoney(doc.paid_amount) }}</strong></div>
    <div class="mf"><span class="mf-label">Reference</span>{{ doc.reference_no || '---' }}</div>
    <div class="mf" v-if="doc.reference_date"><span class="mf-label">Date ref.</span>{{ doc.reference_date }}</div>
    <div class="mf"><span class="mf-label">Compte paye de</span>{{ doc.paid_from || '---' }}</div>
    <div class="mf"><span class="mf-label">Compte paye a</span>{{ doc.paid_to || '---' }}</div>
  </div>
  <div v-if="doc.references?.length" class="q-mt-md">
    <div class="info-block-title">Factures liees</div>
    <div v-for="r in doc.references" :key="r.idx" class="info-row q-py-xs" style="cursor:pointer" @click="$emit('navigate', r.reference_doctype, r.reference_name)">
      <span class="erp-link">{{ r.reference_name }}</span>
      <q-space />
      <span>{{ formatMoney(r.allocated_amount) }}</span>
    </div>
  </div>
</template>

<script setup>
import { formatMoney } from 'src/composables/useFormatters'

defineProps({
  doc: { type: Object, required: true },
  docName: String,
})
defineEmits(['navigate'])
</script>
