<script lang="ts" setup>
import { formatNumberDecimal } from 'stores/utils';
import { dateFormatJS } from 'src/utils/datetime';

withDefaults(
  defineProps<{
    payType: string;
    amount: number;
    date: string | Date;
  }>(),
  { payType: 'Full', amount: 0, date: () => new Date() },
);
</script>
<template>
  <section class="surface-1 rounded row">
    <aside class="column col bordered-r q-py-md q-pl-md">
      <span class="text-weight-medium text-body1">
        {{ $t('quotation.receiptDialog.PaymentReceive') }}
      </span>
      <span class="app-text-muted-2 q-pt-md">
        {{ $t('quotation.receiptDialog.paymentMethod') }}
      </span>
      <span class="row items-center">
        {{ $t(`quotation.type.${payType}`) }}
        <q-icon name="mdi-minus" class="q-px-xs" />
        <article class="app-text-positive text-weight-medium">
          {{ $t('quotation.receiptDialog.PaymentSuccess') }}
        </article>
        <article class="q-ml-auto text-weight-bold text-body1 q-pr-lg">
          ฿ {{ formatNumberDecimal(amount, 2) }}
        </article>
      </span>
    </aside>

    <aside class="column col q-py-md text-right self-center q-px-md">
      <span class="app-text-positive text-weight-bold text-body1">
        {{ $t('quotation.receiptDialog.receiptIssued') }}
      </span>
      <div class="app-text-muted-2">
        <q-icon name="mdi-calendar-blank-outline" />
        {{
          dateFormatJS({
            date: date,
            dayStyle: '2-digit',
            monthStyle: '2-digit',
          })
        }}
      </div>
    </aside>
  </section>
</template>
<style scoped></style>
