<template>
  <div>
    <button
      @click="openFile(row)"
      class="button is-small is-ghost"
    >
      <span class="icon">
        <Icon
          name="material-symbols:open-in-new-rounded"
          :size="18"
        />
      </span>
    </button>
    <button
      @click="download(row)"
      class="button is-small is-ghost"
    >
      <span class="icon">
        <Icon
          name="material-symbols:download-rounded"
          :size="18"
        />
      </span>
    </button>
    <button
      @click="remove"
      class="button is-small is-ghost"
    >
      <span class="icon">
        <Icon
          name="material-symbols:delete-outline-rounded"
          :size="18"
          class="has-text-danger"
        />
      </span>
    </button>
    <Modal
      v-if="showModal"
      v-bind="showModal"
      @close="showModal = undefined"
    />
  </div>
</template>
<script setup>
import Modal from "~/components/Modal.vue";

const { $getpath } = useNuxtApp();

const showModal = ref();
const props = defineProps(["api", "pagename", "row", "disable"]);
const emit = defineEmits(["open"]);

async function openFile(row) {
  const url = `${$getpath()}static/files/${row.file__file || row.file}`;
  window.open(url, "_blank");
}

async function download(row) {
  const url = `${$getpath()}static/files/${row.file__file || row.file}`;
  const link = document.createElement("a");
  link.href = url;
  link.target = "_blank";
  link.setAttribute("download", row.file);
  link.click();
}

function remove() {
  showModal.value = {
    component: "dialog/Delete",
    title: "Xóa file",
    width: "500px",
    height: "auto",
    vbind: {
      content: `Bạn có muốn xóa file <b>${props.row.name}</b> không?`,
      duration: 10,
      vbind: {
        row: props.row,
        api: props.api,
        pagename: props.pagename,
      },
    },
  };
}
</script>
