<style>
.uploadsbox{position:relative;cursor:pointer;}
.uploadsbox form{display: inline-block;}
.uploadsbox input[type='file']{position:absolute;left:0px;top:0px;
	width:100%;height:100%;z-index:100;opacity:0;cursor:pointer; 
}
</style>
<template>
<div class="uploadsbox" v-bind:class="class"
	:style="{display:display}"
>
	<slot></slot>
	<iframe  class="upload-iframe" :id="iframeName" :name="iframeName" @load="loaded" >
		
	</iframe>
    <form  action="/file/uploads/image" method="post" 
     enctype="multipart/form-data"  :target="iframeName" :id="formId"  	>
      

      <input type="file" name="uploadFile" :multiple="multiple" 
      v-on:change="upload" v-show="readonly" >
      <input type="hidden" name="dataguid" id="dataguid" v-model="sdguid">
      <input type="hidden" name="type" v-model="type">
      <input type="hidden" name="maxNum" v-if="multiple==true" v-model="maxNum">
      <input type="hidden" name="maxNum" v-if="multiple==false" v-model="1">
    </form>
</div>
</template>
<script>
module.exports={
	data:function(){
		return {
			iframeName:'uploadsbox_'+Math.random().toString(16).substr(2),
			formId:'uploadsform_'+Math.random().toString(16).substr(2)
		}
	},props:{
		display:{
			type:String,
			default:'inline-block'
		},
		type:{
			type:String,
			default:'image'
		},
		class:{
			type:Array,
			default:[]
		},multiple:{
			type:Boolean,
			default:true
		},readonly:{
			type:Number,
			default:1
		},
		sdguid:{
			type:String,
			default:'22222'
		},
		// 当前最大可以上传的图片数量
		maxNum:{
			type:Number,
			default:4	
		}
	},methods:{
		loaded:function(event){
			var content = "";
			var pre=event.target.contentWindow.document.body.querySelector('pre') || '';
			if(!pre){
				pre = document.getElementById(this.iframeName).contentWindow;       
				content = pre.document.body.innerText || '';
				if(content==''){
				  return ;
				}
			}else{
				if(!pre){
				  return ;
				}
				content=pre.innerHTML;        
			}

			var backObj = {};
			backObj.sdguid = this.sdguid;
			try{
				var result=JSON.parse(content);
				if(result.errorCode=='0'){
					backObj.data = result.data;
					var fileJsonStr = JSON.stringify(backObj);
					this.model = fileJsonStr;
					this.$emit('file-change', fileJsonStr);
				}else{
          			this.MessageBox.alert(result.message); 
				}
			}catch(e){
          		this.MessageBox.alert(e.message); 
			}
		},
		upload:function(){
			document.querySelector('#'+this.formId).submit();
		}
	}
}
</script>