<!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 ontouchstart class="bg-white">
<input type="hidden" id="managerFilter" th:value="${managerFilter}"/>
<input type="hidden" id="customerStatus" th:value="${customerStatus}"/>
<input type="hidden" id="startTime" th:value="${startTime}"/>
<input type="hidden" id="endTime" th:value="${endTime}"/>
<input type="hidden" id="customerId"/>
<input type="hidden" id="phone"/>
<header>
    <div class="header" th:switch="${timeFilter}">
        <a href="javascript:history.go(-1)" class="btn-a-back"><i class="iconfont">&#xe61f;</i></a>
        <h2 th:case="1">今日来电</h2>
        <h2 th:case="2">最近7天</h2>
        <h2 th:case="*">历史来电</h2>
    </div>
</header>
<div class="weui-flex my-client__tit">
    <div class="weui-flex__item showList" id="customerStatusText">客户状态<i class="iconfont">&#xe646;</i></div>
    <div class="weui-flex__item showList" id="managerFilterText">置业顾问<i class="iconfont">&#xe646;</i></div>
</div>

<!--弹出选择-->
<div class="weui-mask" id="iosMask" style="display: none"></div>
<div class="weui-actionsheet" id="customerStatusSelect">
    <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell showList" filterValue="">全部客户</div>
        <div class="weui-actionsheet__cell showList" filterValue="98">未跟踪</div>
        <div class="weui-actionsheet__cell showList" filterValue="0">已跟踪</div>
    </div>
</div>
<div class="weui-actionsheet" id="managerFilterSelect">
    <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell showList" filterValue="-1">全部顾问</div>
        <!--<div class="weui-actionsheet__cell showList" filterValue="0">当前用户</div>-->
        <div class="weui-actionsheet__cell showList" th:each="manager,index:${managers}"
             th:attr="filterValue=${manager.id}"
             th:text="${manager.realName}">示例菜单
        </div>
    </div>
</div>
<div id="customers"></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>

<div class="js_dialog" id="fallowDialog" 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>

<div class="js_dialog" id="bindDialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title" id="showPhone"></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" id="{{customer.id}}_customer">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <p class="tu-text">{{count + index}}</p>
            </div>
            <div class="weui-cell__bd">
                <p class="my-client__tag">
                    <a href="tel:{{customer.phone}}" class="my-client__tel">{{customer.phone}}</a>
                    <span><i class="iconfont">&#xe6ea;</i>{{customer.managerName}}</span>
                </p>
                <p class="weui-media-box__desc">来源：{{customer.actSource}}</p>
            </div>
        </div>
        <div class="weui-flex my-client__bd">
            <a href="javascript:void(0);" class="weui-flex__item t-l"><i class="iconfont">&#xe603;</i>{{customer.createTime.time
                |
                dateFormat:'MM.dd hh:mm:ss'}}</a>
            {{if customer.status == '98'}}
            <a href="javascript:fallowCustomer('{{customer.id}}','{{customer.phone}}')"><i
                    class="iconfont">&#xe775;</i>跟踪</a>
            <a href="javascript:abandonHotlineCustomer('{{customer.id}}','{{customer.phone}}')"><i
                    class="iconfont">&#xe775;</i>放弃</a>
            {{else if customer.status == '0'}}
            <a href="javascript:void(0);">已跟踪</a>
            {{else if customer.status == '2'}}
            <a href="javascript:void(0);">已放弃</a>
            {{/if}}
            <a href="javascript:deleteHotLineCustomer('{{customer.id}}');"
               class="btn-del" style="display: none"><i
                    class="iconfont">&#xe6d3;</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();
            }
        });

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

        $('#deleteDialog').on('click', '.weui-dialog__btn_primary', function () {
            var customerId = $("#customerId").val();

            $.ajax({
                url: "/customer/deletehotlinecustomer",
                data: {
                    customerId: customerId
                },
                type: "post",
                success: function (data) {
                    if (data.result == "1") {
                        $('#deleteDialog').fadeOut(200);
                        $("#" + customerId + "_customer").remove();
                        showMessage("success", "删除成功", 1000);
                    } else {
                        showMessage("error", "删除失败", 1000);
                    }
                }
            });
        });

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

        $('#fallowDialog').on('click', '.weui-dialog__btn_primary', function () {
            window.location.href = "/customer/addvisit?customerId=" + $("#customerId").val() + "&phone=" + $("#phone").val();
        });

        $('#bindDialog').on('click', '.weui-dialog__btn_primary', function () {
            abandonHotline();
        });

        $('#bindDialog').on('click', '.weui-dialog__btn_default', function () {
            $('#bindDialog').fadeOut(200);
        });
    });
    function loadData() {
        if (!isLoading) {
            isLoading = true;
            $.ajax({
                url: "/customer/hotline",
                data: {
                    managerFilter: $("#managerFilter").val() || "",
                    startTime: $("#startTime").val() || "",
                    endTime: $("#endTime").val(),
                    customerStatus: $("#customerStatus").val(),
                    currentPage: currentPage
                },
                type: "post",
                success: function (data) {
                    if (data.data.list == undefined || data.data.list.length == 0) {
                        isLoading = false;
                        $(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;
                }
            });
        }
    }

    function fallowCustomer(_customerId, _phone) {
        $("#customerId").val(_customerId);
        $("#phone").val(_phone);
        $.ajax({
            url: "/customer/checkcustomer",
            data: {
                customerPhone: _phone
            },
            type: "post",
            success: function (data) {
                if (data.result == "0") {
                    $("#phoneError").text(data.msg);
                    var deleteDialog = $('#fallowDialog');
                    deleteDialog.fadeIn(200);
                    $("#fallowDialog .weui-dialog__title").text(data.msg + "，是否继续");
                } else {
                    window.location.href = "/customer/addvisit?customerId=" + _customerId + "&phone=" + _phone;
                }
            }
        });
    }

    function abandonHotlineCustomer(_customerId, _phone) {
        var obj = document.getElementById('bindDialog');
        obj.style.display = "block";
        $("#customerId").val(_customerId);
        $("#phone").val(_phone);
        var obj2 = document.getElementById("showPhone");
        obj2.innerText = "确认放弃" + _phone + "?";
//        $('#bindDialog').fadeOut(200);
    }

    function abandonHotline(){
        var _customerId = $("#customerId").val();
        $.ajax({
            url: "/customer/abandonHotlineCustomer",
            data: {
                customerId: _customerId
            },
            type: "post",
            success: function (data) {
                if (data.result == "0") {
                    $("#phoneError").text(data.msg);
                    var deleteDialog = $('#fallowDialog');
                    deleteDialog.fadeIn(200);
                    $("#fallowDialog .weui-dialog__title").text(data.msg + "，是否继续");
                } else {
                    window.location.href = "/customer/hotline";
                }
            }
        });
    }

    function deleteHotLineCustomer(customerId) {
        $("#customerId").val(customerId);

        var deleteDialog = $('#deleteDialog');
        deleteDialog.fadeIn(200);
    }

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

<script type="text/javascript">
    // ios
    $(function () {

        $("#customerStatusSelect .showList").each(function () {
            if ($("#customerStatus").val() == $(this).attr("filterValue")) {
                var text = $(this).text() + "<i class='iconfont'>&#xe646;";
                $("#customerStatusText").html(text);
            }
        });

        $("#managerFilterSelect .showList").each(function () {
            if ($("#managerFilter").val() == $(this).attr("filterValue")) {
                var text = $(this).text() + "<i class='iconfont'>&#xe646;";
                $("#managerFilterText").html(text);
            }
        });

        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 = $('#customerStatusSelect');
                    break;
                case 1:
                    $selectFilter = $('#managerFilterSelect');
                    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");
                var text = $(this).text() + "<i class='iconfont'>&#xe646;";
                $("#" + key).val(value);
                $("#" + key + "Text").html(text);
                $("#customers").empty();
                currentPage = 1;
                count = 1;
                loadData();

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