<!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"/>
    <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 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="buyIntentionFilter" th:value="${buyIntentionFilter}"/>

<input type="hidden" id="customerProjectId" th:value="${customerProjectId}"/>
<header>
    <div class="header">
        <a href="javascript:backToUrl();" 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" id="timeText">时间筛选<i class="iconfont">&#xe646;</i></div>
    <div class="weui-flex__item showList" id="projectText">客户状态<i class="iconfont">&#xe646;</i></div>
    <div class="weui-flex__item showList" id="buyIntentionText">客户意向<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="">全部客户</div>
        <div class="weui-actionsheet__cell" filterValue="1">最近7天</div>
        <div class="weui-actionsheet__cell" filterValue="2">最近15天</div>
        <div class="weui-actionsheet__cell" filterValue="3">最近30天</div>
    </div>
</div>
<div class="weui-actionsheet" id="projectSelect">
    <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" filterValue="">全部状态</div>
        <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="buyIntentionSelect">
    <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" filterValue="">全部意向</div>
        <div class="weui-actionsheet__cell" filterValue="99">待定</div>
        <div class="weui-actionsheet__cell" filterValue="1">A</div>
        <div class="weui-actionsheet__cell" filterValue="2">B</div>
        <div class="weui-actionsheet__cell" filterValue="3">C</div>
        <div class="weui-actionsheet__cell" filterValue="4">D</div>
    </div>
</div>

<!--提交成功提示-->
<div id="toast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content">保存成功</p>
    </div>
</div>

<div class="js_dialog" id="deleteDialog" style=" display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">是否将该客户案场报备状态设置为有效？</strong></div>
        <div class="weui-dialog__bd"></div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">否</a>
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">是</a>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="customerTemplate">
    {{each customers as customer index}}
    <div class="my-client">
        <!--<div class="weui-cell weui-cell_access"  onclick="goToUrl('/project/reportcustomer?customerProjectId={{customer.cps[0].id}}')">-->
        <div class="weui-cell weui-cell_access"
             onclick="projectInfo('{{customer.cps[0].id}},{{customer.cps[0].isRepeat}}')">
            <!--<div class="weui-cell weui-cell_access"-->
            <!--th:οnclick="'javascript:getPage(\''+{{customer.cps[0].id}}+'\',\''+{{customer.cps[0].isRepeat}}+'\')'">-->
            <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">
                         <a href="tel:{{customer.phone}}" class="my-client__tel">{{customer.phone}}</a>
                    </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>
                    </span>
                </p>
            </div>
            <div class="client-list-r">
                <p>
                    <i class="iconfont">&#xe603;</i>
                    <span>{{customer.cps[0].createTime.time | dateFormat:'yyyy.MM.dd'}}</span>
                </p>
                <p>
                    {{if customer.cps[0].status == '1'}}
                    <span>约看</span>
                    {{else if customer.cps[0].status == '2'}}
                    <span>到访</span>
                    {{else if customer.cps[0].status == '3'}}
                    <span>认筹</span>
                    {{else if customer.cps[0].status == '4'}}
                    <span>认购</span>
                    {{else if customer.cps[0].status == '5'}}
                    <span>签约</span>
                    {{else if customer.cps[0].status == '6'}}
                    <span>退房</span>
                    {{else}}
                    <span></span>
                    {{/if}}
                </p>
            </div>
            <!--<div class="weui-cell__ft" style="width:10px;height:26px;"-->
            <!--onclick="goToUrl('/project/reportcustomer?customerProjectId={{customer.cps[0].id}}')"></div>-->
            <div class="weui-cell__ft" style="width:10px;height:26px;"></div>
        </div>
        <div class="weui-flex my-client__bd">
            <a href="javascript:changeRecordedStatus('{{customer.cps[0].id}},{{customer.cps[0].isRepeat}}')"
               class="weui-flex__item">案场报备</a>
            <!--<a href="javascript:goToUrl('/project/addcustomerstatus?customerId={{customer.id}}&customerProjectId={{customer.cps[0].id}}&customerProjectStatus={{customer.cps[0].status}}')"-->
            <!--class="weui-flex__item">-->
            <a href="javascript:addStatus('{{customer.id}},{{customer.cps[0].id}},{{customer.cps[0].status}},{{customer.cps[0].isRepeat}}')"
               class="weui-flex__item">
                <i class="iconfont">&#xe60f;</i>添加状态</a>
            <!--<a href="javascript:goToUrl('/customer/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/history.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 () {
        $(document).on("scroll", function () {
            if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
                loadData();
            }
        });
        loadData();

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

        document.getElementById("searchForm").onsubmit = function () {
            $("#customers").empty();
            currentPage = 1;
            count = 1;
            loadData();
            $("#keyword").trigger("blur");
            event.preventDefault();
        }
    });
    function loadData() {
        if (!isLoading) {
            isLoading = true;
            $.ajax({
                url: "/project/getcustomers",
                data: {
                    projectId: $("#projectId").val(),
                    keyword: $("#keyword").val(),
                    timeFilter: $("#timeFilter").val(),
                    projectFilter: $("#projectFilter").val(),
                    buyIntentionFilter: $("#buyIntentionFilter").val(),
                    currentPage: currentPage
                },
                type: "post",
                success: function (data) {
                    if (data.data.list == undefined || data.data.list.length == 0) {
                        isLoading = false;
                        $("body").off();
                        return;
                    }
                    currentPage++;
                    isLoading = false;
                    var html = template('customerTemplate', {
                        customers: data.data.list,
                        count: count,
                        projectId: $("#projectId").val()
                    });
                    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);
            $("body").on("scroll", function () {
                console.log("aaaaa")
                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 = $('#buyIntentionSelect');
                    break;
                default:
                    break;
            }
            $selectFilter.addClass('weui-actionsheet_toggle');
            //禁止列表滚动
            $("html,body").css({overflow: "hidden", height: '100%'});
            $iosMask.fadeIn(200);
            $("body").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");
                var text = $(this).text() + "<i class='iconfont'>&#xe646;";
                $("#" + key + "Filter").val(value);
                $("#" + key + "Text").html(text);
                $("#customers").empty();
                currentPage = 1;
                count = 1;
                loadData();

                hideActionSheet($selectFilter)
            });
        });

        $('#deleteDialog').on('click', '.weui-dialog__btn_default', function () {
            $('#deleteDialog').fadeOut(200);
        });

        $('#deleteDialog').on('click', '.weui-dialog__btn_primary', function () {
            $('#deleteDialog').fadeOut(200);
            var customerProjectId = $("#customerProjectId").val();
            $.ajax({
                url: "/project/changerecordedstatus",
                data: {
                    customerProjectId: customerProjectId
                },
                type: "post",
                success: function (data) {
                    if (data.result == "1") {
                        $('#deleteDialog').fadeOut(200);
                        showMessage("success", "修改成功", 1000);
                    } else {
                        showMessage("error", "修改失败", 1000);
                    }
                }
            });
        });
    });

    function changeRecordedStatus(customer) {
        var customerProjectId = customer.split(",")[0];
        var isRepeat = customer.split(",")[1];
        if (isRepeat == 1) {
            alert("该客户为重客，无法维护");
            return;
        }
        $.ajax({
            url: "/project/judgeCustomer",
            data: {
                customerProjectId: customerProjectId
            },
            type: "get",
            success: function (data) {
                if (data == '1') {
                    $("#customerProjectId").val(customerProjectId);
                    var deleteDialog = $('#deleteDialog');
                    deleteDialog.fadeIn(200);
                } else {
                    alert("该客户已不属于私客，无法报备");
                }
            }
        });
    }

    function showMessage(type, message, timeout, url) {
        var $toast = $('#toast');
        if (type == "error") {
            $toast.find("i").removeClass().addClass("weui-icon_toast")
        } else if (type == "success") {
            $toast.find("i").removeClass().addClass("weui-icon_toast").addClass("weui-icon-success-no-circle")
        }
        $toast.find("p").text(message);
        if ($toast.css('display') != 'none') return;

        $toast.fadeIn(100);
        setTimeout(function () {
            $toast.fadeOut(100);
            if (url != undefined) {
                window.location.href = url + "?time=" + Math.random();
            }
        }, timeout);
    }

    function addStatus(customer) {
        var customerId = customer.split(",")[0];
        var customerProjectId = customer.split(",")[1];
        var customerStatus = customer.split(",")[2];
        var isRepeat = customer.split(",")[3];
        if (isRepeat == 1) {
            alert("该客户为重客，无法维护");
            return;
        }
        $.ajax({
            url: "/project/judgeCustomer",
            data: {
                customerProjectId: customerProjectId
            },
            type: "get",
            success: function (data) {
                if (data == '1') {
                    window.location.href = "/project/addcustomerstatus?customerId=" + customerId + "&customerProjectId=" + customerProjectId + "&customerProjectStatus=" + customerStatus;
                } else {
                    alert("该客户已不属于私客，无法报备");
                }
            }
        });
    }

    function projectInfo(customer) {
        var customerProjectId = customer.split(",")[0];
        var isRepeat = customer.split(",")[1];
        if (isRepeat == 1) {
            alert("该客户为重客，无法维护");
            return;
        }
        $.ajax({
            url: "/project/judgeCustomer",
            data: {
                customerProjectId: customerProjectId
            },
            type: "get",
            success: function (data) {
                if (data == '1') {
                    window.location.href = "/project/reportcustomer?customerProjectId=" + customerProjectId;
                } else {
                    alert("该客户已不属于私客，无法查看");
                }
            }
        });
    }

</script>
</html>
