<template>
    <div class="components-container">
      <aside>This is based on
        <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
        {{ $t('components.imageUploadTips') }}
      </aside>
  
      <pan-thumb :image="image" />
  
      <el-button type="primary" icon="el-icon-upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
        Change Avatar
      </el-button>
  
      <image-cropper
        v-show="imagecropperShow"
        :key="imagecropperKey"
        :width="300"
        :height="300"
        url="https://httpbin.org/post"
        lang-type="en"
        @close="close"
        @crop-upload-success="cropSuccess"
      />
    </div>
  </template>
  
  <script>
  import ImageCropper from '@/components/ImageCropper'
  import PanThumb from '@/components/PanThumb'
  
  export default {
    name: 'AvatarUploadDemo',
    components: { ImageCropper, PanThumb },
    data() {
      return {
        imagecropperShow: false,
        imagecropperKey: 0,
        image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
      }
    },
    methods: {
      cropSuccess(resData) {
        this.imagecropperShow = false
        this.imagecropperKey = this.imagecropperKey + 1
        this.image = resData.files.avatar
      },
      close() {
        this.imagecropperShow = false
      }
    }
  }
  </script>
  
  <style scoped>
    .avatar{
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }
  </style>