{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}">
            </div>
            <div class="bx">
                <span>渠道名称</span>
                <select class="mui-btn mui-btn-block" name="customer_channel"id="customer_channel">
                    <option value="">请选择</option>
                    {volist name="channel" id="ch"}
                    <option value="{$ch.channel_name}">{$ch.channel_name}</option>
                    {/volist}
                </select>
                <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为用户点击蒙版时自动执行的回调；
        $.ajax({
            type: "POST",
            url: "/crm/Customer/tibaoNum",
            data: $('#form').serialize(),
            dataType: "json",
            success: function (ret) {
                $('#start').val(ret.start);
                $('#end').val(ret.end);
                $('#count').html(ret.count);
                $('select[name=customer_channel]').val(ret.customer_channel);
                mask.show();//显示遮罩
            }
        })
    })

</script>
{/block}