<template>
    <div class=" flex flex-wrap  px-4">
        <div class="w-64 h-64 overflow-hidden relative text-center mr-3 mb-3"  v-for="(image, index) in images" :key="index">
            <a :href="rootUrl+image.path" target="_blank">
                <img :src="pdf" v-if="image.extension == 'pdf'" class="max-w-full">
                <template v-else>
                    <img  :src="image" v-if="isadd" class="max-w-full">
                    <img  :src="rootUrl+image.path" v-else class="max-w-full">
                </template>
            </a>
            <div class="absolute  w-full py-2 bottom-0 z-2 bg-gradient-to-t text-white from-black to-transparant cursor-pointer" @click="removeImage(image, index)">Remove</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        images: {
            type: Object,
            required: false,
            default: null
        },
        product:{
            default: null
        },
        isadd:{
            default: false
        },
        deleteRoute:{
            default: ''
        }
    },
    data() {
        return {
            rootUrl: window._asset,
            pdf: window._asset+'admin/img/pdf.png'
        };
    },

    methods:{
        removeImage(image, index){
            if(this.deleteRoute != ''){
                this.$inertia.delete(route(this.deleteRoute, image));
            }else{
                this.isadd ? this.removeAddImage(index) : '';
            }
        },

        removeAddImage(index){
            this.$emit('event', index)
        }
    }
}
</script>
