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

const { $dayjs, $shortenCurrency } = useNuxtApp();
const emit = defineEmits(["selectOrder", "unselect"]);
const showModal = ref();

function openModal() {
  showModal.value = {
    component: "orders/SelectedOrder",
    title: "SelectedOrder",
    width: "75%",
    height: "500px",
    vbind: {
      order: props.order,
    },
  };
}
</script>

<template>
  <div
    :class="['card fs-14 is-clickable', `has-background-${order.status__color}-95`]"
    :style="{ border: `1px solid var(--bulma-${order.status__color}-60)` }"
    @click="selected ? emit('unselect') : emit('selectOrder', order.id)"
  >
    <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">{{ order.code }}</p>
        <span :class="['fs-13', `has-text-${order.payment_status__color}-40`]">
          {{ order.payment_status__name }}
        </span>
      </div>
      <div class="is-flex is-flex-direction-column is-gap-2">
        <!-- customer info -->
        <div>
          <p class="has-text-grey-darker">{{ order.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>{{ order.customer__phone }}</p>
          </div>
        </div>
        <!-- product info -->
        <div>
          <p class="fs-24 has-text-grey-darker font-bold">
            {{ $shortenCurrency(order.total) }}
          </p>
          <p class="fs-13 has-text-grey">{{ order.order__products.length }} sản phẩm</p>
        </div>
        <hr class="m-0 has-background-grey-lighter" />
        <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(order.create_time).format("L") }}</span>
            <span>•</span>
            <span>{{ $dayjs(order.create_time).format("HH:mm") }}</span>
          </p>
          <p>
            NV: <span>{{ order.employee__name }}</span>
          </p>
        </div>
        <button
          v-if="order.status__name !== 'Hoàn thành'"
          :class="[
            'button fs-14 has-text-white',
            order.status__name === 'Nháp'
              ? 'is-primary'
              : order.status__name === 'Đã xác nhận'
                ? 'is-orange'
                : 'is-success',
          ]"
        >
          {{
            order.status__name === "Nháp"
              ? "Xác nhận"
              : order.status__name === "Đã xác nhận"
                ? "Giao hàng"
                : "Hoàn thành"
          }}
        </button>
      </div>
    </div>
    <Modal
      v-if="showModal"
      v-bind="showModal"
      @close="showModal = null"
    />
  </div>
</template>
