<!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="" class="btn-a-back"><i class="iconfont">&#xe61f;</i></a>
        <h2>新增客户</h2>
    </div>
</header>
<div class="weui-cells__title">基本信息</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label for="customerName" class="weui-label"><span style="color: red;">*</span>姓名</label>
        </div>
        <div class="weui-cell__bd">
            <input id="customerName" class="weui-input" type="text" placeholder="请输入姓名"/>
        </div>
    </div>
    <div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
            <label for="customerSex" class="weui-label">性别</label>
        </div>
        <div class="weui-cell__bd">
            <select id="customerSex" class="weui-select" name="select3">
                <option value="2">未知</option>
                <option value="0">女</option>
                <option value="1">男</option>
            </select>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label for="customerPhone" class="weui-label"><span style="color: red;">*</span>手机号</label>
        </div>
        <div class="weui-cell__bd">
            <input id="customerPhone" class="weui-input" type="tel" placeholder="请输入手机号" maxlength="11"
                   onblur="checkPhone()"/>
        </div>
        <div class="weui-cell__bd" id="phoneError" style="color:#D9463F">
        </div>
    </div>
    <div class="weui-cell weui-a-more">添加更多号码</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="buyIntention" class="weui-label"><span style="color: red;">*</span>购房意向</label>
        </div>
        <div class="weui-cell__bd">
            <select id="buyIntention" class="weui-select" name="select1">
<!--                <option value="99">待定</option>-->
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">C</option>
                <option value="4">D</option>
                <!--<option value="4">无效</option>-->
            </select>
        </div>
    </div>
    <div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
            <label for="actSource" class="weui-label">活动来源</label>
        </div>
        <div class="weui-cell__bd">
            <select id="actSource" class="weui-select" name="select2">
                <option th:each="resource,index : ${resources}" th:value="${resource.sourceName}"
                        th:text="${resource.sourceName}">其他
                </option>
            </select>
        </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="traceStatus" class="weui-label">跟踪状态</label>
        </div>
        <div class="weui-cell__bd">
            <select id="traceStatus" class="weui-select" name="select3">
                <option value="1">有效</option>
                <option value="2">已购</option>
                <option value="3">我购</option>
                <option value="4">暂缓</option>
            </select>
        </div>
    </div>
</div>
<div class="weui-cells__title"><span style="color: red;">*</span>回访记录</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <textarea class="weui-textarea" id="remark" placeholder="请输入回访记录" rows="5" maxlength="600"></textarea>
            <div class="weui-textarea-counter"><span id="contentLengthStr">0</span>/600</div>
        </div>
    </div>
</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>

<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">
    String.prototype.trim=function(){
        return this.replace(/(^\s*)|(\s*$)/g, "");
    }

    var count = 0;
    $(function () {

        var textarea = document.getElementById("remark");

        if (textarea.addEventListener) {
            // all browsers except IE before version 9
            textarea.addEventListener("input", OnInput, false);
            // Google Chrome and  Safari
            textarea.addEventListener("textInput", OnTextInput, false);
            // Internet Explorer from version 9
            textarea.addEventListener("textinput", OnTextInput, false);
        }

        if (textarea.attachEvent) {
            textarea.attachEvent("onpropertychange", OnPropChanged);
        }

        // Google Chrome, Safari and Internet Explorer from version 9
        function OnTextInput(event) {
            $("#contentLengthStr").text($(this).val().length);
        }

        // Firefox, Google Chrome, Opera, Safari from version 5, Internet Explorer from version 9
        function OnInput(event) {
            $("#contentLengthStr").text($(this).val().length);
        }

        // Internet Explorer
        function OnPropChanged(event) {
            // 使用event.propertyName 过滤
            if (event.propertyName.toLowerCase() == "value") {
                $("#contentLengthStr").text($(this).val().length);
            }
        }

        $('#callContent').bind('input propertychange', function () {
            $("#contentLengthStr").text($(this).val().length);
        });

        document.getElementById("remark").addEventListener("input", function () {
            contentLength = this.value.length;
            $("#contentLengthStr").text(contentLength);
        });

        // 新增 其他号码
        var o_html = '<div class="weui-cell others-tel">' +
            '<div class="weui-cell__hd"><label class="weui-label">其他号码</label></div>' +
            '<div class="weui-cell__bd">' +
            '<input class="weui-input bakPhone" type="tel" placeholder="请输入手机号" maxlength="11"/>' +
            '</div>' +
            '<div class="weui-cell__ft">' +
            '<i class="weui-icon-cancel"></i>' +
            '</div>' +
            '</div>';
        $('.weui-a-more').on('click', function () {
            if (count >= 3) {
                return;
            }
            $(this).before(o_html);
            count++;
        })
        // 其他号码删除
        $(".weui-cells_form").on("click", ".others-tel .weui-icon-cancel", function () {
            $(this).parents('.others-tel').remove();
            count--;
        });
        $('#showToast').on('click', function () {
            saveCustomerProject();
        });

        $("#remark").on("keyup", function () {
            contentLength = this.value.length;
            $("#contentLengthStr").text(contentLength);
        });
    });

    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 saveCustomerProject() {
        var customerName = $("#customerName").val();
        if (customerName == "" || customerName == undefined) {
            showMessage("error", "请填写姓名！", 1000);
            return false;
        }
        var phone = $("#customerPhone").val();
        if (phone == "" || phone == undefined) {
            showMessage("error", "手机号不能为空！", 1000);
            return false;
        }
        if (!(/^1[34578]\d{9}$/.test(phone))) {
            showMessage("error", "手机号有误，请重填！", 1000);
            return false;
        }
        var buyIntention = $("#buyIntention").val();
        if (buyIntention == "" || buyIntention == undefined) {
            showMessage("error", "请填写购房意向", 1000);
            return false;
        }
        var remark = $("#remark").val().trim();
        if (remark == "" || remark == undefined) {
            showMessage("error", "请填写回访记录", 1000);
            return false;
        }
        var actSource = $("#actSource").val();
        if (actSource == "" || actSource == undefined) {
            showMessage("error", "请选择活动来源！", 1000);
            return false;
        }
        var traceStatus = $("#traceStatus").val();
        if (traceStatus == "" || traceStatus == undefined) {
            showMessage("error", "请选择跟踪状态！", 1000);
            return false;
        }
        var bakPhone = $(".bakPhone");
        var bakPhone1 = "";
        var bakPhone2 = "";
        var bakPhone3 = "";
        for (var i = 0, bakLength = bakPhone.length; i < bakLength; i++) {
            switch (i) {
                case 0:
                    bakPhone1 = bakPhone[i].value;
//                    if (bakPhone1 == "" || bakPhone1 == undefined) {
//                        showMessage("error", "其他号码1不能为空！", 1000);
//                        return false;
//                    }
                    if (bakPhone1 != "" && !(/^1[34578]\d{9}$/.test(bakPhone1))) {
                        showMessage("error", "其他号码1有误，请重填！", 1000);
                        return false;
                    }
                    break;
                case 1:
                    bakPhone2 = bakPhone[i].value;
//                    if (bakPhone2 == "" || bakPhone2 == undefined) {
//                        showMessage("error", "其他号码2不能为空！", 1000);
//                        return false;
//                    }
                    if (bakPhone2 != "" && !(/^1[34578]\d{9}$/.test(bakPhone2))) {
                        showMessage("error", "其他号码2有误，请重填！", 1000);
                        return false;
                    }
                    break;
                case 2:
                    bakPhone3 = bakPhone[i].value;
//                    if (bakPhone3 == "" || bakPhone3 == undefined) {
//                        showMessage("error", "其他号码3不能为空！", 1000);
//                        return false;
//                    }
                    if (bakPhone3 != "" && !(/^1[34578]\d{9}$/.test(bakPhone3))) {
                        showMessage("error", "其他号码3有误，请重填！", 1000);
                        return false;
                    }
                    break;
                default:
                    break;
            }
        }
        $.ajax({
            url: "/customer/addcustomer",
            data: {
                customerName: customerName,
                customerPhone: phone,
                customerSex: $("#customerSex").val(),
                actSource: $("#actSource").val(),
                buyIntention: $("#buyIntention").val(),
                traceStatus: $("#traceStatus").val(),
                bakPhone1: bakPhone1,
                bakPhone2: bakPhone2,
                bakPhone3: bakPhone3,
                remark: $("#remark").val()
            },
            type: "post",
            success: function (data) {
                if (data.result == "1") {
                    showMessage("success", "保存成功", 2000, "/customer/addcustomer");
                } else {
                    showMessage("error", data.msg, 1000);
                }
            }
        });
    }

    function checkPhone() {
        var phone = $("#customerPhone").val();
        if (!(/^1[34578]\d{9}$/.test(phone))) {
            showMessage("error", "手机号有误，请重填！", 1000);
            return false;
        }
        $.ajax({
            url: "/customer/checkcustomer",
            data: {
                customerPhone: phone
            },
            type: "post",
            success: function (data) {
                if (data.result == "0") {
                    $("#phoneError").text(data.msg);
                } else {
                    $("#phoneError").text("");
                }
            }
        });
    }
</script>
</body>

</html>
