<!--{include file="<!--{$oapath}-->public/ins_page.tpl"}-->
<block name="content">
	<div class="page-header">
	<h1>职员查询</h1>
</div>
	<div class="row">
		<div class="col-sm-4 sub_left_menu">
			<div class="well">
				<!--{$menu}-->
			</div>
		</div>
		<div class="col-sm-8" >
			<div class="ul_table border-bottom user_list ul_table-responsive"  >
				<ul>
					<li class="thead">
						<div class="pull-left">
							<span class="col-8 hidden-xs" >员工编码</span>
							<span class="col-8" >姓名</span>
							<span class="col-8">职位</span>
							<span class="col-6 hidden" >职级</span>
							<span class="col-10" >手机</span>
						</div>
						<div class="auto autocut hidden-xs">
							<span style="width:100%;">邮件</span>
						</div>
					</li>
				</ul>
			</div>
			<div class="hidden-xs">
				<div class="col-sm-4 text-center">
					<img id="emp_pic" class="img-thumbnail" onerror="javascript:this.src='<!--{$oapath}-->Ins/img/no_avatar.jpg'"/>
				</div>
				<div class="col-sm-8 user_info">
					<table class="table table-bordered">
						<tr>
							<th class="th" style="width:30%;">姓名</th>
							<td style="width: 70%" class="name " id="name"></td>
						</tr>
						<tr>
							<th class="th" style="width:30%;">办公电话</th>
							<td style="width: 70%" class="office_tel " id="office_tel"></td>
						</tr>
						<tr>
							<th class="th" style="width:30%;">手机</th>
							<td style="width: 70%" class="mobile_tel " id="mobile_tel"></td>
						</tr>
						<tr>
							<th class="th" style="width:30%;">邮箱</th>
							<td style="width: 70%" class="email " id="email"></td>
						</tr>
						<tr>
							<th class="th" style="width:30%;">业务</th>
							<td style="width: 70%" class="duty " id="duty"></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div id="sample" class="hidden">
		<li class="tbody">
			<div class="pull-left">
				<span class="col-8 emp_no hidden-xs" ></span>
				<span class="col-8 name" ></span>
				<span class="col-8 position" ></span>
				<span class="col-6 rank hidden-xs hidden" ></span>
				<span class="col-10 mobile_tel"></span>
			</div>
			<div class="auto autocut hidden-xs">
				<span style="width:100%;" class="email">邮件</span>
			</div>
		</li>
	</div>
</block>
				
					
				</div>
			</div>
		</div>
		<!--<iframe src="{:U('push/client')}" class="push" id="push"></iframe>-->
		<!-- Mainly scripts -->
		<script src="<!--{$oapath}-->Ins/js/jquery-2.1.1.js"></script>
		<script src="<!--{$oapath}-->Ins/js/bootstrap.min.js"></script>
		<script src="<!--{$oapath}-->Ins/js/plugins/metisMenu/jquery.metisMenu.js"></script>
		<script src="<!--{$oapath}-->Ins/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
		<!-- Custom and plugin javascript -->
		<script src="<!--{$oapath}-->Ins/js/inspinia.js"></script>
		<script src="<!--{$oapath}-->Ins/js/common.js"></script>
		<script src="<!--{$oapath}-->Ins/js/plugins/pace/pace.min.js"></script>
                
		<script src="<!--{$oapath}-->Ins/js/plugins/toastr/toastr.min.js"></script>
                <script src="<!--{$oapath}-->Ins/js/plugins/gritter/jquery.gritter.min.js"></script>
                <script src="<!--{$oapath}-->Ins/js/plugins/bootbox/bootbox.min.js"></script>
		<include file="Layout:ins_plugin_js"/>
<block name="js">
	<script type="text/javascript">

		function showdata(result) {
                 
			$(".user_list li.tbody").remove();
                        if(result.data.length===0){
                              $("#name").html("");
                              $("#duty").html("");
                              $("#office_tel").html("");
                              $("#mobile_tel").html("");
                              $("#email").html("");
                        }else{
 			for (var s in result.data) {
				$("#sample .emp_no").text(result.data[s].emp_no);
				$("#sample .name").text(result.data[s].name);
				$("#sample .position").text(result.data[s].position_name);
				$("#sample .rank").text(result.data[s].rank_name);
				$("#sample .email").text(result.data[s].email);
				$mobile = $("<a></a>");
				$mobile.attr("href", "tel:" + result.data[s].mobile_tel);
				$mobile.html(result.data[s].mobile_tel);

				$("#sample .mobile_tel").html($mobile);
                                
                                if(result.data[s].email!==""){
					$("#sample li").attr("email", result.data[s].email);
				}else{
                                    
					$("#sample li").attr("email", '');
				}
				
				$("#sample li").attr("duty", result.data[s].duty);
				$("#sample li").attr("name", result.data[s].name);
				$("#sample li").attr("office_tel", result.data[s].office_tel);
				$("#sample li").attr("mobile_tel", result.data[s].mobile_tel);
				$("#sample li").attr("pic", result.data[s].pic);
				
				$img_url=result.data[s].pic;
				if($img_url!=""){
					$("#emp_pic").prop("src", $(this).attr("pic"));
				}else{
					$("#emp_pic").prop("src","<!--{$oapath}-->Ins/img/no_avatar.jpg");
				}
				html = $("#sample").html();

				$(".user_list ul").append(html);

				$("#sample li span").text("");
			}                           
                        }

			if ($(".user_list li.tbody").length > 0) {
				$(".user_list li.tbody").get(0).click();
			} else {
				$(".user_info .info").text("");
				$("#emp_pic").prop('src', "");
			}
		}

		function btn_local_search() {
			$(".sub_left_menu .tree_menu a").each(function() {
				$(this).attr("class", "");
			});
			sendAjax("{:U('read')}", "keyword=" + $("#keyword").val(), function(data) {
				showdata(data);
			});
			return false;
		}

		function key_local_search() {
			$(".sub_left_menu .tree_menu a").each(function() {
				$(this).attr("class", "");
			});
			if (event.keyCode == 13) {
				sendAjax("{:U('read')}", "keyword=" + $("#keyword").val(), function(data) {
					showdata(data);
				});
			}
			return false;
		}


		$(document).ready(function() {
			$(".sub_left_menu .tree_menu a").click(function() {
                             
				$(".sub_left_menu .tree_menu a").each(function() {
					$(this).attr("class", "");
				});
				$(this).attr("class", "active");
				sendAjax("oa.php?c=Staff&a=read", "id=" + $(this).attr("node"), function(data) {
					showdata(data);
				});
				return false;
			});

			$(document).on("click", ".user_list .tbody", function() {
                         
				$(".user_info .name").text($(this).attr("name"));

				$office_tel = $("<a></a>");
				$office_tel.attr("href", 'tel:' + $(this).attr("office_tel"));
				$office_tel.html($(this).attr("office_tel"));
				$(".user_info .office_tel").html($office_tel);

				$mobile_tel = $("<a></a>");
				$mobile_tel.attr("href", 'tel:' + $(this).attr("mobile_tel"));
				$mobile_tel.html($(this).attr("mobile_tel"));
				
				$(".user_info .mobile_tel").html($mobile_tel);
				$(".user_info .email").text($(this).attr("email"));
				$(".user_info .duty").text($(this).attr("duty"));
				$img_url=$(this).attr("pic");
				if($img_url!=""){
					$("#emp_pic").prop("src", $(this).attr("pic"));
				}else{
					$("#emp_pic").prop("src","<!--{$oapath}-->Ins/img/no_avatar.jpg");
				}
				
			});
		});

	</script>
</block>
	</body>
</html>
