<upload
              :key="1"
              :url="$apiUrl + 'file/?folder=products'"
              :thumb-url="() => blob"
              :btn-label="$t('upload.file')"
              :blob-type="blobType"
              accept=""
              :max-size="20971520"
              :success="successFileUpload"
            />
<upload
                  :key="2"
                  :url="$apiUrl + 'file/?folder=products-interior'"
                  :success="successPhotoUpload"
                  :photos="Photos"
                  :multiple="true"
                />

<template>
  <div class="upload-file">
    <div v-if="!multiple" class="upload-file-preview">
      <img v-if="blobType === 'image' && thumbUrl()" :src="thumbUrl()" alt="" />
      <video
        v-if="blobType === 'video' && thumbUrl()"
        :src="thumbUrl()"
        controls
      />
      <p v-if="blobType === 'application' && thumbUrl()">
        {{ thumbUrl().source }}
      </p>
    </div>
    <div v-if="multiple" class="upload-file-preview resources">
      <img
        v-for="(photo, idx) in photos"
        :key="idx"
        :src="photo.previewUrl"
        alt=""
      />
    </div>
    <file-upload
      :url="url"
      :thumb-url="thumbUrl"
      :btn-label="multiple ? 'test' : $t('upload.file')"
      :accept="accept"
      :max-size="maxSize"
      :headers="{
        Authorization: $cookies.get('token')
      }"
      @success.prevent="success"
    />
    <div
      v-if="blobType === 'application' && thumbUrl().resources && !multiple"
      class="upload-file-preview resources"
    >
      <img v-for="(r, idx) in thumbUrl().resources" :key="idx" :src="r" />
    </div>
    <file-upload
      v-if="blobType === 'application' && !multiple"
      :url="url"
      :thumb-url="thumbUrl"
      :btn-label="$t('upload.resources')"
      :accept="accept"
      :max-size="maxSize"
      :headers="{
        Authorization: $cookies.get('token')
      }"
      @success="success"
    />
  </div>
</template>
<script>
export default {
  name: "Upload",
  props: {
    thumbUrl: {
      type: Function,
      default: () => null
    },
    url: {
      type: String,
      required: true
    },
    success: {
      type: Function,
      required: true
    },
    blobType: {
      type: String,
      default: "image"
    },
    accept: {
      type: String,
      default: ".png,.jpg"
    },
    maxSize: {
      type: Number,
      default: 15728640
    },
    multiple: {
      type: Boolean,
      default: false
    },
    photos: {
      type: Array,
      default: () => []
    }
  }
};
</script>