<script setup>
import TransactionDetail from "@/components/transaction/TransactionDetail.vue";

const props = defineProps({
  transaction__code: String,
});

const { $exportpdf, $getdata, $snackbar } = useNuxtApp();
const txn = ref(null);
const txndetails = ref(null);
const showModal = ref(null);

function openChangeCustomerModal() {
  showModal.value = {
    title: "Đổi khách hàng",
    height: "40vh",
    width: "50%",
    component: "transaction/ChangeCustomerModal",
    vbind: { transactionId: txn.value.id },
  };
}

function print() {
  const fileName = `Giao-dich-${props.transaction__code}`;
  const docId = "print-area";
  $exportpdf(docId, fileName, "a4", "landscape");
  $snackbar("Đang xuất PDF...", { type: "is-info" });
}

onMounted(async () => {
  const fetchedTxn = await $getdata("transaction", { code: props.transaction__code }, undefined, true);
  txn.value = fetchedTxn;

  const fetchedTxndetails = await $getdata("reservation", undefined, {
    filter: {
      transaction__code: props.transaction__code,
    },
    sort: "create_time",
    values:
      "id,code,date,amount,amount_remaining,amount_received,due_date,transaction,customer_old__fullname,customer_new__fullname,transaction__code,phase,phase__name,creator,creator__fullname,status,status__name,approver,approver__fullname,approve_time,create_time,update_time",
  });
  txndetails.value = fetchedTxndetails;
});
</script>
<template>
  <div id="print-area">
    <!-- mt-1 because bug: print empty first page -->
    <div class="columns mx-0 mt-1 mb-4">
      <div class="column is-narrow is-flex is-align-items-center">
        <p class="has-text-weight-semibold">{{ transaction__code }}</p>
      </div>
      <div class="column is-flex is-align-items-center">
        <p>
          <span>Giá hợp đồng: </span>
          <span class="has-text-weight-semibold">{{ $numtoString(txn?.sale_price) }}</span>
        </p>
      </div>
      <div class="column is-flex is-align-items-center">
        <p>
          <span>Đã thu: </span>
          <span
            class="has-text-weight-semibold"
            style="color: hsl(120, 70%, 40%)"
          >
            {{ $numtoString(txn?.amount_received) }}
          </span>
        </p>
      </div>
      <div class="column is-flex is-align-items-center">
        <p>
          <span>Còn lại: </span>
          <span
            class="has-text-weight-semibold"
            style="color: hsl(0, 50%, 50%)"
          >
            {{ $numtoString(txn?.amount_remain) }}
          </span>
        </p>
      </div>
      <div
        id="ignore"
        class="column is-narrow is-flex is-align-items-center is-gap-2"
      >
        <button
          v-if="txn?.phase === 4 && $getEditRights('edit', { code: 'transaction', category: 'topmenu' })"
          @click="openChangeCustomerModal"
          class="button is-link"
        >
          Đổi khách hàng
        </button>
        <button
          @click="print"
          class="button is-light"
        >
          In thông tin
        </button>
      </div>
    </div>
    <div class="is-flex is-flex-direction-column is-gap-4">
      <TransactionDetail
        v-for="(txndetail, i) in txndetails"
        :key="txndetail.id"
        :index="i"
        :txndetail="txndetail"
      />
    </div>
  </div>
  <Modal
    v-if="showModal"
    v-bind="showModal"
    @close="showModal = undefined"
  />
</template>
