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

const props = defineProps({
  row: Object,
  pagename: String
});

const { $getdata } = useNuxtApp();
const transaction = ref([]);
const isLoading = ref(true);
const paymentSchedules = ref([]);
const incompletePaymentSchedules = computed(() => 
  paymentSchedules.value.filter(pm => pm.remain_amount > 0)
)

async function getTransaction() {
  const transactionData = await $getdata('transaction', undefined, {
    filter: {
      id: props.row.id
    },
    values: 'date,txncurrent__detail,txncurrent__detail__status,customer__type,txncurrent,txncurrent__detail__amount,txncurrent__detail__amount_remaining,txncurrent__detail__status__name,product__zone_type__name,product__trade_code,product__cart__dealer,customer__legal_code,customer__legal_type__name,payment_plan,id,code,customer,customer__code,customer__fullname,customer__phone,product,phase,phase__name,phase__code,policy,policy__code,policy__name,origin_price,discount_amount,sale_price,deposit_amount,deposit_received,deposit_remaining,amount_received,amount_remain,create_time,update_time,total_received_amount,total_allocation_remain,total_allocation_amount'
  }, true);

  transaction.value = transactionData;
}

async function getPaymentSchedules() {
  isLoading.value = true;
  const paymentSchedulesData = await $getdata('payment_schedule', undefined, {
    filter: {
      txn_detail__transaction: transaction.value.id
    },
    sort: 'cycle',
    values: 'invoice__ref_code,invoice__amount,txn_detail__amount,batch_date,amount_remain,penalty_remain,penalty_paid,penalty_amount,penalty_reduce,ovd_days,remain_amount,paid_amount,txn_detail__transaction__product,txn_detail__transaction__product__trade_code,txn_detail__status,txn_detail__status__name,txn_detail__transaction__product__code,txn_detail__phase__name,txn_detail,id,txn_detail__transaction__customer__fullname,txn_detail__transaction__customer__code,txn_detail__transaction__customer__legal_code,status__name,type__name,code,from_date,txn_detail__transaction__policy__code,to_date,amount,cycle,cycle_days,txn_detail__transaction,type,status,updater,entry,detail,txn_detail__transaction__code,txn_detail__code'
  });

  paymentSchedules.value = paymentSchedulesData;
  isLoading.value = false;
}

async function getStuff() {
  await getTransaction();
  await getPaymentSchedules();
}

onMounted(() => {
  getStuff();
});
</script>
<template>
  <div class="columns mx-0 mt-2 mb-5">
    <div class="column is-1">
      <p class="has-text-weight-semibold">Mã GD</p>
      <p>{{ transaction.code }}</p>
    </div>
    <div class="column">
      <p class="has-text-weight-semibold">Sản phẩm</p>
      <p>{{ transaction.product__trade_code }}</p>
    </div>
    <div class="column">
      <p class="has-text-weight-semibold">Khách hàng</p>
      <p>{{ transaction.customer__fullname }}</p>
    </div>
    <div class="column">
      <p class="has-text-weight-semibold">Ngày</p>
      <FormatDate :date="transaction.date" />
    </div>
    <div class="column">
      <p class="has-text-weight-semibold">Đã nhận</p>
      <FormatNumber :value="transaction.total_received_amount" />
    </div>
    <div class="column">
      <p class="has-text-weight-semibold">Đã phân bổ</p>
      <FormatNumber :value="transaction.total_allocation_amount" />
    </div>
    <div class="column">
      <p class="has-text-weight-semibold">Chưa phân bổ</p>
      <FormatNumber :value="transaction.total_allocation_remain" />
    </div>
  </div>
  <div class="mb-6 is-flex is-flex-direction-column is-gap-4">
    <template v-if="incompletePaymentSchedules.length > 0">
      <AllocateItem 
        v-for="(paymentSchedule, i) in incompletePaymentSchedules"
        v-bind="{ paymentSchedule, i, onRefresh: getStuff }" 
      />
    </template>
    <div v-else-if="isLoading" class="is-flex is-justify-content-center">
      <SvgIcon v-bind="{ name: 'loading.svg', type: 'info', size: 24 }" />
    </div>
    <template v-else>
      <p class="my-4 fs-20 has-text-centered has-text-grey">Giao dịch đã phân bổ hoàn tất!</p>
    </template>
  </div>
</template>
