/*
    ***MODIFICACION DEL 21/1/2019***

    TEMPLATE PADRE
    <div class="form-group" :class="{ 'has-error': form.errors.has('imagenes.imagen') }">
        <label for="texto" class="control-label col-lg-2" >Imagenes</label>
        <div class="col-lg-10">
            <div class="col-md-3">
                <subir-imagen v-for="(item,index) in form.imagenes"
                    :key="index"
                    :urlSubir="urlSubir"
                    :urlBorrar="urlBorrar"
                    :imagen.sync="item.imagen"
                    :puedoBorrar="puedoBorrarImagen"
                    @borrar="borrarImagen(index)"
                    @update="guardarCambios" />
            </div>
            <div class="col-md-1 ">
                <button class="btn btn-default" @click.prevent="agregarImagen">Agregar otra imagen</button>
            </div>
        </div>
    </div>
    METODOS NECESARIOS
    agregarImagen (){
        this.form.imagenes.push({imagen:''})
    },
    borrarImagen(index){
        this.form.imagenes.splice(index, 1)
    },
    guardarCambios(index){

    },
    COMPUTED
    computed: {
		puedoBorrarImagen() {
			return this.form.imagenes.length > 1
		}
	},

 */
<template>
    <div class="d-flex flex-column">
        <div class="thumbnail" v-if="image">
            <img :src="image" :alt="imagen" class="img-thumbnail" width="250px" height="250px">
        </div>
        <div class="thumbnail" v-else>
            <img src="http://via.placeholder.com/250x250?text=Imagen" class="img-thumbnail">
        </div>
        <div class="d-flex justify-content-between mt-2">
            <span  class="btn btn-warning btn-xs" v-if="cargando"><i class="fa fa-refresh fa-spin"></i> Cargando</span>
            <span class="btn btn-success btn-xs btn-file" v-else>
                <span v-if="imagen"><i class="fa fa-undo"></i> Cambiar</span>
                <span v-else ><i class="fa fa-upload"></i> Cargar</span>
                <input class="form-control" type="file" @change="onFileChange">
            </span>
            <button class="btn btn-danger btn-xs" @click.prevent="borrar()"><i class="fa fa-times"></i> Borrar</button>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                image: '',
                nombre:'',
                cargando: false
            }
        },
        props:['imagen','urlSubir','urlBorrar','puedoBorrar'],
        methods: {
            onFileChange(e) {
                this.cargando = true
                if(this.imagen){
                    this.borrar(this.imagen)
                }
                let files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createImage(files[0])
                this.nombre = files[0].name
            },
            createImage(file) {
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = (e) => {
                    this.image = e.target.result;
                    this.upload(file)
                };
            },
            upload(file){
                let data = new FormData();
                data.append('nombre', this.nombre);
                data.append('archivo', file);
                axios.post(this.urlSubir , data)
                    .then(response => {
                        this.$emit('update:imagen', response.data.archivo)
                        toastr.success(response.data.mensaje)
                        this.cargando = false
                    })
                    .catch(e =>{
                        toastr.error(e.response.data.mensaje)
                    });
            },
            borrar(imagenVieja){
                if(this.puedoBorrar || imagenVieja ){
                    axios.post(this.urlBorrar, {nombre: this.imagen})
                    .then(response => {
                        if (imagenVieja){
                            toastr.warning('Se borro la imagen anterior correctamente')
                        } else {
                            toastr.warning('Se borro la imagen correctamente')
                        }
                        this.$emit('update')
                    }).catch(response => {
                        toastr.warning('No se encontro la imagen por lo tanto se borro de la base de datos')
                    })
                    if(!imagenVieja){
                        this.$emit('borrar')
                    }
                } else {
                    toastr.error('Debe quedar al menos una imagen para el producto')
                }
            },
        },
        mounted(){
            if(this.imagen){
                this.image = '/images/subir-imagen/' + this.imagen
            }
        },
        watch: {
            imagen: function(data){
                this.image = '/images/subir-imagen/' + data
            }
        }
    }
</script>
