<!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">
</head>

<body ontouchstart>
<header>
    <div class="header">
        <a href="javascript:backToUrl()" class="btn-a-back"><i class="iconfont">&#xe61f;</i></a>
        <h2>客户详情</h2>
        <a th:href="'javascript:goToUrl(\'' + @{/project/addvisit(customerId=${customerId},buyIntention=${customer.buyIntention})} + '\')'"
           class="btn-add-visit">添加回访</a>
    </div>
</header>
<input type="hidden" id="customerId" th:value="${customerId}"/>
<div class="weui-cells__title">基本信息</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell weui-cell_access">
        <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
        <div class="weui-cell__bd"
             th:onclick="'goToUrl(\'' + @{/customer/modifytextarea(customerId=${customer.id},key=customerName,value=${customer.name})} + '\')'">
            <input class="weui-input" type="text" th:value="${customer.name}" readonly/>
        </div>
        <div class="weui-cell__ft">
        </div>
    </div>
    <div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">性别</label>
        </div>
        <div class="weui-cell__bd ">
            <select id="sex" class="weui-select" name="selectCustomerInfo">
                <option value="0" th:selected="${customer.sex==0}">女</option>
                <option value="1" th:selected="${customer.sex==1}">男</option>
                <option value="2" th:selected="${customer.sex==2}">未知</option>
            </select>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
        <div class="weui-cell__bd">
            <p th:text="${customer.phone}"></p>
        </div>
        <div class="weui-cell__bd" id="crmView" style="font-size: 12px">CRM会员视图
        </div>
        <div class="weui-cell__ft">
        </div>
    </div>
    <div class="weui-cell others-tel bakPhone" th:style="${customer.bakPhone1 eq ''}?'display:none':''">
        <div class="weui-cell__hd"><label class="weui-label">其他号码1</label></div>
        <div class="weui-cell__bd"
             th:onclick="'goToUrl(\'' + @{/customer/modifytextarea(customerId=${customer.id},key=bakPhone1)} + '\')'">
            <input class="weui-input" type="tel" th:value="${customer.bakPhone1}" readonly/>
        </div>
        <!--<div class="weui-cell__ft">-->
        <!--<i class="weui-icon-cancel"></i>-->
        <!--</div>-->
    </div>
    <div class="weui-cell others-tel bakPhone" th:style="${customer.bakPhone2 eq ''}?'display:none':''">
        <div class="weui-cell__hd"><label class="weui-label">其他号码2</label></div>
        <div class="weui-cell__bd"
             th:onclick="'goToUrl(\'' + @{/customer/modifytextarea(customerId=${customer.id},key=bakPhone2)} + '\')'">
            <input class="weui-input" type="tel" th:value="${customer.bakPhone2}" readonly/>
        </div>
        <!--<div class="weui-cell__ft">-->
        <!--<i class="weui-icon-cancel"></i>-->
        <!--</div>-->
    </div>
    <div class="weui-cell others-tel bakPhone" th:style="${customer.bakPhone3 eq ''}?'display:none':''">
        <div class="weui-cell__hd"><label class="weui-label">其他号码3</label></div>
        <div class="weui-cell__bd"
             th:onclick="'goToUrl(\'' + @{/customer/modifytextarea(customerId=${customer.id},key=bakPhone3)} + '\')'">
            <input class="weui-input" type="tel" th:value="${customer.bakPhone3}" readonly/>
        </div>
        <!--<div class="weui-cell__ft">-->
        <!--<i class="weui-icon-cancel"></i>-->
        <!--</div>-->
    </div>
    <div class="weui-cell weui-a-more" th:if="${customer.bakPhone3} eq ''"><a href="javascript:addBakPhone()">添加更多号码</a>
    </div>
</div>
<div class="weui-cells__title">客户属性</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <!--{{each customer as ct index}}-->
        <div class="weui-cell__hd"><label class="weui-label">客户类型</label></div>
        <!--{{if ct.customerSourceType == '1' && ct.status != '0'}}-->
        <!--<div class="weui-cell__bd">-->
            <!--<input class="weui-input" type="text" value="常规" readonly="readonly"/>-->
        <!--</div>-->
        <!--{{else if ct.customerSourceType == '2'}}-->
        <!--<div class="weui-cell__bd">-->
            <!--<input class="weui-input" type="text" value="抢客" readonly="readonly"/>-->
        <!--</div>-->
        <!--{{else if ct.customerSourceType == '3'}}-->
        <!--<div class="weui-cell__bd">-->
            <!--<input class="weui-input" type="text" value="营销" readonly="readonly"/>-->
        <!--</div>-->
        <!--{{else}}-->
        <!--<div class="weui-cell__bd">-->
            <!--<input class="weui-input" type="text" value="400进线" readonly="readonly"/>-->
        <!--</div>-->
        <!--{{/if}}-->
        <!--{{/each}}-->
        <div class="weui-cell__bd" th:switch="${customer.customerSourceType}">
            <p th:case="1">常规</p>
            <p th:case="2">抢客</p>
            <p th:case="3">营销</p>
            <p th:case="4">400进线</p>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">置业顾问</label></div>
        <div class="weui-cell__bd">
            <p th:text="${customer.managerName}"></p>
        </div>
    </div>
</div>
<div class="weui-cells__title">客户情况与来源</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">购房意向</label>
        </div>
        <div class="weui-cell__bd" th:switch="${customer.buyIntention}">
            <select id="buyIntention" class="weui-select" name="selectCustomerInfo">
                <option value="" th:selected="${customer.buyIntention==''}">待定</option>
                <option value="1" th:selected="${customer.buyIntention=='1'}">A</option>
                <option value="2" th:selected="${customer.buyIntention=='2'}">B</option>
                <option value="3" th:selected="${customer.buyIntention=='3'}">C</option>
                <option value="4" th:selected="${customer.buyIntention=='4'}">D</option>
                <option value="5" th:selected="${customer.buyIntention=='5'}">E(丢入公海)</option>
            </select>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">活动来源</label>
        </div>
        <div class="weui-cell__bd">
            <p th:text="${customer.actSource}"></p>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">初次来源</label>
        </div>
        <div class="weui-cell__bd">
            <p th:text="${customer.firstSource}"></p>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">最近来源</label>
        </div>
        <div class="weui-cell__bd">
            <p th:text="${customer.latestSource}"></p>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">最近回访</label>
        </div>
        <div class="weui-cell__bd">
            <p th:text="${customer.crmLatestCall}"></p>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">回访结果</label>
        </div>
        <div class="weui-cell__bd">
            <p th:text="${customer.crmLatestCallResult}"></p>
        </div>
    </div>
</div>
<div class="weui-cells__title">客户状态</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">跟踪状态</label>
        </div>
        <div class="weui-cell__bd">
            <select id="traceStatus" class="weui-select" name="selectCustomerInfo">
                <option value="1" th:selected="${customer.traceStatus==1}">有效</option>
                <option value="2" th:selected="${customer.traceStatus==2}">已购</option>
                <option value="3" th:selected="${customer.traceStatus==3}">我购</option>
                <option value="4" th:selected="${customer.traceStatus==4}">暂缓</option>
            </select>
        </div>
    </div>
    <a class="weui-cell weui-cell_access bg-gray gray"
       th:href="'javascript:goToUrl(\'' + @{/project/visitrecord(customerId=${customerId},buyIntention=${customer.buyIntention})} + '\')'">
        <div class="weui-cell__bd">
            <p>回访记录</p>
        </div>
        <div class="weui-cell__ft">
        </div>
    </a>
    <a class="weui-cell weui-cell_access bg-gray gray"
       th:href="'javascript:goToUrl(\'' + @{/project/projectcustomers(customerId=${customerId})} + '\')'">
        <div class="weui-cell__bd">
            <p>约看记录</p>
        </div>
        <div class="weui-cell__ft">
        </div>
    </a>
</div>
<!--<div class="p40">-->
<!--<a class="weui-btn weui-btn_blue" href="javascript:" id="showToast">保存</a>-->
<!--</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/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 type="text/javascript">
    $(function () {
        // 其他号码删除
        telHide();
        // 提交成功提示
        var $toast = $('#toast');
        $('#showToast').on('click', function () {
            if ($toast.css('display') != 'none') return;

            $toast.fadeIn(100);
            setTimeout(function () {
                $toast.fadeOut(100);
            }, 2000);
        });

        $("[name=selectCustomerInfo]").on("change", function () {
            var _id = $(this).attr("id");
            if (_id == "buyIntention" && $("#" + _id).val() == '5') {
                checkModify();
            } else {
                updateCustomerInfo(_id);
            }
        });

        $('#deleteDialog').on('click', '.weui-dialog__btn_default', function () {
            var len = window.location.href.indexOf("random");
            if (len > 0) {
                window.location.href = window.location.href.substring(0, len) + "random=" + Math.random();
            } else {
                window.location.href = window.location.href + "&random=" + Math.random();
            }
        });

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

        $("#crmView").on("click", function () {
            $.ajax({
                url: '/project/getCRMURL',
                data: {"customerId": $("#customerId").val()},
                type: "GET",
                success: function (data) {
                    if (data.result === '1') {
                        if (data.data.entity === "" || data.data.entity === null) {
                            showMessage("error", "该用户暂未推送至CRM！", 1000);
                            return false;
                        }
                        window.location.href = data.data.entity;
                    } else {
                        showMessage("error", "操作失败！", 1000);
                    }
                }
            });
        });
    });

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

    function updateCustomerInfo(_id) {
        $.ajax({
            url: "/customer/modifytextarea",
            data: {
                customerId: $("#customerId").val(),
                key: _id,
                value: $("#" + _id).val()
            },
            type: "post",
            success: function (data) {
                if (data.result == "1") {
                    // 提交成功提示
                    var $toast = $('#toast');
                    if ($toast.css('display') != 'none') return;

                    $toast.fadeIn(100);
                    setTimeout(function () {
                        $toast.fadeOut(100);
                    }, 2000);
                }
            }
        });
    }

    function addBakPhone() {
        var count = $(".bakPhone:visible").length;
        if (count >= 3) {
            return;
        }
        $(".bakPhone").eq(count).show();

        telHide();
    }

    function telHide() {
        $(".bakPhone").children(".weui-cell__ft").remove();

        var cancelIcon = "<div class='weui-cell__ft'>"
            + "<i class='weui-icon-cancel'></i>"
            + "</div>";
        var currentCount = $(".bakPhone:visible").length;
        var currentIndex = currentCount - 1;
        $(".bakPhone").eq(currentIndex).append(cancelIcon);

        $(".bakPhone").eq(currentIndex).on("click", ".weui-icon-cancel", function () {
            $(this).parents('.others-tel').hide();
            $("#bakPhone" + currentCount).val("");
            updateCustomerInfo("bakPhone" + currentCount);
            telHide();
        });
    }

    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>
</html>
