<script setup>
import OrderHighlightCard from "~/components/orders/OrderHighlightCard.vue";
import OrderPipeline from "~/components/orders/OrderPipeline.vue";
import OrdersTable from "~/components/orders/OrdersTable.vue";

const { $store } = useNuxtApp();
const highlights = [
  {
    name: "Nháp",
    value: 2,
    icon: "material-symbols:assignment-outline-rounded",
    color: "yellow",
  },
  {
    name: "Đã xác nhận",
    value: 3,
    icon: "material-symbols:check-circle-outline-rounded",
    color: "blue",
  },
  {
    name: "Đang giao",
    value: 2,
    icon: "material-symbols:delivery-truck-speed-outline-rounded",
    color: "orange",
  },
  {
    name: "Hoàn thành",
    value: 1,
    icon: "material-symbols:box-outline-rounded",
    color: "green",
  },
  {
    name: "Doanh thu",
    value: "6.8M",
    icon: "material-symbols:attach-money-rounded",
    color: "purple",
    unit: "VNĐ",
  },
];

const viewModes = [
  { name: "list", icon: "material-symbols:format-list-bulleted-rounded" },
  { name: "grid", icon: "material-symbols:grid-view-outline-rounded" },
];
const viewMode = ref("list");
</script>
<template>
  <div>
    <Teleport
      defer
      to="#header-right-slot"
      v-if="$store.tabinfo.tab.code === 'orders'"
    >
      <div class="is-flex is-gap-2 is-justify-content-flex-end is-align-items-center">
        <div class="tabs is-toggle m-0">
          <ul class="is-flex-grow-0 ml-auto">
            <li
              v-for="mode in viewModes"
              :key="mode.name"
              :class="[mode.name === viewMode && 'is-active']"
              @click="viewMode = mode.name"
            >
              <a class="px-3 py-1">
                <span class="icon m-0">
                  <Icon
                    :name="mode.icon"
                    :size="18"
                  />
                </span>
              </a>
            </li>
          </ul>
        </div>
        <button class="button fs-14 is-primary">
          <span class="icon">
            <Icon
              :size="18"
              name="material-symbols:add-rounded"
            />
          </span>
          <span>Tạo đơn hàng</span>
        </button>
      </div>
    </Teleport>
    <div class="fixed-grid has-2-cols-mobile has-5-cols">
      <div class="grid">
        <OrderHighlightCard
          v-for="highlight in highlights"
          :key="highlight.name"
          v-bind="highlight"
        />
      </div>
    </div>
    <OrderPipeline />
    <OrdersTable :viewMode="viewMode" />
  </div>
</template>
<style scoped>
.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>
