<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"/>
    <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">
<input type="hidden" id="projectId" th:value="${projectId}"/>
<input type="hidden" id="timeFilter" th:value="${timeFilter}"/>
<input type="hidden" id="projectFilter" th:value="${projectFilter}"/>
<input type="hidden" id="loanFilter" th:value="${loanFilter}"/>
<header>
    <div class="header">
        <a href="javascript:history.go(-1);" class="btn-a-back"><i class="iconfont">&#xe61f;</i></a>
        <h2>客户列表</h2>
    </div>
</header>
<div class="search-bar weui-flex">
    <div class="weui-flex__item bg-white clearfix">
        <form id="searchForm" action="" th:action="@{/project/customers}" method="get">
            <i class="weui-icon-search fl"></i>
            <input type="search" id="keyword" name="keyword" class="inp-search fl" placeholder="搜索">
        </form>
    </div>
    <div class="text-search">搜索</div>
</div>
<div class="weui-flex my-client__tit">
    <div class="weui-flex__item showList">时间筛选<i class="iconfont">&#xe646;</i></div>
    <div class="weui-flex__item showList">客户状态<i class="iconfont">&#xe646;</i></div>
    <div class="weui-flex__item showList">贷款状态<i class="iconfont">&#xe646;</i></div>
</div>

<!--客户列表-->
<div id="customers"></div>
<!--客户列表 end-->

<!--弹出选择-->
<div class="weui-mask" id="iosMask" style="display: none"></div>
<div class="weui-actionsheet" id="timeSelect">
    <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" filterValue="1">最近一周</div>
        <div class="weui-actionsheet__cell" filterValue="2">最近一月</div>
    </div>
</div>
<div class="weui-actionsheet" id="projectSelect">
    <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" filterValue="1">约看</div>
        <div class="weui-actionsheet__cell" filterValue="2">到访</div>
        <div class="weui-actionsheet__cell" filterValue="3">认筹</div>
        <div class="weui-actionsheet__cell" filterValue="4">认购</div>
        <div class="weui-actionsheet__cell" filterValue="5">签约</div>
        <div class="weui-actionsheet__cell" filterValue="6">退房</div>
    </div>
</div>
<div class="weui-actionsheet" id="loanSelect">
    <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" filterValue="1">未办理</div>
        <div class="weui-actionsheet__cell" filterValue="2">申请中</div>
        <div class="weui-actionsheet__cell" filterValue="3">已下款</div>
        <div class="weui-actionsheet__cell" filterValue="4">被拒绝</div>
        <div class="weui-actionsheet__cell" filterValue="5">全款支付</div>
    </div>
</div>
</body>
<script type="text/html" id="customerTemplate">
    {{each customers as customer index}}
    <div class="my-client">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <p class="tu-text">{{subString customer.name 0 3}}</p>
            </div>
            <div class="weui-cell__bd">
                <p>
                    <span class="my-client__tel">{{customer.phone}}</span>
                </p>
                <p class="my-client__tag">
                <span>
                    <i class="iconfont">&#xe6ea;</i>
                    <span>{{customer.managerName}}</span>
                </span>
                    <i class="iconfont">&#xe684;</i>
                    <span>
                        {{if customer.buyIntention == '1'}}
                        <span>A</span>
                        {{else if customer.buyIntention == '2'}}
                        <span>B</span>
                        {{else if customer.buyIntention == '3'}}
                        <span>C</span>
                        {{else if customer.buyIntention == '4'}}
                        <span>D</span>
                        {{else if customer.buyIntention == '5'}}
                        <span>E</span>
                        {{else if customer.buyIntention == ''}}
                        <span>待定</span>
                        {{/if}}
                    </span>
                </p>
            </div>
            <div class="client-list-r">
                <p>
                    <i class="iconfont">&#xe603;</i>
                    <span>{{customer.createTime.time | dateFormat:'yyyy.MM.dd'}}</span>
                </p>
                <a href="/project/reportcustomer?customerProjectId={{customer.cps[0].id}}"
                   class="weui-flex__item">约看</a>
            </div>
        </div>
        <div class="weui-flex my-client__bd">
            <a href="tel:13712345678" class="weui-flex__item"><i class="iconfont">&#xe604;</i>拨打电话</a>
            <a href="/project/addcustomerstatus?customerId={{customer.id}}" class="weui-flex__item"><i class="iconfont">
                &#xe60f;</i>添加状态</a>
            <a href="/project/customerdetail?customerId={{customer.id}}" class="weui-flex__item"><i class="iconfont">
                &#xe740;</i>客户详情</a>
        </div>
    </div>
    {{/each}}
</script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/statistics.js"></script>
<script type="text/javascript" src="/static/js/template.js"></script>
<script type="text/javascript" src="/static/js/utils.js"></script>
<script>
    var currentPage = 1;
    var count = 1;
    var isLoading = false;
    $(function () {
        loadData();
        $(window).on("scroll", function () {
            if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
                loadData();
            }
        });

        document.getElementById("searchForm").onsubmit = function () {
            $("#customers").empty();
            currentPage = 1;
            count = 1;
            loadData();
            $("#searchForm").trigger("blur");
            event.preventDefault();
        }
    });
    function loadData() {
        if (!isLoading) {
            isLoading = true;
            $.ajax({
                url: "/project/getprojectcustomers",
                data: {
                    projectId: $("#projectId").val(),
                    timeFilter: $("#timeFilter").val(),
                    projectFilter: $("#projectFilter").val(),
                    loanFilter: $("#loanFilter").val(),
                    currentPage: currentPage
                },
                type: "post",
                success: function (data) {
                    if (data.data.list == undefined || data.data.list.length == 0) {
                        $(window).off();
                        return;
                    }
                    currentPage++;
                    isLoading = false;
                    var html = template('customerTemplate', {customers: data.data.list, count: count});
                    count += data.data.list.length;
                    $("#customers").append(html);
                },
                error: function () {
                    isLoading = false;
                }
            });
        }
    }
</script>
<script type="text/javascript">
    // ios
    $(function () {
        var $iosMask = $('#iosMask');

        function hideActionSheet($this) {
            $this.removeClass('weui-actionsheet_toggle');
            //解除列表滚动
            $("html,body").css({overflow: "auto", height: '100%'});
            $iosMask.fadeOut(200);
            $(window).on("scroll", function () {
                if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
                    loadData();
                }
            });
        }

        $(".showList").on("click", function () {
            $iosMask.off();
            $('.weui-actionsheet__cell').off();
            var $selectFilter;
            switch ($(this).index()) {
                case 0:
                    $selectFilter = $('#timeSelect');
                    break;
                case 1:
                    $selectFilter = $('#projectSelect');
                    break;
                case 2:
                    $selectFilter = $('#loanSelect');
                    break;
                default:
                    break;
            }
            $selectFilter.addClass('weui-actionsheet_toggle');
            //禁止列表滚动
            $("html,body").css({overflow: "hidden", height: '100%'});
            $iosMask.fadeIn(200);
            $(window).off();
            $iosMask.on('click', function () {
                hideActionSheet($selectFilter)
            });
            $('.weui-actionsheet__cell').on('click', function () {
                var filterId = $(this).parents(".weui-actionsheet").attr("id");
                var key = filterId.substring(0, filterId.indexOf("Select"));
                var value = $(this).attr("filterValue");
                $("#" + key + "Filter").val(value);
                $("#customers").empty();
                currentPage = 1;
                count = 1;
                loadData();

                hideActionSheet($selectFilter)
            });
        });
    });
</script>
</html>
