web/app/components/orders/SelectedOrder.vue

<script setup>
import OrderDeliveryTab from "~/components/orders/OrderDeliveryTab.vue";
import OrderHistoryTab from "~/components/orders/OrderHistoryTab.vue";
import OrderPaymentTab from "~/components/orders/OrderPaymentTab.vue";
import OrderProductTab from "~/components/orders/OrderProductTab.vue";
import OrderReceiptTab from "~/components/orders/OrderReceiptTab.vue";

const props = defineProps({
  invoice: Object,
});

const { $dayjs, $numtoString } = useNuxtApp();
const emit = defineEmits(["unselect"]);

const tabs = [
  {
    name: "Chi tiết đơn",
    heading: "Chi tiết sản phẩm",
    icon: "material-symbols:deployed-code-outline",
  },
  {
    name: "Giao hàng",
    heading: "Thông tin giao hàng",
    icon: "material-symbols:delivery-truck-speed-outline-rounded",
  },
  {
    name: "Hoá đơn",
    heading: "Hoá đơn",
    icon: "material-symbols:receipt-long-outline-rounded",
  },
  {
    name: "Thanh toán",
    heading: "Thanh toán",
    icon: "material-symbols:credit-card-outline",
  },
  {
    name: "Lịch sử",
    heading: "Lịch sử đơn hàng",
    icon: "material-symbols:history-rounded",
  },
];

const activeTab = ref(tabs[0]);
</script>

<template>
  <div v-if="invoice">
    <div>
      <div class="is-flex is-gap-1.5 is-align-items-center">
        <span class="fs-17 font-bold">{{ invoice.code }}</span>
        <span
          :class="[
            'tag rounded-full',
            `has-background-${invoice.status__color}-80 has-text-${invoice.status__color}-25`,
          ]"
        >
          {{ invoice.status }}
        </span>
      </div>
      <div class="is-flex is-gap-0.5 is-flex-direction-column mt-4">
        <p class="icon-text">
          <span class="icon">
            <Icon
              name="material-symbols:person-outline-rounded"
              :size="18"
            />
          </span>
          <span>{{ invoice.customer_name }}</span>
        </p>
        <p class="icon-text">
          <span class="icon">
            <Icon
              name="material-symbols:call-outline-rounded"
              :size="18"
            />
          </span>
          <span>{{ invoice.customer_phone }}</span>
        </p>
        <p class="icon-text">
          <span class="icon">
            <Icon
              name="material-symbols:calendar-today-outline-rounded"
              :size="18"
            />
          </span>
          <span>{{ $dayjs(invoice.create_time).format("LL") }}</span>
        </p>
      </div>
      <div class="px-6 py-4 has-background-primary-95 rounded-lg mt-6">
        <p>Tổng giá trị đơn hàng</p>
        <p class="font-bold fs-25">
          {{ $numtoString(invoice.total_amount, { hasUnit: true }) }}
        </p>
      </div>
    </div>
    <hr />
    <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 />
    <div class="tabs is-toggle m-0 fs-13">
      <ul>
        <li
          v-for="tab in tabs"
          :key="tab.name"
          :class="activeTab.name === tab.name && 'is-active'"
          @click="activeTab = tab"
        >
          <a>{{ tab.name }}</a>
        </li>
      </ul>
    </div>
    <div
      id="tab-content"
      class="mt-4"
    >
      <div class="is-flex is-gap-1 mb-4">
        <Icon
          :name="activeTab.icon"
          :size="21"
        />
        <span class="fs-15 font-semibold">{{ activeTab.heading }}</span>
      </div>
      <div>
        <OrderProductTab
          v-if="activeTab.name === 'Chi tiết đơn'"
          :invoice="invoice"
        />
        <OrderDeliveryTab
          v-else-if="activeTab.name === 'Giao hàng'"
          :invoice="invoice"
        />
        <OrderReceiptTab
          v-else-if="activeTab.name === 'Hoá đơn'"
          :invoice="invoice"
        />
        <OrderPaymentTab
          v-else-if="activeTab.name === 'Thanh toán'"
          :invoice="invoice"
        />
        <OrderHistoryTab
          v-else-if="activeTab.name === 'Lịch sử'"
          :invoice="invoice"
        />
      </div>
    </div>
  </div>
</template>
<style scoped>
.tabs {
  --bulma-tabs-toggle-link-active-background-color: var(--bulma-link-95);
  --bulma-tabs-toggle-link-active-border-color: var(--bulma-link-90);
  --bulma-tabs-toggle-link-active-color: var(--bulma-link-40);
}
</style>