{extend name="public/layout"/} {block name="title"}智能名片{/block} {block name="body"}
<style type="text/css">
	html,
	body {
		display: block;
		min-width: 1100px;
	}

	.layui-table thead tr,
	.layui-table-header {
		background-color: #D8E6F1 !important;
	}

	.layui-fluid {
		display: block;
		box-shadow: 0 0 4px 0 #B6CADE;
		border-radius: 5px;
		margin: 15px;
		background-color: #ffffff;
	}
	
    .layui-form-label{
        width: auto;
    }
	.layui-card .layui-tab-brief .layui-tab-title li.layui-this {
        color: #249EFB;
    }
	.layui-tab-title .layui-this:after {
		width: 50px;
		left: 50%;
		transform: translateX(-50%);
	}
    .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
		color: #249EFB;
		border-bottom: 4px solid #249EFB;
	}
    .layui-tab-title li {
        margin: 0px 5px;
    }
	.layui-btn-xs,.layui-btn-xs:hover {
		border: 1px solid #249EFB;
		background-color: #fff;
		color: #249EFB;
		padding: 0px 10px;
	}
    .layui-btn-danger,.layui-btn-danger:hover{
		color: #FF5722;
		background-color: #fff;
		border: 1px solid #FF5722;
		padding: 0px 10px;
	}
	.goback {
		float: left;
		margin-right: 20px;
	}
	.goback a {
		color: #269efb;
	}
	.goback i {
		position: relative !important;
		left: 0px;
	}
	.layui-btn-primary {
		color: #249EFB;
		border: 1px solid #249EFB;
	}
	.layui-btn-primary:hover {
		background-color: #E3F7FF;
		color: #249EFB;
	}
	.layui-card-body{padding: 0 15px;}
	.layuiadmin-card-header-auto {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
	}
</style>
<div class="layui-fluid">
	<div class="layui-card">
		<!-- <div class="layui-tab layui-tab-brief">
			<ul class="layui-tab-title">
				<li class="layui-this">
					访问记录
				</li>
				
			</ul>
		</div> -->
		<div class="layui-card-header layuiadmin-card-header-auto" style="padding: 15px 15px 20px;">
			<div class="operateBtn">
				访问记录
			</div>
			<div class="layui-form flex-end" style="float:right;">
				<div class="layui-inline" style="margin-right: 0px;">
					<label class="layui-form-label">员工姓名</label>
					<div class="layui-input-inline">
						<select name="employee_id" lay-filter="type" id="type" lay-search>
							<option value="">搜索员工姓名</option>
							{volist name="employee_data" id="vo"}
							<option value="{$vo.id}">{$vo.name}</option>
							{/volist}
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<button class="layui-btn layuiadmin-btn-list" lay-submit
						lay-filter="LAY-app-contlist-search">
						<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
					</button>
				</div>
			</div>
		</div>
		<div class="layui-card-body">
			<table id="datalist" lay-filter="datalist" style="margin-top:15px;"></table>
		</div>
	</div>
</div>
{/block}
{block name="js"}
<script type="text/html" id="visit_long">
	<span>
		{{d.visit_long}}
		<span style="font-size: 12px">
			(秒)
		</span>
	</span>
</script>
<script>
	layui.config({
		base: '__LAYUI__/',
		urlbase: '/sys'
	}).extend({
		index: 'lib/index'
	}).use(['index', 'table', 'layedit', 'element'], function() {
		var $ = layui.$,
			table = layui.table,
			element = layui.element,
			form = layui.form;

		//监听搜索
		form.on('submit(LAY-app-contlist-search)', function (data) {
			var field = data.field;
			console.log(field)
			//执行重载
			table.reload('datalist', {
				where: field
				, page: { curr: 1 }
			});
		});
		var field = {};
		
		table.render({
			elem: '#datalist',
			url: "{:url('EmployeeCard/index')}",
			page: true,
			height: 'full-220',
			cols: [
				[{
						type: 'numbers',
						field: 'id',
						title: '序号'
					},
					{
						field: 'user_name',
						title: '客户ID'
					},
					{
						title: '被访问员工',
						field: 'employee_name'
					},
					{
						title: '总浏览次数',
						field: 'visit_count'
					},
					{
						title: '浏览总时长',
						field: 'visit_long',
						templet: '#visit_long'
					},
					{
						title: '最近访问时间',
						field: 'visit_latest'
					}
				]
			]
		});
	});
</script>

{/block}