{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>

<div class="mui-content">
    <div class="record-search">
        <form method="post" id="form01" action="{:Url('crm/Visit/experienceList')}">
        <div class="search-block">
                <input type="text" placeholder="输入姓名/手机号/地区进行搜索" name="search" id="search" value="{$search}">
                <i class="mui-icon mui-icon-search" id="search-btn"></i>
        </div>
        <div class="rer-more">更多</div>
        <div class="more-contain">
            <div class="more-left">
                    <button id="btn2" type="button"  data-options='{"type":"date","beginYear":2014,"endYear":2030}' class="btn">{$time2|default=结束时间}</button>
                    <input type="hidden" id="time2" name="time2" value="{$time2}">
            </div>
            <!-- <div class="more-right">
                <span class="rer-span rer-blue"><a href="{:Url('crm/Visit/experienceList',['pc_type'=>1,'time1'=>$time1,'time2'=>$time2])}">到店拍</a></span>
                <span class="rer-span"><a href="{:Url('crm/Visit/experienceList',['pc_type'=>2,'time1'=>$time1,'time2'=>$time2])}">上门拍</a></span>
                <span class="rer-span"><a href="{:Url('crm/Visit/experienceList',['time1'=>$time1,'time2'=>$time2])}">全部</a></span>
            </div> -->
            <input type="hidden" id="page" value="">
            <input type="hidden" id="count" value="{$count}">
            <input type="hidden" id="pc_type" value="{$pc_type|default=''}">
            <input type="hidden" id="time" value="{$time}">
        </div>
        </form>
    </div>
    <style>

</style>
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="top:61px;">
        <div class="mui-scroll">
            <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
                {if condition="empty($info)"}暂无记录{/if}
                {volist name="info" id="vo" key="key"}
                <li class="mui-table-view-cell">
                    <div>
                        <a href="{:Url('crm/Visit/experienceDetail',['id'=>$vo.cid,'visit_id'=>$vo.id])}" class="mui-table rer-tit">
                            <div class="mui-table-cell mui-col-xs-8">
                                <span class="mui-ellipsis">{$vo.customer_name}</span>
                            </div>
                            <div class="mui-table-cell mui-col-xs-4 mui-text-right">
                                {if condition="$vo.status eq 1"}
        						    <span class="mui-h5 rer-org1">未上门</span>
        						{elseif condition="$vo.status eq 2"}
                                    <span class="mui-h5 rer-org2">已成交</span>
        						{elseif condition="$vo.status eq 3"}
                                    <span class="mui-h5 rer-org3">未成交</span>
                                {elseif condition="$vo.status eq 4"}
                                    <span class="mui-h5 rer-org4">已取消</span>
        						{else}
                                    <span class="mui-h5 rer-org1">未上门</span>
        						{/if}
                            </div>
                        </a>
                        <div class="rer-second">
                            <a href="{:Url('crm/Visit/experienceDetail',['id'=>$vo.cid,'visit_id'=>$vo.id])}">
                            <div class="rer-date">预约时间：{$vo.pc_time}</div>
                            <div class="rer-phone">上门类型：{$vo.sm_type}</div>
                            <div class="rer-phone">消费类型：{$vo.consulation_type}</div>
                            </a>
                            <div class="rer-phone bd_btn">
                                手机号码：{$vo.customer_tel}
                                <a href="tel://{$vo.customer_tel}"></a>
                            </div>
                            <a href="{:Url('crm/Visit/experienceDetail',['id'=>$vo.cid,'visit_id'=>$vo.id])}">
                            <div class="rer-phone">宝宝姓名：{$vo.baby_name}</div>
                            <div class="rer-phone">宝宝生日：{$vo.baby_birthday}</div>
                            <div class="rer-phone">
                                地址：{$vo.county}&nbsp;&nbsp;{$vo.customer_address}
                            </div>
                            </a>
                        </div>
                        <a href="{:Url('crm/Visit/experienceDetail',['id'=>$vo.cid,'visit_id'=>$vo.id])}">
                        <div class="mui-table">
                            <div class="mui-table-cell mui-col-xs-9">
                                <p class="mui-h6 mui-ellipsis">
                                    上门人员：{$vo.cameraman_name}/&nbsp;&nbsp;{$vo.tutor_name}
                                </p>
                            </div>
                        </div>
                        </a>
                    </div>
                </li>
                {/volist}
            </ul>
        </div>
    </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('time1').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('time2').value = rs;
                    document.getElementById('form01').submit();
                    /*
                     * 返回 false 可以阻止选择框的关闭
                     * return false;
                     */
                    /*
                     * 释放组件资源，释放后将将不能再操作组件
                     * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                     * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                     * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                     */
                    picker.dispose();
                });
            }, false);
        });
    })(mui);
    $(function() {
        $(".rer-span").click(function() {
            $(this).addClass("rer-blue").siblings('.rer-span').removeClass("rer-blue");
        });

        $(".rer-more").click(function() {
            $(".more-contain").slideToggle(400);
            $(this).toggleClass("rer-up");
        });

//		搜索事件
        $("#search-btn").click(function(){
            $("#form01").submit();
        })
    })
</script>
<!--上拉加载-->
<script>
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }
    });
    var count = 0;
    /**
     * 上拉加载具体业务实现
     */
    function pullupRefresh() {
        var page = $('#page').val() ? $('#page').val() : 2;
        var search = $('#search').val();
        var total= $('#count').val();
        var pc_type= $('#pc_type').val();
        var time= $('#time').val();
        var time1= $('#time1').val();
        var time2= $('#time2').val();
        setTimeout(function() {
            mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > total)); //参数为true代表没有更多数据了。
            var table = document.body.querySelector('.mui-table-view');
            var cells = document.body.querySelectorAll('.mui-table-view-cell');

            $.ajax({
                type: "POST",
                url: "{:Url('crm/Visit/experienceList')}",
                data: {page: page,search:search,pc_type:pc_type,time:time,time1:time1,time2:time2},
                dataType: 'json',
                success: function (ret) {
                    var arr = Object.keys(ret);
                    if (ret !== false) {
                        for (var i = 0, len = arr.length-1; i < len; i++) {
                            var li = document.createElement('li');
                            li.className = 'mui-table-view-cell';
                            var inp = '<a href="/crm/Visit/experiencedetail/id/'+ret[i]["cid"]+'/visit_id/'+ret[i]["id"]+'"><div class="mui-table rer-tit"><div class="mui-table-cell mui-col-xs-8"><span class="mui-ellipsis">'+ret[i]["customer_name"]+'</span></div>';
                            var valid = '';
                            if(ret[i]['status'] == 1){
                                inp += '<div class="mui-table-cell mui-col-xs-4 mui-text-right"><span class="mui-h5 rer-org1">';
                                valid = '未上门';
                            }else if(ret[i]['status'] == 2){
                                inp += '<div class="mui-table-cell mui-col-xs-4 mui-text-right"><span class="mui-h5 rer-org2">';
                                valid = '已成交';
                            }else if(ret[i]['status'] == 3){
                                inp += '<div class="mui-table-cell mui-col-xs-4 mui-text-right"><span class="mui-h5 rer-org3">';
                                valid = '未成交';
                            }else if(ret[i]['status'] == 4){
                                inp += '<div class="mui-table-cell mui-col-xs-4 mui-text-right"><span class="mui-h5 rer-org4">';
                                valid = '已取消';
                            }else{
                                inp += '<div class="mui-table-cell mui-col-xs-4 mui-text-right"><span class="mui-h5 rer-org5">';
                                valid = '未上门';
                            }
                            inp += valid+'</span></div>';
                            inp += '<div class="rer-second">';
                            inp +='<div class="rer-phone">手机号码：'+ret[i]["customer_tel"]+' <a href="tel://'+ret[i]["customer_tel"]+'"></a></div>';
                            inp +='<div class="rer-phone">宝宝姓名：'+ret[i]["baby_name"]+'</div>';
                            inp +='<div class="rer-phone">宝宝生日：'+ret[i]["baby_birthday"]+'</div>';
                            inp +='<div class="rer-phone">地址：'+ret[i]["customer_address"]+'</div>';
                            inp += '<div class="rer-phone">上门人员：'+ret[i]['cameraman_name']+'/'+ret[i]['tutor_name']+'</div>';
                            inp += '<div class="mui-table-cell mui-col-xs-9"><p class="mui-h6 mui-ellipsis">预约日期：'+ret[i]['pc_time']+'</p></div>';
                            inp += '</div></div>';
                            li.innerHTML = inp;

                            table.appendChild(li);
                        }
                    } else {
                        mui.alert('没有更多数据了');
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    var ret = XMLHttpRequest.responseJSON
                    mui.alert('没有更多数据了');
                }
            })
        }, 1500);
        $('#page').val(parseInt(page)+1);
    }
</script>
{/block}