<template>
    <div>

        <div style="text-align: center">
            <img :src="imgDataUrl"><br>
            <v-btn
                    depressed
                    @click="toggleShow"
            >Upload new Image</v-btn>
        </div>
        <my-upload field="img"
                   @crop-success="cropSuccess"

                   v-model="show"
                   :width="300"
                   :height="300"
                   :url="uploadUrl"
                   :params="params"
                   :headers="headers"
                   lang-type="en"
                   img-format="png"></my-upload>

    </div>
</template>
<script>
    //import 'babel-polyfill'; // es6 shim
    import myUpload from 'vue-image-crop-upload';

    export default {
        data () {
            return {
                show: false,
                uploadUrl: process.env.VUE_APP_API_URL+"api/v1/app/"+this.appId+"/changeImage",
                params: {
                    token: '123456798',
                    name: 'avatar'
                },
                headers: {
                    Authorization: 'ERROR'
                },
                imgDataUrl: '' // the datebase64 url of created image
            }
        },
        props: [
            'appId',
        ],
        components: {
            'my-upload': myUpload
        },
        mounted: function() {
          let token = localStorage.getItem("access_token");
          this.headers["Authorization"] = "Bearer "+token
        },
        methods: {
            toggleShow() {
                this.show = !this.show;
            },
            /**
             * crop success
             *
             * [param] imgDataUrl
             * [param] field
             */
            cropSuccess(imgDataUrl, field){
                this.imgDataUrl = imgDataUrl;
            },
        }
    }
</script>
