<template>
  <div>


    <span :class=" ' avatar-uploader ant-upload-picture-card-wrapper ' + (cls || '')  " >
      <div class="ant-upload ant-upload-select ant-upload-select-picture-card" @click="showCropper">
        <span role="button" tabindex="0" class="ant-upload">

          <img class="img-preview" v-if="showUrl" :src="showUrl" alt="avatar" />
          <div v-else-if="isReadonly !== true">
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">
              上传
            </div>
          </div>


        </span>

      </div>
    </span>
    <span v-if="isReadonly !== true">
       <a v-if="value" class="downloadfile"  :href="value" target="_blank">下载图片</a>
      <a v-if="value" class="delfile" @click="delFile">重置图片</a>
    </span>

    <mk-cropper ref="cropper" :cropWidth="cropWidth" :cropHeight="cropHeight" buttonText="" @save="selectedImage"></mk-cropper>
  </div>
</template>

<script>



export default {
  name: 'MkFormCropper',
  props: {
    value: String,
    cls:String,
    cropWidth: Number,
    cropHeight: Number,
    isReadonly:Boolean
  },
  data() {
    return {

      loading: false, 
      showUrl: ""
    }
  },
  created() {
    this.showUrl = this.$mk.getPreviewSrc(this.value);  
  },
  watch: {
    value() {
      this.showUrl = this.$mk.getPreviewSrc(this.value);
    },
     

  },
  methods: {
    showCropper() {
      if(this.isReadonly === true){
        return;
      }
      if(this.value){
        this.$hevueImgPreview(this.value)
      }else{
        this.$refs.cropper.show();
      }
      
    },
    delFile(){
      this.showUrl = "";
      this.$emit('input', "");
    },
    selectedImage({ url }) {
      this.showUrl = this.$mk.getPreviewSrc(url);
      this.$emit('input', url);
    }
  }
}
</script>

<style> .img-preview {
   width: 128px;
   height: 128px;
 }

 .avatar-uploader2 >.ant-upload{
  width: 258px !important;
    height: 128px !important;
 }

 .avatar-uploader2 .img-preview {
  width: 258px !important;
  height: 128px !important;
 }
 .delfile,.downloadfile{
  font-size: 12px;
  color:#333;
  text-decoration: underline;margin-right: 6px;
 }
</style>