<!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">
<header>
    <div class="header">
        <a href="/customer/sea"
           th:href="(${day} == 2)?@{/customer/search(startDate=${param.startDate[0]},endDate=${param.endDate[0]},buyIntention=${param.buyIntention[0]})}:@{/customer/sea}"
           class="btn-a-back"><i class="iconfont">&#xe61f;</i></a>
        <h2 th:text="${title}">数据公海</h2>
    </div>
</header>
<div class="weui-flex my-client__tit">
    <div class="weui-flex__item showList" th:switch="${buyIntention}">购房意向
        <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>
<!--我的客户-->
<div class="my-client" th:each="customer : ${list}">
    <div class="weui-cell">
        <div class="weui-cell__hd"
             th:with="customerName=${#strings.contains(customer.name,',')?#strings.listSplit(customer.name,',')[0]: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:text="${customer.phone}">
            </p>
            <p class="my-client__tag" th:switch="${customer.buyIntention}">
                <span><i class="iconfont">&#xe6ea;</i><span th:text="${customer.lastManager}"></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>
    </div>
    <div class="weui-flex my-client__bd">
        <a href="javascript:;" class="weui-flex__item t-l">
            <i class="iconfont">&#xe603;</i>
            <span th:text="${customer.createDateStr}"></span>
        </a>
        <a th:if="${customer.buyIntention == '5'}" href="javascript:;"
           th:onclick="'javascript:deleteFormOcean(\'' +${customer.id}+ '\');'">删除</a>
        <a href="javascript:;" th:onclick="'javascript:toggleSheet(\'' +${customer.id}+ '\');'"><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-actionsheet" id="androidActionsheet">
    <div class="weui-actionsheet__menu" th:each="user : ${users}">
        <div class="weui-actionsheet__cell" th:text="${user.realName}"
             th:onclick="'javascript:bindManager(\''+${user.id}+'\');'"></div>
    </div>
</div>

<form id="searchForm" action="/customer/seal" th:action="'/customer/seal/'+${day}" 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]}">
</form>

<input type="hidden" name="customerId" id="customerId" value="">
<input type="hidden" name="userId" id="userId" value="">


<input type="hidden" name="usersNum" id="usersNum" th:value="${#lists.size(users)}">


<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="confirmDialog" 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="deleteDialog" 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 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>

<div id="noUserToast" 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>

<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/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="/static/js/sort.js"></script>

<script type="text/javascript" th:inline="javascript">
    var handler = null,
        page = 2, tmpPage,
        isLoading = false;

    var day = /*[[${day}]]*/ '1';

    function initSelected() {
        $("#tiles li").click(function () {
            var div = $(this).find(".thumbnail");
            if (div.hasClass("selected")) {
                div.removeClass("selected");
            } else {
                div.addClass("selected");
            }
        });
    }

    // ios
    $(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);
        $(".showList").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);

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

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

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

        $('#confirmDialog').on('click', '.weui-dialog__btn_default', function () {
            $('#androidActionsheet').removeClass('weui-actionsheet_toggle');
            $('#confirmDialog').fadeOut(200);
        });

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

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

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

    });

    //派工
    function toggleSheet(customerId) {
        $("#customerId").val(customerId);

        if ($("#usersNum").val() == 0) {
            if ($('#noUserToast').css('display') != 'none') return;
            $('#noUserToast').fadeIn(100);
            setTimeout(function () {
                $('#noUserToast').fadeOut(100);
            }, 2000);
        } else {
            var $androidActionsheet = $('#androidActionsheet');
            var $androidMask = $('#iosMask');

            $androidActionsheet.addClass('weui-actionsheet_toggle');
            //禁止列表滚动
            $("html,body").css({overflow: "hidden", height: '100%'});
            $androidMask.fadeIn(200);
            $(document).off();

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

    }
    //删除无效客户
    function deleteFormOcean(customerId) {
        $("#customerId").val(customerId);

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

    function saveDelete() {

        var customerId = $("#customerId").val();

        var $loadingToast = $('#loadingToast');
        if ($loadingToast.css('display') != 'none') return;
        $loadingToast.fadeIn(100);
        setTimeout(function () {
            $loadingToast.fadeOut(100);
        }, 5000);
        $.ajax({
            url: "/customer/deleteFormOcean",
            data: {'customerId': customerId},
            success: function () {
                window.location.reload();
            }
        });
    }


    /**
     * When scrolled all the way to the bottom, add more tiles.
     */
    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;
        $.ajax({
            url: "/customer/customerCell/" + day + "/" + page,
            data: {
                page: page,
                'buyIntention': $("#buyIntention").val(),
                'startDate': $("#startDate").val(),
                'endDate': $("#endDate").val()
            }, // Page parameter to make sure we load new data
            success: onLoadData
        });
        initSelected();
    }

    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;
        initSelected();

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

    function bindManager(userId) {
        $("#userId").val(userId);
        var $bindDialog = $('#bindDialog');
        $bindDialog.fadeIn(200);
    }

    function saveBind() {

        var customerId = $("#customerId").val();
        var userId = $("#userId").val();

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

        $.ajax({
            url: "/customer/bindManager",
            data: {'customerId': customerId, 'userId': userId, 'assignFrom': "fromSea"},
            success: function () {
                window.location.reload();
            }
        });
    }

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

    // android
    $(function () {
        $("#managerSheet").on('click', toggleSheet);
    });

    function checkCustomerPhone() {
        $('#bindDialog').fadeOut(200);

        var customerId = $("#customerId").val();
        var userId = $("#userId").val();
        $.ajax({
            url: "/customer/checkCustomerPhoneByCustomerIds",
            data: {
                userId: userId,
                customerId: customerId
            },
            async: true,
            type: "post",
            success: function (data) {
                if (data.result === "0") {
                    $("#confirmDialog .weui-dialog__title").text(data.msg + ",确认添加？");
                    var $confirmDialog = $('#confirmDialog');
                    $confirmDialog.fadeIn(200);
                } else if (data.result === "1") {
                    saveBind();
                    return false;
                }
            }
        });
    }
</script>

</body>

</html>
