<script setup>
const props = defineProps({ variant: Object });
const showDetailsModal = ref();

function openDetailsModal() {
  showDetailsModal.value = {
    component: "inventory/InventoryItemDetails",
    title: "Chi tiết sản phẩm",
    width: "min(700px, 75%)",
    vbind: {
      variant: props.variant,
    },
  };
}
</script>

<template>
  <a @click="openDetailsModal">
    {{ variant.product__name }}
  </a>
  <p class="has-text-grey">
    {{ variant.color__code }} - {{ variant.ram__code }}
    {{ variant.internal_storage__code }}
  </p>
  <Modal
    v-if="showDetailsModal"
    v-bind="showDetailsModal"
    @close="showDetailsModal = null"
  />
</template>
