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

const props = defineProps({
  product: Object,
});

const { $deleteapi } = useNuxtApp();
const showConfirmModal = ref(null);

function displayModal() {
  showConfirmModal.value = {
    component: "dialog/Confirm",
    title: "Xoá sản phẩm",
    width: "500px",
    height: "auto",
    vbind: {
      content: `Bạn xác nhận xoá sản phẩm <b>${props.product.name}</b>?`,
      onModalevent: deleteProduct,
    },
  };
}

const refreshData = inject("refreshData");
async function deleteProduct() {
  const res = await $deleteapi("product", props.product.id);
  if (res !== "error") {
    if (refreshData) refreshData();
  }
}
</script>

<template>
  <a
    class="has-text-danger"
    @click="displayModal"
  >
    <span class="icon">
      <Icon
        name="material-symbols:delete-outline-rounded"
        :size="18"
      />
    </span>
    <Modal
      v-if="showConfirmModal"
      v-bind="showConfirmModal"
      @close="showConfirmModal = null"
    />
  </a>
</template>
