<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>抢客</title>
    <link rel="stylesheet" href="/static/css/wechat/weui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/wechat/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="/static/css/wechat/style.css">
    <style type="text/css">
        .weui-cell {
            padding: 0;
            height: 2.8rem;
            margin-bottom: .6rem;
            border: 1px solid #d9d9d9;
            border-radius: .8rem;
        }

        .weui-cell:before {
            border: none;
        }

        .tab-change {
            padding: .75rem;
        }

        .clientName {
            margin-left: .3rem;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            background: #4284d9;
            line-height: 2rem;
            font-size: .5rem;
            text-align: center;
            color: #fff;
        }

        .weui-cell__bd {
            width: 13rem;
            margin: 0 1rem 0 .6rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: gray;
            font-size: .7rem;
        }

        .weui-cell_access .weui-cell__ft:after {
            right: 100%;
        }

        .winPop {
            position: fixed;
            z-index: 998;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, .6);
        }

        .flex {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .winDetail {
            display: none;
            position: fixed;
            z-index: 999;
            bottom: -12.6rem;
            left: 0;
            width: 100%;
            background: #fff;
        }

        .winDetail__infoBar {
            height: 4.6rem;
            border-bottom: 1px solid #D9D9D9;
            border-top: 1px solid #D9D9D9;
        }

        .winDetail__infoBarL {
            width: 2rem;
            height: 2rem;
            margin: 0 .5rem 0 2rem;
            border-radius: 50%;
            background: #4284d9;
            line-height: 2rem;
            font-size: .5rem;
            text-align: center;
            color: #fff;
        }

        .infoBar_title,
        .infoBar_date {
            width: 13rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: .7rem;
            color: gray;
        }

        .infoBar_title {
            white-space: initial;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .winDetail__getBar {
            overflow: hidden;
            height: 7.6rem;
            background-color: rgb(242, 242, 242);
        }

        .getBar__btn {
            width: 5rem;
            height: 5rem;
            background: #4284d9;
            border-radius: 50%;
            margin: 1rem auto 0;
            line-height: 5rem;
            color: #fff;
            text-align: center;
            box-shadow: -5px 0 5px -5px #ccc, /*左边阴影*/ 0 -5px 5px -5px #ccc, /*顶部阴影*/ 0 5px 5px -5px #ccc, /*底部阴影*/ 5px 0 5px 1px #ccc;
            /*右边阴影*/
        }
    </style>
</head>

<body ontouchstart class="bg-white">
<header>
    <div class="header">
        <a href="" class="btn-a-back"><i class="iconfont">&#xe61f;</i></a>
        <h2>抢客</h2>
    </div>
</header>
<div class="tab flex bg-gray">
    <p class="flex-1 bor-r on" timeType="1" onclick="">
        <i class="iconfont icon-navbar">&#xe603;</i>最近30分钟
    </p>
    <p class="flex-1" timeType="2">
        <i class="iconfont icon-navbar">&#xe611;</i>30分钟前
    </p>
</div>
<div class="weui-grids tab-change" id="rushCustomersHtml1">
    <!--加载中-->
    <div class="weui-loadmore loading">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
</div>

<div class="weui-cells tab-change mt0" id="rushCustomersHtml2" style="display: none;">
    <!--加载中-->
    <div class="weui-loadmore loading">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
</div>
<div class="winPop" style="display: none;"></div>
<div class="winDetail">
    <div class="winDetail__infoBar flex">
        <input type="hidden" id="cId"/>
        <div class="winDetail__infoBarL" id="cName">张先生</div>
        <div class="winDetail__infoBarR">
            <div class="infoBar_title" id="cSource">来源：万科金域缇香-淘房客户端-短信订阅</div>
            <div class="infoBar_date" id="cTime">2017年11月23日 23:29</div>
        </div>
    </div>
    <div class="winDetail__getBar">
        <div class="getBar__btn">抢</div>
    </div>
</div>
<script type="text/html" id="noCustomerTemplate">
    <div class="weui-loadmore weui-loadmore_line">
        <span class="weui-loadmore__tips">暂无数据</span>
    </div>
</script>
<script type="text/html" id="rushCustomerTemplate">
    {{each rushCustomers as rushCustomer index}}
    <div id="{{rushCustomer.id}}" class="weui-cell weui-cell_access" cId="{{rushCustomer.id}}"
         cTime="{{rushCustomer.createTime.time | dateFormat:'yyyy年MM月dd日 hh:mm'}}"
         onclick="rushCustomer(this)">
        <div class="weui-cell__hd clientName">
            <div class="cName">{{rushCustomer.name}}</div>
        </div>
        <div class="weui-cell__bd cSource">{{subString rushCustomer.actSource 0 13}}</div>
        <div class="weui-cell__ft"></div>
    </div>
    {{/each}}
</script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/template.js"></script>
<script type="text/javascript" src="/static/js/utils.js"></script>
<script type="text/javascript">

    var win = $('.winPop');
    var winDetail = $('.winDetail');
    var getBarBtn = $('.getBar__btn');
    var thisIndex = 0;

    var currentPage1 = 1;
    var currentPage2 = 1;
    var isLoading = false;
    $(function () {
        var timeType = $(this).attr("timeType");
        loadData(timeType);
        $(window).on("scroll", function () {
            if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
                loadData(timeType);
            }
        });

        // tab 切换
        $('.tab p').on('click', function () {
            $(this).addClass('on').siblings('.tab p').removeClass('on');
            var idx = $(this).index();
            $('.tab-change').eq(idx).show().siblings('.tab-change').hide();

            var timeType = $(this).attr("timeType");
            loadData(timeType);
        });

        win.on('click', function () {
            win.hide()
            winDetail.animate({
                bottom: '-12.6rem'
            }, 100, function () {
                winDetail.css('display', 'none')
            });
        })
        getBarBtn.on('click', function () {
            var rushCustomerId = $("#cId").val();
            $.ajax({
                url: "/customer/rushcustomer",
                data: {
                    rushCustomerId: rushCustomerId
                },
                type: "post",
                success: function (data) {
                    // 抢客成功
                    if (data.code == "0") {
                        alert(data.msg);
                        win.hide();
                        winDetail.animate({
                            bottom: '-12.6rem'
                        }, 100, function () {
                            winDetail.css('display', 'none')
                            $('.weui-cell').eq(thisIndex).animate({
                                opacity: '0',
                            }, 500, function () {
                                $("#" + rushCustomerId).remove();
                            })
                        });
                    } else {
                        alert(data.msg)
                    }
                },
                error: function () {

                }
            });
        })
    });

    function loadData(timeType) {
        var currentPage;
        timeType = timeType || "1";
        if (timeType == "1") {
            currentPage = currentPage1;
            currentPage1++;
        } else if (timeType == "2") {
            currentPage = currentPage2;
            currentPage2++;
        }
        if (!isLoading) {
            isLoading = true;
            $.ajax({
                url: "/customer/getrushcustomerlist",
                data: {
                    timeType: timeType,
                    currentPage: currentPage
                },
                type: "get",
                success: function (data) {
                    if (data.list == undefined || data.list.length == 0) {
                        isLoading = false;

                        if (currentPage == 1) {
                            var html = template('noCustomerTemplate', null);
                            $("#rushCustomersHtml" + timeType).html(html);
                        }
                        return;
                    }
                    isLoading = false;
                    var rushCustomers = data.list;
                    var html = template('rushCustomerTemplate', {
                        rushCustomers: rushCustomers
                    });
                    $("#rushCustomersHtml" + timeType).append(html);

                    $(".loading").slideUp("normal");

                },
                error: function () {
                    isLoading = false;
                }
            });
        }
    }

    function rushCustomer(_this) {
        var $rushCustomer = $(_this);
        thisIndex = $rushCustomer.index()
        var cName = $rushCustomer.children(".clientName").children(".cName").html();
        var cSource = $rushCustomer.children(".cSource").html();
        var cTime = $rushCustomer.attr("cTime");
        var cId = $rushCustomer.attr("cId");
        $("#cName").html(cName);
        $("#cSource").html(cSource);
        $("#cTime").html(cTime);
        $("#cId").val(cId);

        win.show()
        winDetail.css('display', 'block')
        winDetail.animate({
            bottom: '0'
        }, 100);
    }
</script>
</body>

</html>