<template>
    <div class="flex flex-wrap">
        <!-- <div v-for="(image , index) in images" :key="index" class="w-40 mr-2 mb-2 h-40 overflow-hidden items-center flex bg-gray-200 rounded-sm">
            <img :src="image" alt="">
        </div> -->

        <image-preview :images="images" :isadd="true" @event="imageRemoved"/>

        <div v-for="(error , i) in errors" :key="i" class="w-full">
            <p v-if="i.startsWith('file')"  class="text-red-600 w-full">{{error}}</p>
        </div>

        <div class="w-full mt-8">
            <span class="relative bg-green-500 text-white  active:bg-green-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150">
            Add Images
                <input
                    class="absolute opacity-0 top-0 left-0 w-full h-full"
                    type="file"
                    accept="image/*"
                    ref="photo"
                    @change="addImageView"
                    :required="required ? true : false"
                />
            </span>
        </div>

    </div>
</template>


<script>
import ImagePreview from "@/components/Form/ImagePreview.vue"
export default {
    components:{
        ImagePreview
    },
    props:{
        required:{
            default: false,
            type: Boolean
        },
        file:{
            default:[]
        },
        errors:{
            default : ''
        }
    },
    data(){
        return{
            images:[],
        }
    },
    methods:{
        addImageView(event){
            const reader = new FileReader();
                reader.onload = (e) => {
                     this.images.push(e.target.result);
                };
                this.file.push(this.$refs.photo.files[0]);
                reader.readAsDataURL(this.$refs.photo.files[0]);
                this.$emit("update:files", this.file);
        },

        imageRemoved(index){
            this.file.splice(index, 1);
            this.images.splice(index, 1);
        }
    }
}
</script>
