{template Public:Page:header}

<div class="container">
  <div class="row">
  
    {template Member:Index:sidebar}
    
    <div class="col-lg-10 well-col-pl-30">
      <div class="row">
            <div class="well">

                <h3>免费开店</h3>
               	<div class="row">
                      <div class="col-lg-12 col-sm-12 col-xs-12">
                        <div class="wizard wizard-wired">
                          <ul class="steps">
                            <li class="complete" data-target="#wiredstep1"><span class="step">1</span><span class="title">填写店铺信息</span> <span class="chevron"></span></li>
                            <li class="active" data-target="#wiredstep2"><span class="step">2</span><span class="title">实名认证</span> <span class="chevron"></span></li>
                            <li data-target="#wiredstep3"><span class="step">3</span><span class="title">审核</span> <span class="chevron"></span></li>
                          </ul>
                        </div>
                      </div>
                </div>

        
            <br />
        <div class="row"> 
        <div class="col-lg-11 col-lg-offset-1">

          
                
                 <div class="row">
        
    
               <h4>认证类型：</h4>
     			
                <div class="col-lg-4">
                 <div class="row">
             	<select name="usertype" id="UserType" class="form-control">
             	  <option value="1"{if $certificate['usertype']==1 || empty($certificate['usertype'])} selected="selected"{/if}>个人</option>
                  <option value="2"{if $certificate['usertype']==2} selected="selected"{/if}>企业</option>
             	</select>
                </div>
                </div>
                </div>
        		<br>
  
  				<div class="row">
        
    
               <h4 id="CertificateName"></h4>
     			
                <div class="col-lg-4">
                 <div class="row">
             	<input type="text" name="realname" id="RealName" AUTOCOMPLETE="off" value="{if !empty($certificate['realname'])}{echo $certificate['realname']}{/if}" class="form-control">
                </div>
                </div>
                </div>
        		<br>
  
 			   <div class="row">
        
               <h4 id="CertificateUploadName"></h4>
     			{template Public:Page:webuploader}
                
                <div class="col-lg-4">
                 <div class="row">

                    <div class="certificate_600">{if !empty($certificate['filepath'])}<a href="/{echo $certificate['filepath']}" target="_blank"><img src="/{echo $certificate['thumbcut']}" /></a>{/if}</div>

                </div>
                
                <div class="row">
                 <div class="progress progress-striped active" style="display:none">
                        <div style="width: 10%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar progress-bar-info" id="progress-avatar"> 等待上传  </div>
                      </div>
              
                    <div id="SelectCertificate">选择证件照片</div>
                 </div>
                    
                    
                </div>
                </div>
      	  
             <br>
             </div>
             

             <div class="row">
               <div class="col-lg-11 col-lg-offset-1">
               	<button class="btn btn-success" type="submit" id="SubmitCertificate">提交申请</button>
               </div>
            </div>

   
				</div>
               
            </div>
    </div>
  </div>
</div>
</div>

<script src="{echo AURL}/js/validation/bootstrapValidator.js"></script>
<script>		
function SetInfo(){
	var usertype=$('#UserType option:selected').val();
	if(usertype==1){
		$('#CertificateName').html('姓名：');
		$('#CertificateUploadName').html('上传身份证：(600px以上像素)');
	}else{
		$('#CertificateName').html('企业名称：');
		$('#CertificateUploadName').html('上传企业营业执照：(600px以上像素)');
	}
	return usertype;
}

$("#UserType").change(function(){
  SetInfo();
});

$(function(){
	SetInfo();
	var uploader = WebUploader.create({

		swf: AURL+'/plugin/webuploader/Uploader.swf',
	
		server: '/post/shop/certificate',

		pick: '#SelectCertificate',
		
		fileNumLimit:1,
		
		fileSizeLimit:1232896,
		
		fileSingleSizeLimit:1232896,

		// 只允许选择图片文件。
		accept: {
		   title: 'gif,jpg,png',
		   extensions: 'gif,jpg,png',
		   mimeTypes: 'image/*'
		}
		
		
	});
	
	
	uploader.on( 'beforeFileQueued', function( file ) {
		uploader.reset();
	});
	

	uploader.on( 'fileQueued', function( file ) {

	   
	   var html = $('<div id="' + file.id + '"><img></div>');
	   $('.certificate_600').html(html);

	   var img600 = html.find('img');
		uploader.makeThumb( file, function( error, src ) {
			if ( error ) {
				img600.replaceWith('<span>不能预览</span>');
				return;
			}

			img600.attr( 'src', src );
		}, 600,600 );
	   
	   $('.progress').show(500);
	   
	});
	
	 //进度条
	uploader.on( 'uploadProgress', function( file, percentage ) {
		var percentage=percentage * 100 + '%';
		$('#progress-avatar').html(percentage);
		$('#progress-avatar').css( 'width',percentage);
	});
	
	
	uploader.on( 'uploadSuccess', function( file ) {
		 bootbox.dialog({
			 buttons: {  
			  cancel: {  
				 label: '确认',  
				 callback: function () { window.location.href='/seller/shop/check'}
			  }  
		   },  
		   title:'提示',
		   message: '<i class="glyphicon glyphicon-warning-sign"></i> 恭喜您,上传成功啦！', 
			
		  });
	});
	
	uploader.on( 'uploadError', function( file,reason ) {
		
		 bootbox.dialog({
			 buttons: {  
			  cancel: {  
				 label: '确认',  
			  }  
		   },  
		   title:'提示',
		   message: '<i class="glyphicon glyphicon-warning-sign"></i> '+reason, 
			
		 });
	   
	});
	
	uploader.on( 'uploadComplete', function( file ) {
		$('.progress').fadeOut();
	});

	
	 $('#SubmitCertificate').on( 'click', function() {
		 
		 var realname=$('#RealName').val();
		
		 if(!realname){
			 if(SetInfo()==1){
			 	var message='请输入姓名';
			 }else{
				var message='请输入公司名称';
			 }
			 bootbox.alert({ 
				size: 'small',
				message: message
			 })
			 return false; 
		 }
		 
		 uploader.options.formData={SecurityForm:SecurityForm,realname:$('#RealName').val(),usertype:$('#UserType option:selected').val()};
		 uploader.upload();
		
	});	
	
  
});
</script>
{template Public:Page:footer}