<template>
    <div class="upload-example">
        <img class="upload-example-cropper" width="220px" height="220px" :src="media"/>
        <div class="button-wrapper">
            <v-btn
                large
                :color="$_color('product_option')"
                @click.native="$refs['image_'+uniqueId][0].click()"
                light
            >
                <input
                    type="file"
                    :ref="'image_'+uniqueId"
                    :name="'image_' + uniqueId"
                    v-show="false"
                    @change="uploadImage($event, val)"
                    accept="image/*"
                />
                <v-icon dark>WMi-upload</v-icon>
                آپلود عکس
            </v-btn>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            batch_id: {default: '', type: String},
            media: {default: '', type: String},
        },
        data: () => ({
            uniqueId: Math.floor(Math.random() * 10000),
        }),
        methods: {
            uploadImage(event, value) {
                // Reference to the DOM input element
                var input = event.target;
                // Ensure that you have a file before attempting to read it
                if (input.files && input.files[0]) {
                    this.$axios.post(this.$_url('file'), {file: input.files[0]}, {
                        before: (xhr) => {
                            this.$emit('before', true);
                            //maybe do something else here
                        },
                    }).then((response) => {
                        this.media = response.data.media;
                        this.$emit('uploaded', response.data)
                    });
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    /*.upload-example-cropper {*/
    /*    margin: 0 auto;*/
    /*    border: solid 1px #d2d2d2;*/
    /*    height: 220px;*/
    /*    width: 220px;*/
    /*    border-radius: 5px;*/
    /*}*/
</style>
