<script setup>
const props = defineProps({
  variant: Object,
  col: String,
});
const { $getdata } = useNuxtApp();
const imeisSoldInWarehouse = ref([]);
const stock = computed(() => props.variant.imei_count - imeisSoldInWarehouse.value.length);
const reserved = ref(0);
const available = computed(() => stock.value - reserved.value);
const isLoading = ref(false);

onMounted(async () => {
  // isLoading.value = true;
  // const imeisSold = await $getdata("IMEI_Sold", {
  //   // across all warehouses
  //   filter: {
  //     variant: props.variant.id,
  //   },
  // });
  // const imeisSoldStr = imeisSold.map(({ imei }) => imei);
  // // get records in IMEI with variant's id (id), warehouse id,
  // imeisSoldInWarehouse.value = await $getdata("IMEI", {
  //   filter: {
  //     imei__in: imeisSoldStr,
  //     warehouse: props.variant.imeis__warehouse || undefined,
  //   },
  // });
  // isLoading.value = false;
  // if (props.variant.id === 1) {
  //   // console.log("props.variant", props.variant);
  //   // console.log("props.variant.imeis__warehouse", props.variant.imeis__warehouse);
  //   // console.log("props.variant.imeis__warehouse__name", props.variant.imeis__warehouse__name);
  //   // console.log("imeisSold", imeisSold);
  //   // console.log(`imeisSoldInWarehouse ${props.variant.imeis__warehouse__name}`, imeisSoldInWarehouse);
  // }
});
</script>

<template>
  <p class="has-text-right">
    <span v-if="isLoading"></span>
    <span v-else-if="col === 'stock'">{{ stock }}</span>
    <span v-else-if="col === 'reserved'">{{ reserved }}</span>
    <span v-else-if="col === 'available'">{{ available }}</span>
  </p>
</template>
