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

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

const { $exportpdf, $getdata, $snackbar, $store } = useNuxtApp();
const { dealer} = $store;
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 is-multiline 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 columns is-multiline m-0">
        <div class="column is-4 p-1 is-flex is-align-items-center">
          <p>
            <span>Mã khách hàng: </span>
            <span class="has-text-weight-semibold">{{ txn?.customer__code }}</span>
          </p>
        </div>
        <div class="column is-4 p-1 is-flex is-align-items-center">
          <p>
            <span>Tên khách hàng: </span>
            <span class="has-text-weight-semibold">{{ txn?.customer__fullname }}</span>
          </p>
        </div>
        <div class="column is-4 p-1 is-flex is-align-items-center">
          <p>
            <span>Sản phẩm: </span>
            <span class="has-text-weight-semibold">{{ txn?.product__trade_code }}</span>
          </p>
        </div>
        <div class="column is-4 p-1 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-4 p-1 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-4 p-1 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>
      <div id="ignore" class="column is-narrow is-flex is-align-items-center is-gap-2">
        <button 
          v-if="txn?.phase === 4 && !dealer && $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>