{layout name="layout" /}
<link rel="stylesheet" type="text/css" href="{$yf_theme_path}public/css/bootstrap.css">
<style>
.user-detail .error{padding-left:5px;color:red;line-height:2.4em;}
.user-detail input[type=file]{
    position: absolute;
    top: 1px;
    left: 1px;
    margin: 0;
	height:100%;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index:999;
	cursor: pointer
}
.head-shell{float:left;display:inline-block;margin-top:-24px !important;}
.img-shell{width:88px;border-radius:50%;overflow:hidden;position:relative;}
.btn-edit{width:88px;border-radius:50%;overflow:hidden;line-height:88px !important;}
.detail-edit{margin-top:24px;}
.form-control{width:76%;}
.error{display:inline-block;}
</style>
<div class="sec-user clearfix">
    <div class="content">
        <div class="user-detail">
            <div class="detail-edit">
               <form method="post" id="userForm" action="{:url('profile')}" class="f-form person-form form-horizontal active">
                <div class="form-group f-item">
                            <label class="col-xs-2 control-label">头像</label>
                            <div class="col-xs-7">
                             <div class="head-shell tx-edit">
                                      <div class="img-shell">
                                        <input type="file" name="avatarbtn" id="avatarbtn" class="jquery-file-upload-file-input" >
                                        <input type="hidden" name="avatar" id="avatar" value="{$profile.avatar}" >
                                        <div class="attachments">{if condition="$profile['avatar']"}<img src="{$profile.avatar}" />{/if}</div>
                                      </div>
                                      <span class="btn-edit">修改</span>
				                      <div class="attachment-error-message"></div>
						     </div>
						    </div> 
                </div>
                <div class="form-group">
                            <label class="col-xs-2 control-label">用户名</label>
                            <div class="col-xs-7">
                            <input type="text" class="form-control" id="name" name="name" value="{$profile.name}" />
                            </div>
                </div>
                <div class="form-group">
                            <label class="col-xs-2 control-label">手机号码</label>
                            <div class="col-xs-7">
                            <input type="text" class="form-control" id="phone" name="phone" value="{$profile.phone}" />
                            </div>
                </div>
                <div class="form-group">
                            <label class="col-xs-2 control-label">职位</label>
	                        <div class="col-xs-7">
                            <input type="text" class="form-control" id="position" name="position" value="{$profile.position}" />
                            </div>
                </div>
                <div class="form-group">
                            <label class="col-xs-2 control-label">所属公司</label>
                            <div class="col-xs-7">
                            <input type="text" class="form-control" id="company" name="company" value="{$profile.company}" />
                            </div>
                </div>
                <div class="form-group">
                            <label class="col-xs-2 control-label">邮箱</label>
	                        <div class="col-xs-7">
                            <input type="text" class="form-control"  id="email" name="email" value="{$profile.email}" />
                            </div>
                </div>
                <div class="form-group">
                            <label class="col-xs-2 control-label"></label>
                            <div class="col-xs-7">
                            <button type="submit" class="btn-submit">保存</button>
                            </div>
                </div>
              </form>
            </div>
        </div>
        <div class="user-caidan">
           {include file="public:userinfo" /}
        </div>
    </div>
</div>

          <script src="{$yf_theme_path}/public/js/jquery.form.js"></script>
          <script src="{$yf_theme_path}/public/js/jquery.validate.min.js"></script>
          <script src="{$yf_theme_path}/public/js/jquery-ui-1.10.3.min.js"></script>
          <script src="{$yf_theme_path}/public/js/jquery.ui.widget.js"></script>
          <script src="{$yf_theme_path}/public/js/jquery.fileupload.js"></script>
          <script src="{$yf_theme_path}/public/js/base.js"></script>
          <script>
          function change(limit){
        	    var size = "";
        	    if(limit < 0.1 * 1024){                            //小于0.1KB，则转化成B
        	        size = limit.toFixed(2) + "B"
        	    }else if(limit < 0.1 * 1024 * 1024){            //小于0.1MB，则转化成KB
        	        size = (limit/1024).toFixed(2) + "KB"
        	    }else if(limit < 0.1 * 1024 * 1024 * 1024){        //小于0.1GB，则转化成MB
        	        size = (limit/(1024 * 1024)).toFixed(2) + "MB"
        	    }else{                                            //其他转化成GB
        	        size = (limit/(1024 * 1024 * 1024)).toFixed(2) + "GB"
        	    }

        	    var sizeStr = size + "";                        //转成字符串
        	    var index = sizeStr.indexOf(".");                    //获取小数点处的索引
        	    var dou = sizeStr.substr(index + 1 ,2)            //获取小数点后两位的值
        	    if(dou == "00"){                                //判断后两位是否为00，如果是则删除00                
        	        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
        	    }
        	    return size;
        	}
          //身份证号码的验证规则
          function isIdCardNo(num){ 
			          　   //if (isNaN(num)) {alert("输入的不是数字！"); return false;} 
			          　　 var len = num.length, re; 
			          　　 if (len == 15) 
			          　　 re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{2})(\w)$/); 
			          　　 else if (len == 18) 
			          　　 re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/); 
			          　　 else {
			                  //alert("输入的数字位数不对。"); 
			                  return false;
			              } 
			          　　 var a = num.match(re); 
			          　　 if (a != null) 
			          　　 { 
			          　　 if (len==15) 
			          　　 { 
			          　　 var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]); 
			          　　 var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; 
			          　　 } 
			          　　 else 
			          　　 { 
			          　　 var D = new Date(a[3]+"/"+a[4]+"/"+a[5]); 
			          　　 var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; 
			          　　 } 
			          　　 if (!B) {
			                  //alert("输入的身份证号 "+ a[0] +" 里出生日期不对。"); 
			                  return false;
			              } 
			          　　 } 
			          　　 if(!re.test(num)){
			                  //alert("身份证最后一位只能是数字和字母。");
			                  return false;
			              }
			          　　 return true; 
          } 
          function uploadPic(url,btn,input,current,num){
        	//插件jquery.fileupload.js
              jQuery(btn).fileupload({
                url: url,
                dataType: 'json',
                done: function (e, data) {
                  var file=data.result;
                  tool.msg(file['msg']);
                  if(file['code']==1){
                      var pic=file['data']['path'];
                      if(num==1){ 
	                      $(input).val(pic);
	                      $(btn).val(pic);
                      }else{
                    	  var cur=$(input).val();
                    	  var ipic='';
                    	  if(cur)ipic=cur+';'+pic;
                    	  else ipic=pic;
                    	  $(input).val(ipic);
                    	  
                      }
                  }
                },
                progressall: function (e, data) {
                  var progress = parseInt(data.loaded / data.total * 100, 10);
                  var count=$(".attachments").eq(current).find(".attachment").length;
                  var curbar=current;
                  if(num>1){
                  	curbar=count-1;
                  }
                  console.log('curbar:'+curbar);
                  $("#progressbar"+curbar).css({'width':progress+"%"});
                  if(progress==100){
               	   $("#progressbar"+curbar).delay(500).fadeOut();   
                  }
                }
              }).bind('fileuploadadd',function(e,data){
                    var file=data['files'][0];
                    var url = null;
                    if (window.createObjectURL != undefined) {
                      url = window.createObjectURL(file);
                    } else if (window.URL != undefined) {
                      url = window.URL.createObjectURL(file);
                    } else if (window.webkitURL != undefined) {
                      url = window.webkitURL.createObjectURL(file);
                    }
                    var name=file['name'];
                    var size=change(file['size']);
                    var count=$(".attachments").eq(current).find(".attachment").length;
                    var curbar=current;
                    if(num>1){
                    	curbar=count;
                    }
                    console.log('curbar2:'+curbar);
                    if(/^blob/.test(url)){
                       var html='<div class="attachment clearfix">';
                           html+='<div class="progress-bar" id="progressbar'+curbar+'" role="progressbar" aria-valuenow="0" data-transitiongoal="100" aria-valuemin="0" aria-valuemax="100"></div>';
                           html+='<div class="info clearfix"><div class="preview-area pull-left"><div class="preview"><img src="'+url+'" /></div></div>';
                           html+='<div class="status pull-left"><span class="file-name">'+name+'</span><span class="file-size-status">(<span class="file-size">'+size+'<span></span></span>)</span></div>';
                           html+='<div class="actions web-actions  pull-right"><a data-role="cancel" class="delete-link" href="javascript:void(0)">删除</a></div></div></div>';
                          if(num==1){ 
                            $(".attachments").eq(current).html(html);
                          }else{
                        	
                        	if(count>=num){
                        		tool.msg("超过允许上传图片张数");
                        	    return false;  
                        	}
                        	$(".attachments").eq(current).append(html);
                          }
                   
                    }
            }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
          }
          $(function(){
        	  var url="{:url('upload',['key'=>'avatarbtn'])}";
       	      uploadPic(url,"#avatarbtn","#avatar",0,1);
        	  // 手机号码验证    
        	    jQuery.validator.addMethod("isMobile", function(value, element) {    
        	      var length = value.length;    
        	      return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));    
        	    }, "请正确填写您的手机号码。");
        	    // 身份证号码验证
        	    jQuery.validator.addMethod("isIdCardNo", function(value, element) { 
        	      //var idCard = /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/;   
        	      return this.optional(element) || isIdCardNo(value);    
        	    }, "请输入正确的身份证号码。"); 
        	    
               var rules={
            		   "name":"required",
            		   "phone":{
          			     "required":true,
          			     "isMobile":true
          		       },
            		   "position":"required",
            		   "company":"required",
            		   "email":{
            			     "required":true,
              			     "email":true
              		    }
               };
               var messages={
            		   "name":"姓名必填",
            		   "phone":{
            			     "required":"手机号码必填",
            			     "isMobile":"请正确填写您的手机号码"
            		    },
            		   "position":"姓名必填",
            		   "company":"所属公司必填",
            		   "email":{
          			     "required":"邮箱必填",
          			     "email":"填写正确邮箱地址"
          		       }
               };
               tool.commonForm("#userForm",rules,messages);
          });
          </script>