<%@include file="/WEB-INF/common/layouts/common.jsp" %>
<%@ page language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <title>${entity.id}</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;
    }
</style>
<%--<form id="input_form" class="form-horizontal valid" action="${ctx}/labelManager/addLabel" method="POST">--%>
    <%--<input type="hidden" id="limitLogin" name="limitLogin" value="" />--%>
    <!-- 面包屑 begin -->

    <!-- 面包屑 end -->
    <house365:flushMessage/>
    <div class="row${fluid}">
        <div class="span12">

            <%--</c:if> --%>
            <%-- </shiro:hasPermission> --%>
            <div class="form-horizontal house365Page">
                <div class="house365Border">
                    <!-- 片段头 begin -->
                    <div class="sectionTitle">
                        <h5>新增</h5>
                    </div>
                    <input id="colorId" name="colorId" type="hidden" value=""/>
                    <%--<input id="labName" name="labName" type="hidden" value=""/>--%>
                    <div class="row-fluid">
                        <c:choose>
                            <c:when test="${action=='create'}">
                                <div class="span6 control-group">
                                    <label class="control-label">标签名称<font style="color: red;">*</font>:</label>
                                    <div class="controls">
                                        <input type="text" id="labelName"
                                               name="labelName" class="required" maxlength="4" value=""/>
                                    </div>
                                </div>
                            </c:when>
                        </c:choose>
                    </div>
                    <div class="row-fluid">
                        <div class="span6 control-group">
                            <label class="control-label">标签颜色<font style="color: red;">*</font>:</label>
                            <div class="controls all-tag bor-t">
                                <span class="tag-item gray active" style="background:#999" data-index="1">1</span>
                                <span class="tag-item red" style="background:#d9534f" data-index="2">2</span>
                                <span class="tag-item orange" style="background:#f0ad4e" data-index="3">3</span>
                                <span class="tag-item green" style="background:#5cb85c" data-index="4">4</span>
                                <span class="tag-item blue" style="background:#5bc0de" data-index="5">5</span>
                                <span class="tag-item darkblue" style="background:#0275d8" data-index="6">6</span>
                                <span class="tag-item zi" style="background:#663399" data-index="7">7</span>
                            </div>
                        </div>
                    </div>

                    <div class="row-fluid">
                        <a href="javascript:history.back(-1)" class="btn gray"><i
                                class="icon-mail-reply"></i>&nbsp;取消</a>
                        <a class="btn blues" onclick="addLabel();">保存</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
<%--</form>--%>

<script type="text/javascript">
    $(function () {

        // 保存成功提示
//        var $toast = $('#toast');
//        $('#showToast').on('click', function () {
//            if ($toast.css('display') != 'none') return;
//
//            $toast.fadeIn(100);
//            setTimeout(function () {
//                $toast.fadeOut(100);
//            }, 2000);
//        });
        //点击标签
        $('.all-tag').on('click', '.tag-item',function() {
                $('.all-tag .tag-item').removeClass('active')
            $(this).addClass('active');
        })
//        $('.result-tag').on('click', '.tag-item',function() {
//            var index = $(this).data('index');
//            $('.all-tag .center .tag-item[data-index="' + index + '"]').removeClass('active');
//            $(this).remove();
//            if ($('.result-tag .tag-item').length == 0) {
//                $('.result-tag label').show();
//            }
//        })
    });

    function addLabel() {
        var labelName = $("#labelName").val();
        if(labelName ==''){
            alert("标签名称不能为空");
            return false;
        }
        labelName = labelName.replace(/\s*/g,"");
        if(labelName ==''){
            alert("标签名称不能为空");
            return false;
        }
        if(labelName.length>4){
            alert("标签名称最多4个字");
            return false;
        }


//        var colorId = $("#colorId").val();
//        var index = $('.all-tag').data('index');
        var colorId = document.getElementsByClassName("active")[0].innerText;
        $("#colorId").val(colorId);
        $("#labName").val(labelName);
//        $("#input_form").submit();
        $.ajax({
            url: '${ctx}/labelmanager/addLabel',
            contentType: "application/x-www-form-urlencoded:charset=UTF-8",
            data: {'labelName': labelName, "colorId": colorId},
            type: "GET",
            success: function (data) {
                if(data == "success"){
                    alert("添加成功");
                    window.location.href ="${ctx}/labelmanager";
                }else{
                    alert("添加失败");
                    return false;
                }
            }
        });
    }
</script>

</body>
</html>
