<!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>
<style>
    .weui-cell__ft33:after {
        content: " ";
        display: inline-block;
        height: 6px;
        width: 6px;
        border-width: 2px 2px 0 0;
        border-color: #c8c8cd;
        border-style: solid;
        -webkit-transform: matrix(.71, .71, -.71, .71, 0, 0);
        transform: matrix(.71, .71, -.71, .71, 0, 0);
        position: relative;
        top: -2px;
        position: absolute;
        top: 50%;
        margin-top: -4px;
        right: 15px;
    }
</style>
<header>
    <div class="header">
        <a href="javascript:backToUrl()" class="btn-a-back"><i class="iconfont">&#xe61f;</i></a>
        <h2>客户编辑</h2>
    </div>
</header>
<input type="hidden" id="customerId" th:value="${customer.id}"/>
<input type="hidden" id="noLabel" th:value="${noLabel}"/>
<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>
    <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>

    <div class="weui-cell weui-a-more" th:if="${customer.bakPhone1} eq ''">
        <a href="javascript:addBakPhone()">添加更多号码</a>
    </div>

    <div class="weui-cells weui-cells_form mt0">
        <div class="result-tag">
            <label for="" class="tag-label">标签</label>
        </div>
        <div class="center">
            <c:if test="${1 eq lid.colorId}">
                <span th:each="label: ${labs}" style="margin-right:2px;margin-bottom:2px" 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>
            <!--<div class="weui-cell__bd">-->
            <!--</div>-->
        </div>
        <div class="weui-cell__ft33" th:onclick="'goToUrl(\'' + @{/customer/editCustomerLabel(customerId=${customer.id}, noLabel=${noLabel})} + '\')'">
        </div>

        <div id="hiddenText" style="display: none">暂无标签</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>

</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 () {
        var noLabel = $("#noLabel").val();
        if(noLabel == "0"){
            var ui = document.getElementById("hiddenText");
            ui.style.display="block";
        }
        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"
                }
            }
        }

        // 其他号码删除
        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");
            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>
