var tmpl=`
<div>
  <div style="padding:12px 0;width: 20px;height:20px;">
     <label for="uploads">
     <i class="iconfont" style="color: #108EE9 ;padding-right: 10px;cursor:pointer;">&#xe630;</i>
     </label>
     <input type="file" id="uploads" style="height:0;width:0;" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">
  </div>
  <div v-if="show">
      <div style="position: fixed;width:100%;z-index:999;background-color:black;top:0;left:0;right:0;bottom: 0;opacity: 0.5;"></div>
      <div style="position:fixed;top:15%;height:560px;left:35%;right:35%;z-index: 9999;background-color:white;" >
        <div class="cut" style="width:100%;text-align:center;margin: 0 auto;">
        <div style="width:96%;margin:0 2%;text-align:right;font-size:18px;"><i @click="hideCropper" class="el-icon-circle-close" style="cursor:pointer;"></i></div>
        <h3 v-if="!title">把不必要的部分裁剪掉，以保证搜索结果的准确性</h3>
        <h3 v-if="title">{{title}}</h3>
        <vue-cropper ref="cropper" :img="option.img" :output-size="option.size" :output-type="option.outputType" :info="true" :full="option.full"
        :can-move="option.canMove" :can-move-box="option.canMoveBox" :fixed-box="option.fixedBox" :original="option.original"
        :auto-crop="option.autoCrop" :auto-crop-width="option.autoCropWidth" :auto-crop-height="option.autoCropHeight" :center-box="option.centerBox"
            @real-time="realTime" :high="option.high"
          @img-load="imgLoad" ></vue-cropper>
        <slot></slot>
        <div>
          <label class="btn" for="uploads">重新选择</label>
          <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg"
          @change="uploadImg($event, 1)">
          <a @click="down(1)" class="btn">下载图片</a>
          <a  class="btn" @click="submit">提交图片</a>
        </div>
        </div>
      </div>
  </div>


</div>
`
module.exports=
`{
   template:\'${tmpl}\',
   model:{
    prop: "value",
    event: "change"
   },
   props:["title"],
   data:function(){
     return {
       title:this.title,
       model: false,
        modelSrc: "",
        crap: false,
        previews: {},
        lists: [
        ],
        option: {
          img: "",
          size: 1,
          full: false,
          outputType: "png",
          canMove: true,
          fixedBox: false,
          fixed:true,
          original: false,
          canMoveBox: true,
          autoCropWidth: "",
          autoCropHeight: "",
          autoCrop: true,
          centerBox: true,
          high: true
        },
        show: false,
        picName:"",
     }
   },
   watch:{

   },
   mounted:function(){

   },
   created:function(){

   },
   methods:{
     changeImg:function(){
        this.option.img = this.lists[~~(Math.random() * this.lists.length)].img
      },
      startCrop:function(){
        this.crap = true;
        this.$refs.cropper.startCrop();
      },
      stopCrop:function(){
       this.crap = false;
       this.$refs.cropper.stopCrop();
      },
      clearCrop:function(){
        this.$refs.cropper.clearCrop();
      },
      refreshCrop:function(){
        this.$refs.cropper.refresh();
      },
      changeScale:function(num){
        num = num || 1;
        this.$refs.cropper.changeScale(num);
      },
      rotateLeft:function(){
        this.$refs.cropper.rotateLeft();
      },
      rotateRight:function(){
        this.$refs.cropper.rotateRight();
      },
      finish:function(type){
        if (type == 'blob') {
          this.$refs.cropper.getCropBlob((data) => {
            console.log(data);
            var img = window.URL.createObjectURL(data);
            this.model = true;
            this.modelSrc = img;
          })
        } else {
          this.$refs.cropper.getCropData((data) => {
            this.model = true;
            this.modelSrc = data;
          })
        }
      },
      realTime:function(data){
        this.previews = data;
        console.log(data);
      },
      finish2:function(type){
        this.$refs.cropper2.getCropData((data) => {
          this.model = true;
          this.modelSrc = data;
        })
      },
      finish3:function(type){
        this.$refs.cropper3.getCropData((data) => {
          this.model = true;
          this.modelSrc = data;
        })
      },
      down:function(type){
        var aLink = document.createElement('a');
        aLink.download = 'demo';
        if (type === '2') {
          this.$refs.cropper.getCropBlob((data) => {
            this.downImg = window.URL.createObjectURL(data);
            aLink.href = window.URL.createObjectURL(data);
            aLink.click();
          })
        } else {
          this.$refs.cropper.getCropData((data) => {
            console.log(data);
            this.downImg = data;
            aLink.href = data;
            aLink.click();
          })
        }
      },
      uploadImg:function(e, num){
        console.log("++++++++133333+++++++++++++");
        var file = e.target.files[0];
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
          alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种');
          return false;
        }
        console.log("file");
        console.log(file);
        console.log(e);
        this.picName = file.name;
        var reader = new FileReader();
        var that = this;
        reader.onload=(e) => {
          var data=null;
          if (typeof e.target.result === 'object') {
            data = window.URL.createObjectURL(new Blob([e.target.result]));
          } else {
            data = e.target.result;
          }
          if (num == 1) {
            this.option.img = data;
          } else if (num == 2) {
            this.example2.img = data;
          }

          var image = new Image();
          image.src=data;
          image.onload=function(){
             that.option.autoCropWidth = image.width;
             that.option.autoCropHeight = image.height;
             console.log("+++++++++++++++++++++++++");
             console.log(that.option.autoCropWidth,that.option.autoCropHeight);
          };
        };
        reader.readAsArrayBuffer(file);
        this.show=true;
        var _input = $('#uploads');
        _input.val('');
      },
      imgLoad:function(msg){
        console.log("imgLoad");
        console.log(msg);
      },
      submit:function(){
        var aLink = document.createElement('a');
        var that=this;
        aLink.download = 'demo';
        const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$refs.cropper.getCropData((data) => {
          console.log(data);
          this.$root.postReq("/web/toolCtl/getCropperPic",{base64:data}).then(function(d){
            console.log("dddddddddddddgetCropperPic");
            console.log(d);
            this.show=false;
            if(d){
              that.submitSuccess(d);
            }else{
              that.submitError("error");
            }
            loading.close();
          }).catch(function (e) {
            that.submitError(e);
          });
        })
      },
      submitSuccess:function(d){
        this.$emit("submitSuccess",d,this.picName);
        var _input = $('#uploads');
        _input.val('');
        this.show=false;
      },
      submitError:function(e){
        this.$emit("submitError",e);
      },
      hideCropper:function(){
        var _input = $('#uploads');
        _input.val('');
        this.show=false;
        this.option.img="";
      }
   },
   vname:"gsb-cropper"
}`
