<template>
  <p
    v-for="(v, i) in vfiles"
    class="py-1"
  >
    <a
      class="mr-4"
      @click="open(v)"
      >{{ v.name }}</a
    >
    <a
      class="mr-4"
      @click="download(v, i)"
    >
      <span class="icon">
        <Icon
          name="material-symbols:download-rounded"
          :size="18"
        />
      </span>
    </a>
    <a
      v-if="show?.delete"
      @click="remove(v, i)"
    >
      <span class="icon">
        <Icon
          name="material-symbols:delete-outline-rounded"
          :size="18"
        />
      </span>
    </a>
  </p>
  <Modal
    v-if="showmodal"
    v-bind="showmodal"
    @close="showmodal = undefined"
  />
</template>
<script setup>
const { $copy, $getpath } = useNuxtApp();
const emit = defineEmits(["remove", "close"]);
const props = defineProps({
  files: Object,
  show: Object,
});
const showmodal = ref();
const vfiles = ref($copy(props.files));
function remove(v, i) {
  vfiles.value.splice(i, 1);
  emit("remove", { v, i });
  emit("modalevent", { name: "removefile", data: { v, i } });
  if (vfiles.value.length === 0) emit("close");
}
function open(v) {
  if (v.name.indexOf(".png") >= 0 || v.name.indexOf(".jpg") >= 0 || v.name.indexOf(".jpeg") >= 0) {
    showmodal.value = {
      title: v.file__file || v.file,
      component: "media/ChipImage",
      vbind: {
        extend: false,
        file: v,
        image: `${$getpath()}static/files/${v.file__file || v.file}`,
      },
    };
    return;
  }
  window.open(`${$getpath()}static/files/${v.file__file || v.file}`);
}
function download(v) {
  window.open(`${$getpath()}static/files/${v.file}`, v.name);
}
watch(
  () => props.files,
  () => {
    vfiles.value = props.files;
  },
);
</script>
