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

const { $dayjs, $numtoString } = useNuxtApp();
const emit = defineEmits(['unselect']);
</script>

<template>
  <div v-if="order" class="cell relative fs-14">
    <div class="card">
      <button
        @click="emit('unselect')"
        class="button is-white rounded-full has-text-grey absolute size-8 is-flex is-justify-content-center is-align-items-center"
        style="right: 0.5rem; top: 0.5rem;"
      >
        <span class="icon">
          <Icon name="material-symbols:close-rounded" :size="22" />
        </span>
      </button>
      <div class="card-content">
        <div>
          <div class="is-flex is-gap-2 is-align-items-center">
            <span class="fs-17 font-bold">{{ order.code }}</span>
            <span :class="[
              'tag rounded-full',
              `has-background-${order.status__color}-80 has-text-${order.status__color}-25`
            ]">
              {{ order.status__name }}
            </span>
          </div>
          <div class="is-flex is-gap-0.5 is-flex-direction-column mt-2">
            <div class="is-flex is-gap-1 is-align-items-center">
              <Icon name="material-symbols:person-outline-rounded" :size="18" />
              <p>{{ order.customer__name }}</p>
            </div>
            <div class="is-flex is-gap-1 is-align-items-center">
              <Icon name="material-symbols:call-outline-rounded" :size="18" />
              <p>{{ order.customer__phone }}</p>
            </div>
            <div class="is-flex is-gap-1 is-align-items-center">
              <Icon name="material-symbols:calendar-today-outline-rounded" :size="18" />
              <p>{{ $dayjs(order.create_time).format('LL') }}</p>
            </div>
          </div>
          <div class="p-4 has-background-primary-95 rounded-lg mt-6">
            <p>Tổng giá trị đơn hàng</p>
            <p class="font-bold fs-28">{{ $numtoString(order.total, { hasUnit: true }) }}</p>
          </div>
        </div>
        <hr class="m-0" />
        <div class="buttons m-0">
          <button class="button fs-14 is-flex-grow-1 is-primary">Xác nhận đơn</button>
          <button class="button fs-14 is-flex-grow-1">Ghi thanh toán</button>
        </div>
        <hr class="m-0" />
        <div class="tabs is-toggle fs-13">
          <ul>
            <li class="is-active">
              <a>
                <span>Chi tiết đơn</span>
              </a>
            </li>
            <li>
              <a>
                <span>Giao hàng</span>
              </a>
            </li>
            <li>
              <a>
                <span>Hoá đơn</span>
              </a>
            </li>
            <li>
              <a>
                <span>Thanh toán</span>
              </a>
            </li>
            <li>
              <a>
                <span>Lịch sử</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div> 
</template>
<style scoped>
.card-content {
  padding: 0; /* 1.5rem */

  > div {
    padding: var(--bulma-card-content-padding);
  }
}

.tabs {
  --bulma-tabs-toggle-link-active-background-color: var(--bulma-link-90);
  --bulma-tabs-toggle-link-active-border-color: var(--bulma-link-90);
  --bulma-tabs-toggle-link-active-color: var(--bulma-link-40);
}
</style>