<template>
    <div>
        <vue-dropzone ref="myVueDropzone" id="dropzone" @vdropzone-removed-file="removeFile" :options="dropzoneOptions" @vdropzone-success="responseSuccess"></vue-dropzone>
    </div>
</template>

<script>
import Permissions from "@Global/utils/Permissions/list";
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
export default {
	props: {
        api: { default: null },
        defaultMessage: { default: "<i class='fa fa-cloud-upload'></i>آپلود فایل" },
        value: { default:() => ([]) },
        id:  { default: null },
        loadeFiles: {default:() => ([])},
	},
	components: {
    	vueDropzone: vue2Dropzone
  	},
	data() {
		return {
			dropzoneOptions: {
				url: this.api ? this.api : "https://httpbin.org/post",
				thumbnailWidth: 200,
				addRemoveLinks: true,
				dictDefaultMessage: this.defaultMessage
			},
		};
    },
    methods: {
        responseSuccess(file, response) {
            // this.value.push(response.data);
            // this.$emit('input', this.value);
        },
        removeFile(file, error, xhr) {
            // let index = this.value.findIndex(x => x == xhr.data);
            // this.value.splice(index, 1);
            // this.$emit('input', this.value);
        },
        manuallyLoadFiles(files) { //file =[ {size: 123, name: "Icon", type: "image/png", url: "https://myvizo.com/img/logo_sm.png"}]
            for (const file of files) {
                this.$refs.myVueDropzone.manuallyAddFile(file, file.url);
            }
        }
    },
    watch: {
        loadFiles(files) {
            this.manuallyLoadFiles(files);
        }
    },
};
</script>
