{extend name="Public/wx_base" /}
{block name="title"}员工提报数量{/block}
{block name="main"}
<link rel="stylesheet" href="__PUBLIC__/mobile/css/reset.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/mobile/mui/css/mui.min.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/mobile/mui/css/mui.picker.min.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/mobile/css/record.css?v={$Think.const.APP_VERSION}">
<script src="__PUBLIC__/mobile/js/jquery-2.1.0.js?v={$Think.const.APP_VERSION}"></script>
<script src="__PUBLIC__/mobile/mui/js/mui.picker.min.js?v={$Think.const.APP_VERSION}"></script>
<style>
	.mui-col-xs-9 {
		width: 100%;
	}
	.bx_con{
		background-color: #fff;
		margin-top: 20px;
	}
	.bx{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 5px 15px;
	}
	.bx span{
		font-size: 14px;
		color: #333;
		width: 80px;
	}
	.bx small{
		font-size: 14px;
		color: #333;
		width: auto;
		padding: 0 5px;
	}
	.bx button{
		font-size: 14px;
		color: #333;
		width: 120px;
		height: 35px;
		border: 1px solid #e7e7e7;
		border-radius:3px;
		margin:0;
	}
	.bx select{
		font-size: 16px;
		color: #333;
		width: 210px;
		height: 35px;
		border: 1px solid #e7e7e7!important;
		border-radius:3px;
		text-align: left;
		margin: 0;
		line-height: 14px;
	}
	.bx input{
		margin-left:10px;
	}
</style>
<div class="mui-content">
	<div class="bx_con">
		<form action="#" method="post" id="form">
			<div class="bx">
				<!--<span>日期选择</span>-->
				<button id="btn1" type="button" data-options='{"type":"date","beginYear":2014,"endYear":2020}' class="btn">{$start|default=开始时间}</button>
				<input type="hidden" id="start" name="start" value="{$start}">
				<small>至</small>
				<button id="btn2" type="button"  data-options='{"type":"date","beginYear":2014,"endYear":2020}' class="btn">{$end|default=结束时间}</button>
				<input type="hidden" id="end" name="end" value="{$end}">
				<button type="button" id="sub"style="background-color: #007aff;border: 1px solid #007aff;color: white;margin-left: 10px;">查询</button>
			</div>
		</form>
	</div>
	<div style="text-align: center;height: 50px;line-height: 50px;">接收客资：<span id="count">{$count|default=0}</span> 个</div>
</div>
<script>
	mui('body').on('tap','a',function(){
		window.top.location.href=this.href;
	});
	(function($) {
		$.init();
		var btns = $('#btn1');
		btns.each(function(i, btn) {
			btn.addEventListener('tap', function() {
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				/*
				 * 首次显示时实例化组件
				 * 示例为了简洁，将 options 放在了按钮的 dom 上
				 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
				 */
				var that=this;
				var picker = new $.DtPicker(options);
				picker.show(function(rs) {
					/*
					 * rs.value 拼合后的 value
					 * rs.text 拼合后的 text
					 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
					 * rs.m 月，用法同年
					 * rs.d 日，用法同年
					 * rs.h 时，用法同年
					 * rs.i 分（minutes 的第二个字母），用法同年
					 */
					that.innerText = rs.text;
					document.getElementById('start').value = rs;
					/*
					 * 返回 false 可以阻止选择框的关闭
					 * return false;
					 */
					/*
					 * 释放组件资源，释放后将将不能再操作组件
					 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
					 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
					 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
					 */
					picker.dispose();
				});
			}, false);
		});
	})(mui);
	(function($) {
		$.init();
		var btns = $('#btn2');
		btns.each(function(i, btn) {
			btn.addEventListener('tap', function() {
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				/*
				 * 首次显示时实例化组件
				 * 示例为了简洁，将 options 放在了按钮的 dom 上
				 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
				 */
				var that=this;
				var picker = new $.DtPicker(options);
				picker.show(function(rs) {
					/*
					 * rs.value 拼合后的 value
					 * rs.text 拼合后的 text
					 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
					 * rs.m 月，用法同年
					 * rs.d 日，用法同年
					 * rs.h 时，用法同年
					 * rs.i 分（minutes 的第二个字母），用法同年
					 */
					that.innerText = rs.text;
					document.getElementById('end').value = rs;
					/*
					 * 返回 false 可以阻止选择框的关闭
					 * return false;
					 */
					/*
					 * 释放组件资源，释放后将将不能再操作组件
					 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
					 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
					 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
					 */
					picker.dispose();
				});
			}, false);
		});
	})(mui);

	$("#sub").click(function(){
		var mask = mui.createMask();//callback为用户点击蒙版时自动执行的回调；
		mask.show();//显示遮罩
		$.ajax({
			type: "POST",
			url: "/crm/Customer/salesNum",
			data: $('#form').serialize(),
			dataType: "json",
			success: function (ret) {
				$('#start').val(ret.start);
				$('#end').val(ret.end);
				$('#count').html(ret.count);
				mask.close();//关闭遮罩
			}
		})
	})

</script>
{/block}