<script setup>
const props = defineProps({
  invoice: Object,
});

const { $getdata, $dayjs, $shortenCurrency } = useNuxtApp();
const paymentRecords = ref([]);
onMounted(async () => {
  paymentRecords.value = await $getdata("Payment_Record", {
    filter: { invoice: props.invoice.id },
  });
});

/* 

 */
/* invoice.total_amount */
const showModal = ref();

function openModal() {
  showModal.value = {
    component: "orders/SelectedOrder",
    title: "Chi tiết đơn hàng",
    width: "min(700px, 75%)",
    vbind: {
      invoice: props.invoice,
    },
  };
}
</script>
<template>
  <tr
    class="is-clickable"
    @click="openModal"
  >
    <td>
      <div>
        <p class="fs-15 font-semibold">{{ invoice.code }}</p>
        <p class="has-text-grey">{{ invoice.staff__fullname }}</p>
      </div>
    </td>
    <td>
      <div>
        <p>{{ invoice.customer_name }}</p>
        <div class="is-flex is-gap-0.5 is-align-items-center mt-1 has-text-grey">
          <Icon
            name="material-symbols:call-outline-rounded"
            :size="15"
          />
          <span class="fs-12">{{ invoice.customer_phone }}</span>
        </div>
      </div>
    </td>
    <td class="has-text-right">
      <div>
        <p class="fs-14 font-semibold">{{ $shortenCurrency(invoice.total_amount) }}</p>
        <p class="has-text-grey">{{ invoice.product_amount }} SP</p>
      </div>
    </td>
    <td class="has-text-centered">
      <span
        :class="['tag rounded-full', `has-background-${invoice.status__color}-80 has-text-${invoice.status__color}-25`]"
      >
        {{ invoice.status }}
      </span>
    </td>
    <td>
      <p :class="`has-text-${invoice.payment_status__color}-40`">
        {{ invoice.payment_status__name }}
      </p>
    </td>
    <td>
      <p :class="`has-text-${invoice.delivery_status__color}-40`">
        {{ invoice.delivery__status }}
      </p>
    </td>
    <td>
      <div>
        <div class="is-flex is-gap-0.5">
          <Icon
            :size="18"
            name="material-symbols:calendar-today-outline-rounded"
          />
          <span>{{ $dayjs(invoice.create_time).format("L") }}</span>
        </div>
        <p class="has-text-grey fs-12">
          {{ $dayjs(invoice.create_time).format("HH:mm") }}
        </p>
      </div>
    </td>
    <td>
      <button
        v-if="invoice.status__name !== 'Hoàn thành'"
        :class="[
          'button fs-12 has-text-white rounded-lg',
          invoice.status__name === 'Nháp'
            ? 'is-primary'
            : invoice.status__name === 'Đã xác nhận'
              ? 'is-orange'
              : 'is-success',
        ]"
      >
        {{
          invoice.status__name === "Nháp"
            ? "Xác nhận"
            : invoice.status__name === "Đã xác nhận"
              ? "Giao hàng"
              : "Hoàn thành"
        }}
      </button>
    </td>
    <Modal
      v-if="showModal"
      v-bind="showModal"
      @close="showModal = null"
    />
  </tr>
</template>
<style scoped>
tr.is-selected {
  --bulma-table-row-active-background-color: var(--bulma-primary-95);
  color: unset;
}
td {
  vertical-align: middle;
  --bulma-table-cell-padding: 0.75em;
}
</style>
