<template>
  <div class="content-delete-cart">
    <div class="container is-fluid px-4">
      <div v-if="productRes.length">
        <p>
          Không thể thực hiện thao tác vì giỏ hàng vẫn còn sản phẩm. Vui lòng xóa toàn bộ sản phẩm trong giỏ hàng trước
          khi tiếp tục.
        </p>
      </div>
      <div v-else>
        <p>
          Bạn có chắc chắn muốn xóa giỏ hàng [{{ props.row.code.toUpperCase() }} – {{ props.row.name.toUpperCase() }}]
          không?
        </p>
        <div class="action mt-3">
          <button
            class="button is-light"
            @click="handleCancel"
          >
            Hủy
          </button>
          <button
            class="button is-primary"
            @click="handleDeleteCart"
          >
            Đồng ý
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const { $snackbar, $getdata, $deleteapi, $copy } = useNuxtApp();

const emit = defineEmits(["close"]);
const props = defineProps({
  row: Object,
});

const productRes = await $getdata("product", { cart: props.row.id });
const cartRes = await $getdata("cart");
$copy("cart", cartRes);
const handleDeleteCart = async () => {
  const res = await $deleteapi("cart", props.row.id);
  if (res) {
    emit("close");
    $snackbar("Xóa giỏ hàng thành công");
  }
};

const handleCancel = () => {
  emit("close");
};
</script>

<style>
.content-delete-cart .action .button + .button {
  margin-left: 20px;
}
</style>
