<!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">
    <link rel="stylesheet" href="/static/css/wechat/tag.css">

</head>

<body ontouchstart class="bg-white">

<header>
    <div class="header">
        <a th:href="@{/customer/myCustomers(viewTab=${viewTab})}" class="btn-a-back"><i class="iconfont">
            &#xe61f;</i></a>
        <h2>我的客户</h2>
    </div>
</header>

<div class="weui-flex my-client__tit">
    <div class="weui-flex__item showList" id="buyIntentionShow"
         th:switch="${param.buyIntention==null?'':param.buyIntention[0]}">购房意向
        <span th:case="'1'">(A)</span>
        <span th:case="'2'">(B)</span>
        <span th:case="'3'">(C)</span>
        <span th:case="'4'">(D)</span>
        <span th:case="'5'">(E)</span>
        <span th:case="'99'">(待定)</span>
        <span th:case="''">(全部)</span>
        <i class="iconfont">&#xe646;</i></div>
    <div class="weui-flex__item showList" id="traceShow" th:switch="${param.traceStatus==null?'':param.traceStatus[0]}">
        跟踪状态
        <span th:case="'1'">(有效)</span>
        <span th:case="'2'">(已购)</span>
        <span th:case="'3'">(我购)</span>
        <span th:case="'4'">(暂缓)</span>
        <span th:case="''">(全部)</span>
        <i class="iconfont">&#xe646;</i></div>
    <div class="weui-flex__item showList" id="statusShow"
         th:switch="${param.projectStatus==null?'':param.projectStatus[0]}">客户状态
        <span th:case="'1'">(约看)</span>
        <span th:case="'2'">(到访)</span>
        <span th:case="'3'">(认筹)</span>
        <span th:case="'4'">(认购)</span>
        <span th:case="'5'">(签约)</span>
        <span th:case="'6'">(退房)</span>
        <span th:case="''">(全部)</span>
        <i class="iconfont">&#xe646;</i></div>
    <!--<div class="weui-flex__item showList">时间筛选<i class="iconfont">&#xe646;</i></div>-->
</div>

<!--我的客户-->
<div class="my-client" th:each="customer : ${listData}">
    <div class="weui-cell weui-cell_access"
         th:onclick="'goToUrl(\'' + @{/customer/customerdetail(customerId=${customer.id})} + '\')'">
        <div class="weui-cell__hd" th:with="customerName=${customer.name}">
            <p class="tu-text"
               th:text="${#strings.substring(customerName,0,#strings.length(customerName)>3?3:#strings.length(customerName))}"></p>
        </div>
        <div class="weui-cell__bd">
            <p th:switch="${customer.traceStatus}">
                <span>
                    <a th:href="|tel:${customer.phone}|" class="my-client__tel" th:text="${customer.phone}"></a>
                </span>
                <span class="my-client__span" th:case="'1'">有效</span>
                <span class="my-client__span" th:case="'2'">已购</span>
                <span class="my-client__span" th:case="'3'">我购</span>
                <span class="my-client__span" th:case="'4'">暂缓</span>
            </p>
            <p class="my-client__tag" th:switch="${customer.buyIntention}">
                <span><i class="iconfont">&#xe6ea;</i><span th:text="${customer.managerName}"></span></span>
                <span th:case="'1'"><i class="iconfont">&#xe684;</i>A</span>
                <span th:case="'2'"><i class="iconfont">&#xe684;</i>B</span>
                <span th:case="'3'"><i class="iconfont">&#xe684;</i>C</span>
                <span th:case="'4'"><i class="iconfont">&#xe684;</i>D</span>
                <span th:case="'5'"><i class="iconfont">&#xe684;</i>E</span>
                <span th:case="''"><i class="iconfont">&#xe684;</i>待定</span>
            </p>
        </div>
        <span class="collect" th:attr="data=${customer.id}">
            <i th:class="${customer.star} == 1? 'iconfont icon-collect-on' : 'iconfont icon-collect'"
               th:onclick="'javascript:toggleCollect(this,\'' +${customer.starUserId}+'\',\'' +${customer.star}+'\',\'' +${customer.managerId}+'\');'"></i>
        </span>
        <div class="weui-cell__ft" style="width:10px;height:26px;"
             th:onclick="'goToUrl(\'' + @{/customer/customerdetail(customerId=${customer.id})} + '\')'"></div>
    </div>
    <div class="bor-t">
        <div class="center">

                <span th:each="label: ${customer.lids}">
                    <!--<c:if test="${1 eq label.colorId}">-->
                        <span class="all-tag-item gray" th:data="${label.colorId}" th:attr="dataIndex=${label.labelId}"
                              th:content="${label.labelId}"><p th:text="${label.labelName}"></p></span>
                    <!--</c:if>-->
                </span>
        </div>
    </div>
    <p class="my-client__desc capture" th:if="${customer.content ne ''}" th:text="${customer.content}"></p>
    <div class="weui-flex my-client__bd">
        <a th:href="'javascript:goToUrl(\'' + @{/project/addvisit(customerId=${customer.id},buyIntention=${customer.buyIntention})} + '\')'"
           class="weui-flex__item"><i class="iconfont">
            &#xe60f;</i>添加回访</a>
        <a href="javascript:;" th:onclick="'projectShow('+${customer.id}+')'" class="weui-flex__item"><i
                class="iconfont">
            &#xe775;</i>约看客户</a>
    </div>
</div>
<!--我的客户 end-->

<!--弹出选择-->
<div class="weui-mask" id="iosMask" style="display: none"></div>
<div class="weui-actionsheet" id="iosActionsheet">
    <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" onclick="query(99)">待定</div>
        <div class="weui-actionsheet__cell" onclick="query(1)">A</div>
        <div class="weui-actionsheet__cell" onclick="query(2)">B</div>
        <div class="weui-actionsheet__cell" onclick="query(3)">C</div>
        <div class="weui-actionsheet__cell" onclick="query(4)">D</div>
        <div class="weui-actionsheet__cell" onclick="query(5)">E</div>
        <div class="weui-actionsheet__cell" onclick="query()">全部</div>
    </div>
</div>

<div class="weui-mask" id="traceMask" style="display: none"></div>
<div class="weui-actionsheet" id="traceMasksheet">
    <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" onclick="queryTrace(1)">有效</div>
        <div class="weui-actionsheet__cell" onclick="queryTrace(2)">已购</div>
        <div class="weui-actionsheet__cell" onclick="queryTrace(3)">我购</div>
        <div class="weui-actionsheet__cell" onclick="queryTrace(4)">暂缓</div>
        <div class="weui-actionsheet__cell" onclick="queryTrace()">全部</div>
    </div>
</div>

<div class="weui-mask" id="statusMask" style="display: none"></div>
<div class="weui-actionsheet" id="statusMasksheet">
    <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" onclick="queryStatus(1)">约看</div>
        <div class="weui-actionsheet__cell" onclick="queryStatus(2)">到访</div>
        <div class="weui-actionsheet__cell" onclick="queryStatus(3)">认筹</div>
        <div class="weui-actionsheet__cell" onclick="queryStatus(4)">认购</div>
        <div class="weui-actionsheet__cell" onclick="queryStatus(5)">签约</div>
        <div class="weui-actionsheet__cell" onclick="queryStatus(6)">退房</div>
        <div class="weui-actionsheet__cell" onclick="queryStatus()">全部</div>
    </div>
</div>

<div class="weui-mask" id="projectMask" style="display: none"></div>


<div class="weui-actionsheet" id="projectMasksheet2"
     style="height: 3.35rem;z-index: 10000;position: absolute;bottom: 23.35rem;display: none">
    <div class="weui-actionsheet__menu" id="projectSheet2">
        <div class="clearfix" style="padding: 0.9rem;position: relative;">

            <input id="project" type="search" class="inp-search fl" placeholder=""
                   style="width: 13.5rem;height: 1.55rem;"/>

            <div class="text-search" id="projectSearch" th:onclick="'projectNameShow()'"
                 style="width: 4.25rem;float:right;text-align: center;position: absolute;right: 0rem;height: 3.3rem;top: 0;line-height: 3.3rem;">
                搜索
            </div>
        </div>
    </div>

</div>
<div class="weui-actionsheet" id="projectMasksheet" style="padding-top:3.35rem">

    <!--<div style="height: 2.8rem;background-color: #fff;width: 100%;"></div>-->
    <div class="weui-actionsheet__menu" id="projectSheet">
        <div class="weui-actionsheet__cell" th:each="project : ${projectListData}"
             th:onclick="'bindProject('+${project.id}+')'" th:text="${project.projectName}"></div>
    </div>
</div>

<form id="searchForm" action="/customer/myCustomerList" th:action="'/customer/myCustomerList/'" method="get">
    <input type="hidden" name="buyIntention" id="buyIntention" value=""
           th:value="${param.buyIntention==null?'':param.buyIntention[0]}">
    <input type="hidden" name="startDate" id="startDate" value=""
           th:value="${param.startDate==null?'':param.startDate[0]}">
    <input type="hidden" name="endDate" id="endDate" value="" th:value="${param.endDate==null?'':param.endDate[0]}">
    <input type="hidden" name="type" id="type" value="" th:value="${param.type==null?'':param.type[0]}">
    <input type="hidden" name="traceStatus" id="traceStatus" value=""
           th:value="${param.traceStatus==null?'':param.traceStatus[0]}">
    <input type="hidden" name="projectStatus" id="projectStatus" value=""
           th:value="${param.projectStatus==null?'':param.projectStatus[0]}">
    <input type="hidden" name="searchKey" id="searchKey" value=""
           th:value="${param.searchKey==null?'':param.searchKey[0]}">
    <input type="hidden" name="userPhone" id="userPhone" value=""
           th:value="${param.userPhone==null?'':param.userPhone[0]}">
    <input type="hidden" id="labelId" name="labelId" th:value="${labelId}"/>
</form>

<div class="js_dialog" id="bindDialog" style="opacity: 0; 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="successDialog" style="opacity: 0; display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__bd">操作成功</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" id="succBtn" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
        </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 id="noProjectToast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon_toast"></i>
        <p class="weui-toast__content">暂时没有可指派的项目</p>
    </div>
</div>

<input type="hidden" name="bindCustomerId" id="bindCustomerId">
<input type="hidden" name="bindProjectId" id="bindProjectId">
<input type="hidden" id="currentUserId" name="currentUserId" th:value="${currentSystemId}"/>


<div id="loadingToast" style="opacity: 0; display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
    </div>
</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" src="/static/js/history.js"></script>
<script type="text/javascript">
    var handler = null,
        page = 2, tmpPage,
        isLoading = false;

    $(function () {
        var $iosActionsheet = $('#iosActionsheet');
        var $iosMask = $('#iosMask');

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

        $iosMask.on('click', hideActionSheet);
        $("#buyIntentionShow").on("click", function () {
            $iosActionsheet.addClass('weui-actionsheet_toggle');
            //禁止列表滚动
            $("html,body").css({overflow: "hidden", height: '100%'});
            $iosMask.fadeIn(200);
            $(document).off();
        });
        $('.weui-actionsheet__cell').on('click', hideActionSheet);

        $('#succBtn').on('click', function () {
            $("#successDialog").fadeOut(200);
            $("#bindDialog").fadeOut(200);
        });

        var $traceMasksheet = $('#traceMasksheet');
        var $traceMask = $('#traceMask');

        function hideTraceSheet() {
            $traceMasksheet.removeClass('weui-actionsheet_toggle');
            //解除列表滚动
            $("html,body").css({overflow: "auto", height: '100%'});
            $traceMask.fadeOut(200);
            $(document).on('scroll', onScroll);
        }

        $traceMask.on('click', hideTraceSheet);
        $("#traceShow").on("click", function () {
            $traceMasksheet.addClass('weui-actionsheet_toggle');
            //禁止列表滚动
            $("html,body").css({overflow: "hidden", height: '100%'});
            $traceMask.fadeIn(200);
            $(document).off();
        });
        $('.weui-actionsheet__cell').on('click', hideTraceSheet);

        var $statusMasksheet = $('#statusMasksheet');
        var $statusMask = $('#statusMask');

        function hideStatusSheet() {
            $statusMasksheet.removeClass('weui-actionsheet_toggle');
            //解除列表滚动

            $("html,body").css({overflow: "auto", height: '100%'});
            $statusMask.fadeOut(200);
            $(document).on('scroll', onScroll);
        }

        $statusMask.on('click', hideStatusSheet);
        $("#statusShow").on("click", function () {
            $statusMasksheet.addClass('weui-actionsheet_toggle');
            //禁止列表滚动
            $("html,body").css({overflow: "hidden", height: '100%'});
            $statusMask.fadeIn(200);
            $(document).off();
        });
        $('.weui-actionsheet__cell').on('click', hideStatusSheet);

        var $projectMasksheet = $('#projectMasksheet');
        var $projectMasksheet2 = $('#projectMasksheet2');
        var $projectMask = $('#projectMask');

        function hideProjectSheet() {
            $projectMasksheet.removeClass('weui-actionsheet_toggle');
            $projectMasksheet2.removeClass('weui-actionsheet_toggle');
            //解除列表滚动

            $("#projectMasksheet2").css('display', 'none');
//            $("#projectMasksheet2").style.display
            $("html,body").css({overflow: "auto", height: '100%'});
            $projectMask.fadeOut(200);
            $(document).on('scroll', onScroll);
        }

        $projectMask.on('click', hideProjectSheet);

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

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

        var tags = document.getElementsByClassName("all-tag-item");
        if (tags != undefined && tags != '') {
            for (var i = 0; i < tags.length; i++) {
                var value = tags[i].attributes.data.value;
                if (value == 1) {
                    tags[i].className = "all-tag-item gray active"
                }
                if (value == 2) {
                    tags[i].className = "all-tag-item red active"
                }
                if (value == 3) {
                    tags[i].className = "all-tag-item orange active"
                }
                if (value == 4) {
                    tags[i].className = "all-tag-item green active"
                }
                if (value == 5) {
                    tags[i].className = "all-tag-item blue active"
                }
                if (value == 6) {
                    tags[i].className = "all-tag-item darkblue active"
                }
                if (value == 7) {
                    tags[i].className = "all-tag-item zi active"
                }
            }
        }

        $(document).on('scroll', onScroll);
    });

    function projectShow(customerId) {
        // 校验是否已有回访记录
        $.ajax({
            url: "/project/getvisitrecords",
            type: "post",
            data: {'customerId': customerId},
            success: function (data) {
                if (data.data == null || data.data.list.length == 0) {
                    // 若无回访记录，弹框提示“请先添加客户回访，才能约看客户”
                    alert("请先添加客户回访，才能约看客户");
                    return;
                } else {
                    $("#projectSheet").text("");
                    $("#bindCustomerId").val(customerId);
                    var projectName = $("#projectSearch").val();
                    $.ajax({
                        url: "/customer/getBindProject",
                        type: "post",
                        data: {'customerId': customerId},
                        success: function (data) {
                            if (data && data.length > 0) {
                                $.each(data, function (index, info) {
                                    $("#projectSheet").append("<div class='weui-actionsheet__cell' onclick=\"bindProject('" + info.id + "')\">" + info.projectName + "</div>");
                                });

                                $('#projectMasksheet').addClass('weui-actionsheet_toggle');
                                $('#projectMasksheet2').addClass('weui-actionsheet_toggle');
                                //禁止列表滚动
                                $("html,body").css({overflow: "hidden", height: '100%'});
                                $('#projectMask').fadeIn(100);
                                $(document).off();
                            } else {
                                //noProjectToast
                                if ($('#noProjectToast').css('display') != 'none') return;
                                $('#noProjectToast').fadeIn(100);
                                setTimeout(function () {
                                    $('#noProjectToast').fadeOut(100);
                                }, 2000);
                            }
                            setTimeout(function () {
                                var aaaa = $("#projectMasksheet").height() * 2 / 40 - 3.35;
                                //noProjectToast
                                $("#projectMasksheet2").css({'bottom': aaaa + 'rem', 'display': 'block'})
                            }, 10);
                        }
                    });
                }
            }
        });
    }

    function projectNameShow() {
        var bindCustomerId = $("#bindCustomerId").val();
        var projectName = $("#project").val();
        $("#projectSheet").text("");
        $.ajax({
            url: "/customer/getBindProject",
            type: "post",
            data: {'customerId': bindCustomerId, projectName: projectName},
            success: function (data) {
                $("#project").val('');
                if (data && data.length > 0) {
                    $.each(data, function (index, info) {
                        $("#projectSheet").append("<div class='weui-actionsheet__cell' onclick=\"bindProject('" + info.id + "')\">" + info.projectName + "</div>");
                    });
                    $('#projectMasksheet').addClass('weui-actionsheet_toggle');

                    //禁止列表滚动
                    $("html,body").css({overflow: "hidden", height: '100%'});
                    $('#projectMask').fadeIn(100);
                    $(document).off();
                } else {
                    if ($('#noProjectToast').css('display') != 'none') return;
                    $('#noProjectToast').fadeIn(100);
                    setTimeout(function () {
                        $('#noProjectToast').fadeOut(100);
                    }, 2000);
                }
                setTimeout(function () {
                    var aaaa = $("#projectMasksheet").height() * 2 / 40 - 3.35
                    //noProjectToast
                    $("#projectMasksheet2").css({'bottom': aaaa + 'rem', 'display': 'block'})
                }, 10);
            }
        });
    }


    function bindProject(projectId) {
        var $bindDialog = $('#bindDialog');
        var customerId = $("#bindCustomerId").val();
        $("#bindProjectId").val(projectId);
        $bindDialog.fadeIn(200);
    }

    function saveBind() {
        var customerId = $("#bindCustomerId").val();
        var bindProjectId = $("#bindProjectId").val();
        $.ajax({
            url: "/customer/saveBindProject",
            type: "post",
            data: {'customerId': customerId, 'bindProjectId': bindProjectId},
            success: function (data) {
//                if("1"==data){
//                    $('#successDialog').fadeIn(200);
//                }
                if ($('#toast').css('display') != 'none') return;
                $('#toast').fadeIn(100);
                setTimeout(function () {
                    $('#toast').fadeOut(100);
                }, 2000);

                $('#bindDialog').fadeOut(200);

                var $projectMasksheet = $('#projectMasksheet');
                var $projectMask = $('#projectMask');
                $projectMasksheet.removeClass('weui-actionsheet_toggle');
                //解除列表滚动
                $("html,body").css({overflow: "auto", height: '100%'});
                $projectMask.fadeOut(200);
                $(document).on('scroll', onScroll);

            }
        });
    }

    function toggleCollect(st, starUserId, star, managerId) {
        //收藏
        var currentUserId = $("#currentUserId").val();

        if (star == 1 && starUserId != currentUserId) {
            alert("其他人的星标客户不能取消哦");
            return false;
        }
        if (star == 0 && starUserId != '' && starUserId != currentUserId) {
            alert("不能为其他客户添加星标哦");
            return false;
        }
        if (star == 0 && starUserId == '' && managerId != currentUserId) {
            alert("不能为其他客户添加星标哦");
            return false;
        }
        var flag = "on";
        var customerId = $(st).closest("span").attr("data");
        if ($(st).hasClass('icon-collect')) {
            $(st).removeClass('icon-collect').addClass('icon-collect-on');
        } else {
            flag = "off";
            $(st).removeClass('icon-collect-on').addClass('icon-collect');
        }

        $.ajax({
            url: "/customer/starToggle",
            data: {flag: flag, 'customerId': customerId},
            success: function (data) {

            }
        });

    }

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

                var $loadingToast = $('#loadingToast');
                if ($loadingToast.css('display') != 'none') {
                    return;
                }
                $loadingToast.fadeIn(100);

                loadData();
            }
        }
    }

    function loadData() {
        isLoading = true;
        var labelId = $("#labelId").val();
        $.ajax({
            url: "/customer/myCustomerListCell", //buyIntention startDate endDate traceStatus projectStatus
            data: {
                page: page, 'type': $("#type").val(), 'buyIntention': $("#buyIntention").val()
                , 'startDate': $("#startDate").val(), 'endDate': $("#endDate").val()
                , 'traceStatus': $("#traceStatus").val(), 'projectStatus': $("#projectStatus").val()
                , 'searchKey': $("#searchKey").val(), 'userPhone': $("#userPhone").val(), 'labelId': labelId
            }, // Page parameter to make sure we load new data
            success: onLoadData
        });
    }

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

        $(".my-client :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;

        var listData = "${listData}";

        if (listData == null || listData == undefined || listData.length == 0) {
            document.getElementById("alltag").classList.remove("all-tag")
        }

        var $loadingToast = $('#loadingToast');
        $loadingToast.fadeOut(100);
    }

    function query(inten) {
        $("#buyIntention").val(inten);
        $("#searchForm").submit();
    }

    function queryTrace(inten) {
        $("#traceStatus").val(inten);
        $("#searchForm").submit();
    }

    function queryStatus(inten) {
        $("#projectStatus").val(inten);
        $("#searchForm").submit();
    }

</script>
</body>

</html>
