<template>
		<div class="picture">	
			<input type='file' :id="information" :ref="pic" @change="handle">
				<div class="camera">		
			        <label :for="information"><i class="iconfont icon-zhaoxiangji"  v-show="!seen"></i>
							<img :src="dataUrl"  v-show="seen"/>
			        </label>	   			        
        </div>
			</div>
</template>
<script>
	export default{
		data(){
        return{
        	 images: [],
        	 dataUrl: '',
        	 seen:false,
           infor:'',
           picture:''
        	}
		},
		props:['information','pic'],
		 methods: {
		 	imgPreview (file) {
            let self = this;
            if (!file || !window.FileReader) return;
            if (/^image/.test(file.type)) {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onloadend = function () {
                    self.dataUrl = this.result;
                    // this.seen=true;
                }
            }
            if(self.dataUrl==" "){
            	this.seen=false;
            }
            else{ 
            	this.seen=true;
            }
        },
    handle(e){
    	    let picture = this.pic;
    	    console.log(picture)
    	     let inputDOM = this.$refs[picture];
            this.file   = inputDOM.files[0];
            this.errText = '';
            let size = Math.floor(this.file.size / 1024);
            this.$emit('input', this.file);   
            this.file = inputDOM.files[0];
            this.fileName = this.file.name;
            this.imgPreview(this.file);   
    }
  }

	}
</script>
<style scoped>
.picture{
	display: inline-block;
	width: 2rem;
	input{
						visibility: hidden;
						z-index: -9999;
						width: 2rem;
					}
	.camera{
					width: 1.944444rem;
					height: 1.944444rem;
					border-radius: 10px;
					border: solid 2px #60c0ff;
					text-align: center;
					margin: 0 auto;
					position: relative;
					overflow: hidden;
					label{			
						img{
						width: 100%;
						align-self: center;
						position:absolute;
						top: 50%;
						transform: translateY(-50%);
						left: 0;
					}
					.icon-zhaoxiangji{
					     font-size: 1rem;
					     color: #60c0ff;
					     line-height: 1.94444rem;
					     display: inline-block;
				}
					}	
					
				}
}
</style>