<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 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">
</head>

<body ontouchstart class="bg-white">
<header>
    <div class="header">
        <a href="" class="btn-a-back"><i class="iconfont">&#xe61f;</i></a>
        <h2>我的客户</h2>
        <a href="/customer/addcustomer" class="btn-add-visit">添加客户</a>
    </div>
</header>
<div class="tab flex bg-gray">
    <p th:class="${viewTab} == 1? 'flex-1 bor-r on' : 'flex-1 bor-r'">
        <i class="iconfont icon-navbar">&#xe603;</i>时间视图
    </p>
    <p th:class="${viewTab} == 2? 'flex-1 on' : 'flex-1'">
        <i class="iconfont icon-navbar">&#xe68f;</i>置业顾问视图
    </p>
</div>
<div class="search-bar weui-flex">
    <div class="weui-flex__item bg-white clearfix">
        <form action="" th:action="@{/customer/myCustomerList}" method="get">
            <i class="weui-icon-search fl"></i>
            <input type="search" class="inp-search fl" name="searchKey" id="searchKey" placeholder="搜索"/>
        </form>
    </div>
    <div class="text-search">搜索</div>
</div>
<div class="weui-grids tab-change" th:style="${viewTab} == 1? 'display: block;' : 'display: none;'">
    <a th:href="@{/customer/myCustomerList?type=2}" class="weui-grid">
        <div class="weui-grid__icon client-num" th:text="${summary.entity.call3}">
            0
        </div>
        <p class="weui-grid__label">最近回访</p>
    </a>
    <a th:href="@{/customer/myCustomerList?type=3}" class="weui-grid">
        <div class="weui-grid__icon client-num" th:text="${summary.entity.star}">
            0
        </div>
        <p class="weui-grid__label">星级客户</p>
    </a>
    <a th:href="@{/customer/myCustomerList?type=1}" class="weui-grid">
        <div class="weui-grid__icon client-num" th:text="${summary.entity.newadd}">
            0
        </div>
        <p class="weui-grid__label">今日新增</p>
    </a>
    <a th:href="@{/customer/myCustomerList?type=4}" class="weui-grid">
        <div class="weui-grid__icon client-num" th:text="${summary.entity.add7}">
            0
        </div>
        <p class="weui-grid__label">最近7天</p>
    </a>
    <a th:href="@{/customer/myCustomerSearch(startDate=${startDate},endDate=${endDate})}" class="weui-grid">
        <div class="weui-grid__icon client-num" th:text="${summary.entity.allCount}">
            0
        </div>
        <p class="weui-grid__label">历史客户</p>
    </a>
    <!--<a th:href="@{/customer/myWaitCallCustomer}" class="weui-grid">-->
        <!--<div class="weui-grid__icon client-num" th:text="${summary.entity.allCount}">-->
            <!--0-->
        <!--</div>-->
        <!--<p class="weui-grid__label">待回访客户</p>-->
    <!--</a>-->
</div>

<div class="weui-cells tab-change mt0" th:style="${viewTab} == 2? 'display: block;' : 'display: none;'">
    <a class="weui-cell weui-cell_access zygw"
       th:href="@{/customer/myCustomerList(userPhone=${userInfo.mobile})}" th:each="userInfo : ${listData}">
        <div class="weui-cell__hd"><p class="tu-text"
                                      th:text="${#strings.substring(userInfo.realName,0,#strings.length(userInfo.realName)>3?3:#strings.length(userInfo.realName))}"></p>
        </div>
        <div class="weui-cell__bd pl30">
            <p>
                <span th:text="|新增：${userInfo.newadd}|">新增：0</span>
                <span th:text="|累计：${userInfo.allcustomer}|">累计：0</span>
            </p>
            <p>
                <span th:text="|3日回访：${userInfo.callin3}|">3日回访：0</span>
                <span th:text="|7日到访：${userInfo.visitin7}|">7日到访：0</span>
            </p>
        </div>
        <div class="weui-cell__ft"></div>
    </a>
</div>
<script type="text/javascript" src="/static/js/wechat/zepto.min.js"></script>
<script type="text/javascript" src="/static/js/statistics.js"></script>
<script type="text/javascript">
    var handler = null,
            page = 2, tmpPage,
            isLoading = false;

    $(function () {
        sessionStorage.clear();

        // 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();
        });


        // 搜索点击
        $('.inp-search').on('focus', function () {
            $('.text-search').text('取消').css('color', '#4284D9')
        }).on('blur', function () {
            $('.text-search').text('搜索').css('color', '#404040')
        })


        $(document).bind('scroll', onScroll);

    });

    function onScroll(event) {
        if (!isLoading) {
            var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
            if (closeToBottom && page > 0) {
                loadData();
            }
        }
    }

    function loadData() {
        isLoading = true;
        $.ajax({
            url: "/customer/myCustomersUser/",
            data: {page: page, 'searchKey': $("#searchKey").val()}, // Page parameter to make sure we load new data
            success: onLoadData
        });
    }

    function onLoadData(data) {
        // Increment page index for future calls.
        page++;

        $(".weui-cell :last").after(data);

        // Create HTML for the images.
        var html = '';
        var i = 0, length = data.length, image;
        if (!length || length <= 1) {
            tmpPage = page;
            page = -1;
        }
        isLoading = false;
    }

</script>
</body>

</html>
