<template>
  <p class="py-1 border-bottom" v-for="(v,i) in vfiles">
    <a class="mr-4" @click="open(v)">{{ v.name }}</a>
    <a class="mr-4" @click="download(v, i)">
      <SvgIcon v-bind="{name: 'download1.svg', type: 'dark', size: 16}"></SvgIcon>
    </a>
    <a @click="remove(v, i)" v-if="show? show.delete : false">
      <SvgIcon v-bind="{name: 'bin1.svg', type: 'dark', size: 16}"></SvgIcon>
    </a>
  </p>
  <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
</template>
<script setup>
  const { $copy, $getpath, $download } = useNuxtApp()
  const emit = defineEmits(['remove', 'close'])
  var props = defineProps({
    files: Object,
    show: Object
  })
  var showmodal = ref()
  var vfiles = ref($copy(props.files))
  function remove(v, i) {
    vfiles.value.splice(i, 1)
    emit('remove', {v: v, i: i})
    emit('modalevent', {name: 'removefile', data: {v: v, i: 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, (newVal, oldVal) => {
  vfiles.value = props.files
})
</script>