<template>
  <div class="content-delete-cart">
    <div class="container is-fluid px-4">
      <div>
        <p>
          Bạn có chắc chắn muốn xóa lịch công nợ thời gian:
          {{ detail.time }} ngày - mẫu: [{{ detail.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, $deleteapi } = useNuxtApp();

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

const detail = JSON.parse(props.row?.detail || null);

const handleDeleteCart = async () => {
  const res = await $deleteapi("bizsetting", props.row.id);
  if (res) {
    emit("close");
    $snackbar("Xóa lịch công nợ thành công");
  }
};

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

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