var tmpl=`
<div style="position: relative"> 
<el-upload ref="upload" 
  class="avatar-uploader"
  :action="action"
  :data="d"
  :multiple="multiple"
  :on-exceed="onExceed"
  :accept="accept"
  :before-upload="beforeUpload"
  :on-success="success"
  :on-remove="remove"
  :on-error="error"
  :on-progress="progress"
  :show-file-list="showlist"
  :on-preview="preview">
  <slot>
  <div v-loading="loading">
    
    <el-popover v-if="result" placement="right" trigger="hover">
    
      <div style="width:auto;overflow: auto;text-align: center;"> 
        <img :src="result" style="width:150px;margin:0 auto;">
      </div>      
      <img :src="result" style="width:150px" slot="reference" class="avatar">
    </el-popover>
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </div>
  </slot>
</el-upload>
<a v-if="result && this.showClose==1" style="width: 20px;
    height: 20px;
    text-align: center;
    position: absolute;
    right: 0px;
    top: 0px;
    line-height: 17px;
    cursor:pointer;
    font-size: 20px;
    color: rgb(170, 170, 170);
    border: 1px solid rgb(204, 204, 204);" @click="delImg()">x<a/>
</div>
`
module.exports=
`{
   template:'${tmpl}',
   model:{
    prop: 'value',
    event: 'uploadsuccess'
   },
   props:["listtype","filetype","ifshowlist","value","flag","isShowClose","mtype"],
   data:function(){
     return {
       loading:false,
       d:{},
       action:'',
       result:this.value,
       multiple:false,
       accept:"",
       showlist:false,
       drag:false,
       listtype:"text",
       flag:this.flag,
       showClose:this.isShowClose,
     };
   },
   watch:{
     value:function(v){
        this.result=v;
     }
   },
   mounted:function(){
    if(this.filetype!=undefined && this.filetype!=null){
      this.accept=this.filetype;
    }
    if(this.ifshowlist!=undefined && this.ifshowlist!=null){
      this.showlist=this.ifshowlist;
    }
    if(this.isShowClose!=undefined && this.isShowClose!=null){
      this.showClose=this.isShowClose;
    }
    else{
       this.showClose=1;
    }    
    var that=this;


   },
   created:function(){

   },
   methods:{
     delImg(){
       this.$confirm('确定删除该图片?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.result="";
          this.$emit('uploadsuccess',this.result);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
     },
     getResult(){
        return this.result;
     },
     onExceed(files, fileList){
       this.$emit('onExceed',files, fileList);
     },
     async beforeUpload(file){
        var d= await this.$root.postReq("/web/transfer/tradetransferCtl/generateuploadfilepolicy",{mtype:this.mtype});
        this.d["key"]="key";
        this.d["Bucket"]=d.Bucket;
        this.d["OSSAccessKeyId"]=d.OSSAccessKeyId;
        this.d["Signature"]=d.Signature;
        this.d["policy"]=d.policy;
        this.d["success_action_status"]=201;
        this.action=d.url;
        this.$emit('beforeUpload',file,{"flag":this.flag,"key":this.d.key});

       if(this.accept!="" && (this.accept.indexOf(file.type) == -1 || file.type=="" || file.type==null)){
          this.$message.warning('文件格式错误，请上传'+this.accept+'格式文件');
          return false;
       }
     
       this.loading = true;
       this.result="";
       var myDate = new Date();
       var key = d.filedir+"/"+Math.round(Math.random()*500)+myDate.getMonth()+myDate.getTime()+myDate.getFullYear()+myDate.getDate()+myDate.getHours()+myDate.getMinutes()+myDate.getSeconds()+myDate.getMilliseconds()+file.name.replace(" ","");
       this.d.key=key;
       this.$emit('setKey',file.name,this.flag);
       console.log(JSON.stringify(d));
     },

     remove(file, fileList){
       this.$emit('remove',file, fileList);
     },
     error(err, file, fileList){
       this.$emit('error',err);
     },
     progress(event, file, fileList){
       console.log("progress");
     },
     preview(file){
       console.log("preview");
     },
     success(response, file, fileList){
       var xml= this.loadXML(response);
       this.result=xml.documentElement.getElementsByTagName("Location")[0].textContent;
       this.loading = false;
       this.$emit('uploadsuccess',this.result,{"flag":this.flag,"key":this.d.key});
     },
     loadXML(xmlString){
       var xmlDoc=null;
       if(!window.DOMParser && window.ActiveXObject){
           var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
           for(var i=0;i<xmlDomVersions.length;i++){
               try{
                   xmlDoc = new ActiveXObject(xmlDomVersions[i]);
                   xmlDoc.async = false;
                   xmlDoc.loadXML(xmlString);
                   break;
               }catch(e){
               }
           }
       }
       else if(window.DOMParser && document.implementation && document.implementation.createDocument){
           try{
               domParser = new  DOMParser();
               xmlDoc = domParser.parseFromString(xmlString, 'text/xml');
           }catch(e){
           }
       }
       else{
           return null;
       }
       return xmlDoc;
     },
   },
   vname:"gsb-aliupload"
}`
