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

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>
  <div
    :class="['card fs-14 is-clickable', `has-background-${invoice.invoice_status__color}-100`]"
    :style="{ border: `1px solid var(--bulma-${invoice.invoice_status__color}-80)` }"
    @click="openModal"
  >
    <div class="card-content p-4">
      <div class="mb-4 is-flex is-justify-content-space-between is-gap-1">
        <p class="fs-15 font-bold">{{ invoice.code }}</p>
        <span :class="['fs-13', `has-text-${invoice.payment_status__color}-40`]">
          {{ invoice.payment_status__name }}
        </span>
      </div>
      <div class="is-flex is-flex-direction-column is-gap-2">
        <!-- customer info -->
        <div>
          <p class="has-text-grey-20">{{ invoice.customer_name }}</p>
          <div class="has-text-grey fs-13 mt-1 is-flex is-gap-1 is-align-items-center">
            <Icon name="material-symbols:call-outline-rounded" />
            <p>{{ invoice.customer_phone }}</p>
          </div>
        </div>
        <!-- product info -->
        <div>
          <p class="fs-24 has-text-grey-20 font-bold">
            {{ $shortenCurrency(invoice.final_amount) }}
          </p>
          <p class="fs-13 has-text-grey">{{ invoice.product_amount }} sản phẩm</p>
        </div>
        <hr class="m-0 has-background-grey-85" />
        <div class="is-flex is-flex-direction-column is-gap-0.5 fs-13 has-text-grey">
          <p class="is-flex is-align-items-center is-gap-0.5">
            <Icon
              name="material-symbols:calendar-today-outline-rounded"
              :size="16"
            />
            <span>{{ $dayjs(invoice.create_time).format("L") }}</span>
            <span>•</span>
            <span>{{ $dayjs(invoice.create_time).format("HH:mm") }}</span>
          </p>
          <p>
            NV: <span>{{ invoice.staff__fullname }}</span>
          </p>
        </div>
        <button
          v-if="invoice.invoice_status__code !== 'COMPLETED'"
          :class="[
            'button fs-14 has-text-white',
            invoice.invoice_status__code === 'DRAFT'
              ? 'is-primary'
              : invoice.invoice_status__code === 'CONFIRMED'
                ? 'is-orange'
                : 'is-success',
          ]"
        >
          {{
            invoice.invoice_status__code === "DRAFT"
              ? "Xác nhận"
              : invoice.invoice_status__code === "CONFIRMED"
                ? "Giao hàng"
                : "Hoàn thành"
          }}
        </button>
      </div>
    </div>
    <Modal
      v-if="showModal"
      v-bind="showModal"
      @close="showModal = null"
    />
  </div>
</template>
