<%@include file="/WEB-INF/common/layouts/common.jsp" %>
<%@ page language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <title>添加客户标签</title>
</head>
<body>
<style>
    .tag-item {
        height: 1rem;
        padding: 0 10px;
        border-radius: 3px;
        display: inline-block;
        line-height: 0.9rem;
        font-size: 0.6rem;
        border: 1px solid;
        box-sizing: border-box;
    }

    .tag-item.can_close:after {
        content: 'x';
        position: relative;
        left: 0.3rem;
        transform: scale(1.2, 0.9);
        display: inline-block;
    }

    .result-tag {
        min-height: 2rem;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .center {
        /* margin: 0 auto; */
        padding: 5px;
    }

    .all-tag .tag-item, .result-tag .tag-item {
        margin: 3px 4px;
    }

    .all-tag {
        min-height: 7rem;
    }

    .tag-label {
        color: #999;
        line-height: 2rem;
        margin-left: 15px;
    }

    .nothing {
        text-align: center;
        color: #888;
    }

    /* tag */

    .gray {
        color: #999;
        border-color: #999;
    }

    .red {
        color: #d9534f;
        border-color: #d9534f;
    }

    .orange {
        color: #f0ad4e;
        border-color: #f0ad4e;
    }

    .green {
        color: #5cb85c;
        border-color: #5cb85c;
    }

    .blue {
        color: #5bc0de;
        border-color: #5bc0de;
    }

    .darkblue {
        color: #0275d8;
        border-color: #0275d8;
    }

    .zi {
        color: #663399;
        border-color: #663399;
    }

    /* back */

    .gray.active {
        background-color: #999;
        border-color: transparent;
        color: white;
    }

    .red.active {
        background-color: #d9534f;
        border-color: transparent;
        color: white;
    }

    .orange.active {
        background-color: #f0ad4e;
        border-color: transparent;
        color: white;
    }

    .green.active {
        background-color: #5cb85c;
        border-color: transparent;
        color: white;
    }

    .blue.active {
        background-color: #5bc0de;
        border-color: transparent;
        color: white;
    }

    .darkblue.active {
        background-color: #0275d8;
        border-color: transparent;
        color: white;
    }

    .zi.active {
        background-color: #663399;
        border-color: transparent;
        color: white;
    }

    .btn.blues {
        margin-left: 400px;
    }

    .tag-item.active:before {
        content: '√';
        color: white;
    }

    .tag-item.active {
        vertical-align: top;
    }

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {
        display: inline-block;
    }

</style>

<house365:flushMessage/>
<form id="input_form" class="form-horizontal valid" action="${ctx}/labelmanager/saveCustomersLabels" method="post">
    <div class="row${fluid}">
        <div class="span12">

            <div class="form-horizontal house365Page">
                <div class="house365Border">
                    <!-- 片段头 begin -->
                    <div class="sectionTitle">
                        <h5>新增</h5>
                    </div>
                    <input id="customerIds" name="customerIds" type="hidden" value="${customerIds}"/>
                    <%--<input id="labelId" name="labelId" type="hidden" value=""/>--%>
                    <div class="clearfix">
                        <div class="controls" style="margin-left: 0px;min-width: 500px;float: left">
                            <%--<input id="singlelabel.id" name="singlelabel.id" type="hidden" value=""/>--%>
                            <select id="labelId" name="labelId" class="selectpicker show-tick form-control"
                                    multiple data-live-search="false">
                                <c:forEach items="${labellist}" var="singlelabel">
                                    <option value="${singlelabel.labelId}">${singlelabel.labelName}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="clearfix" style="float: left">
                            <%--<div class="house365Border">--%>
                            <a class="btn blues" style="float: left;margin-left: 20px;"
                               onclick="addCustomerLabel();">保存</a>
                            <%--</div>--%>
                            <a style="float: left;margin-left: 20px;" href="javascript:history.back(-1)"
                               class="btn blues">取消</a>
                            <%--</div>--%>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script src="${static_common}/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="${static_common }/script/jquery/bootstrap-select.min.js" type="text/javascript"></script>
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<script href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>
<script type="text/javascript">
    $(function () {

        //点击标签
        $('.all-tag').on('click', '.tag-item', function () {
            $('.all-tag .tag-item').removeClass('active');
            $(this).addClass('active');
        })

    });

    function addCustomerLabel() {
        var customerIds = $("#customerIds").val();
        var innerText = document.getElementsByClassName("filter-option pull-left")[0].innerText;
        if ("请选择" == innerText) {
            alert("请选择标签");
            return false;
        }

        var $form = $("#input_form");
        $.ajax({
            url: $form.attr("action"),
            type: "POST",
            data: $form.serialize(),
            success: function (data) {
                if (data == "success") {
//                    alert("添加成功");
                    window.location.href = document.referrer;
                } else {
                    alert("添加失败");
                }
            }
        })
    }
</script>

</body>
</html>
