<script setup>
import ActionInfo from "~/components/common/ActionInfo.vue";
import Editor from "~/components/common/Editor.vue";
import Company from "~/components/customer/Company.vue";
import Customer from "~/components/customer/Customer.vue";
import DataView from "~/components/datatable/DataView.vue";
import InventoryHighlightCard from "~/components/inventory/InventoryHighlightCard.vue";
import Common from "~/components/parameter/Common.vue";
import PeopleInfo from "~/components/people/PeopleInfo.vue";

const inventoryHighlights = [
  {
    name: "Tổng số SKU",
    value: 12,
    icon: "material-symbols:deployed-code-outline",
    color: "blue",
  },
  {
    name: "Tổng tồn kho",
    value: "1,120",
    icon: "material-symbols:box-outline-rounded",
    color: "green",
    unit: "đơn vị",
  },
  {
    name: "Giá trị tồn kho",
    value: "294.5M",
    icon: "material-symbols:attach-money-rounded",
    color: "purple",
  },
  {
    name: "Sắp hết hàng",
    value: 3,
    icon: "material-symbols:warning-outline-rounded",
    color: "red",
    unit: "sản phẩm",
  },
];
</script>
<template>
  <div>
    <Teleport
      defer
      to="#header-right-slot"
      v-if="$store.tabinfo.tab.code === 'inventory'"
    >
      <div class="content buttons is-justify-content-flex-end">
        <button class="button fs-14">
          <span class="icon">
            <Icon
              :size="18"
              name="material-symbols:download-rounded"
            />
          </span>
          <span>Export</span>
        </button>
        <button class="button fs-14">
          <span class="icon">
            <Icon
              :size="18"
              name="material-symbols:upload-rounded"
            />
          </span>
          <span>Import</span>
        </button>
        <button class="button fs-14">
          <span class="icon">
            <Icon
              :size="18"
              name="material-symbols:sync"
            />
          </span>
          <span>Chuyển kho</span>
        </button>
        <button class="button fs-14 is-primary">
          <span class="icon">
            <Icon
              :size="18"
              name="material-symbols:add-rounded"
            />
          </span>
          <span>Điều chỉnh</span>
        </button>
      </div>
    </Teleport>
    <div class="fixed-grid has-2-cols-mobile has-4-cols">
      <div class="grid">
        <InventoryHighlightCard
          v-for="highlight in inventoryHighlights"
          :key="highlight.name"
          v-bind="highlight"
        />
      </div>
    </div>
    <div class="card is-clipped">
      <div class="card-content p-0">
        <p class="p-5 icon-text fs-16 font-semibold w-full">
          <span class="icon">
            <Icon
              name="material-symbols:deployed-code-outline"
              :size="20"
            />
          </span>
          <span>Danh sách tồn kho</span>
        </p>
        <div class="px-4 pb-4">
          <DataView
            v-bind="{
              api: 'Product_Variant',
              setting: 'inventory',
              pagename: 'inventory',
              params: {
                values:
                  'imeis__warehouse,imeis__warehouse__name,imeis__warehouse__address,id,code,product,product__name,product__os__name,product__external_storage__max_capacity,color,color__code,color__name,color__hex_code,ram,ram__code,ram__capacity,internal_storage,internal_storage__code,internal_storage__capacity,image,image__path,price,note,create_time,update_time',
                distinct_values: {
                  imei_count: { type: 'Count', field: 'imeis' },
                },
                summary: 'annotate',
                sort: 'id',
              },
              timeopt: { time: 36000 },
              modal: {
                component: 'imports/AddProduct',
                title: 'Tạo sản phẩm',
                width: '90%',
                height: 'auto',
              },
            }"
          />
        </div>
      </div>
    </div>
  </div>
</template>
