<script setup>
import ProductCard from "@/components/pos/ProductCard.vue";

const store = useStore();
function selectProduct() {
  store.showmodal = {
    component: "pos/ProductSelection",
    title: "Chọn sản phẩm",
    width: "85%",
    height: "80%",
  };
}
</script>

<template>
  <div class="card">
    <div class="card-content">
      <button
        @click="selectProduct"
        class="button is-primary"
      >
        <span class="icon">
          <Icon
            name="material-symbols:add-rounded"
            :size="20"
          />
        </span>
        <span>Chọn sản phẩm</span>
      </button>
    </div>
  </div>
  <div class="fixed-grid has-12-cols">
    <div class="grid">
      <div class="cell is-col-span-8">
        <div class="card">
          <div class="card-content">
            <p class="icon-text fs-17 font-semibold mb-4">
              <span class="icon">
                <Icon
                  name="material-symbols:shopping-cart-outline-rounded"
                  :size="18"
                />
              </span>
              <span>Giỏ hàng</span>
            </p>
            <div class="is-flex is-flex-direction-column is-gap-1">
              <ProductCard
                v-for="imei in store.selectedImeis"
                :key="imei.id"
                :imei="imei"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="card">
          <div class="card-content">
            <p class="icon-text fs-17 font-semibold mb-4">
              <span class="icon">
                <Icon
                  name="material-symbols:supervisor-account-outline-rounded"
                  :size="18"
                />
              </span>
              <span>Khách hàng</span>
            </p>
            <div>customers content</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
