<!DOCTYPE html>
<html 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 class="kehu-detail">
<style>
    .oldtag-item{
        margin: 3px 4px;
        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;
    }
    .oldtag-item.can_close:after {
        content: 'x';
        position: relative;
        left: 0.3rem;
        transform: scale(1.2, 0.9);
        display: inline-block;
    }

    </style>
<header>
    <div class="header">
        <a href="" class="btn-a-back"><i class="iconfont">&#xe61f;</i></a>
        <h2>编辑标签</h2>
    </div>
</header>
<form id="queryForm" action="/customer/saveCustomerLabel" th:action="@{/customer/saveCustomerLabel}" method="get">
<input type="hidden" id="noLabel" th:value="${noLabel}"/>
<input id="labelId" name="labelId" type="hidden" value=""/>
<input id="customerId" name="customerId" type="hidden" th:value="${customerId}"/>
<div class="weui-cells weui-cells_form mt0">
    <div class="result-tag">
        <label for="" class="tag-label">请选择标签</label>
        <div class="center" id="tag2">
            <span th:each="label: ${customerLabelList}" class="tag-item2" th:data="${label.colorId}" th:attr="dataIndex=${label.labelId}" th:content="${label.labelId}"><span th:text="${label.labelName}"></span></span>
        </div>
    </div>
    <div class="all-tag bor-t">
        <div for="" class="tag-label">所有标签</div>
        <div class="center" >
            <span th:each="label: ${labs}" class="all-tag-item gray" th:data="${label.colorId}" th:value="${label.selected}" th:attr="dataIndex=${label.labelId}"  th:content="${label.labelId}"><span th:text="${label.labelName}"></span></span>
        </div>
    </div>
    <div id="hiddenText" style="display: none;margin-left: 110px;margin-top: -100px;">暂无标签,请到标签管理中添加</div>
</div>
<div class="btn-modify">
    <a class="weui-btn weui-btn_blue" href="javascript:" id="showToast" onclick="saveCustomerLabel()">保存</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>
</form>
<script type="text/javascript" src="/static/js/wechat/zepto.min.js"></script>
<script type="text/javascript">
    $(function () {

        var noLabel = $("#noLabel").val();
        if(noLabel == "0"){
            var ui = document.getElementById("hiddenText");
            ui.style.display="block";
            var showToast = document.getElementById("showToast");
            showToast.style.display="none";
        }
        //所有标签
        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;
                var autoplay = tags[i].attributes.value.value;
                if(value == 1){
                    if(autoplay == 1){
                        tags[i].className = "all-tag-item gray active"
                    }else{
                        tags[i].className = "all-tag-item gray"
                    }
                }
                if(value == 2){
                    if(autoplay == 1){
                        tags[i].className = "all-tag-item red active"
                    }else{
                        tags[i].className = "all-tag-item red"
                    }
                }
                if(value == 3){
                    if(autoplay == 1){
                        tags[i].className = "all-tag-item orange active"
                    }else{
                        tags[i].className = "all-tag-item orange"
                    }
                }
                if(value == 4){
                    if(autoplay == 1){
                        tags[i].className = "all-tag-item green active"
                    }else{
                        tags[i].className = "all-tag-item green"
                    }
                }
                if(value == 5){
                    if(autoplay == 1){
                        tags[i].className = "all-tag-item darkblue active"
                    }else{
                        tags[i].className = "all-tag-item darkblue"
                    }
                }
                if(value == 6){
                    if(autoplay == 1){
                        tags[i].className = "all-tag-item darkblue active"
                    }else{
                        tags[i].className = "all-tag-item darkblue"
                    }
                }
                if(value == 7){
                    if(autoplay == 1){
                        tags[i].className = "all-tag-item zi active"
                    }else{
                        tags[i].className = "all-tag-item zi"
                    }
                }
                //

            }
        }
        //客户标签
        var oldtag = document.getElementsByClassName("tag-item2");
        if(oldtag != undefined && oldtag != ''){
            for(var i=0;i<oldtag.length;i++){
                var value = oldtag[i].attributes.data.value;
                if(value == 1){
                    oldtag[i].className = "tag-item2 can_close gray active"
                }
                if(value == 2){
                    oldtag[i].className = "tag-item2 can_close red active"
                }
                if(value == 3){
                    oldtag[i].className = "tag-item2 can_close orange active"
                }
                if(value == 4){
                    oldtag[i].className = "tag-item2 can_close green active"
                }
                if(value == 5){
                    oldtag[i].className = "tag-item2 blue active can_close"
                }
                if(value == 6){
                    oldtag[i].className = "tag-item2 darkblue active can_close"
                }
                if(value == 7){
                    oldtag[i].className = "tag-item2 zi active can_close"
                }
            }
        }

        //点击标签
//        $('.result-tag').on('click', '.oldtag-item',function() {
//            if($(this).hasClass('active')){
//                $(this).removeClass('active');
//                var index = $(this).data('index');
//                $('.result-tag .center .oldtag-item[data-index="' + index + '"]').remove();
//                if ($('.result-tag .oldtag-item').length == 0) {
//                    $('.result-tag label').show();
//                }
//            }else{
//                $(this).addClass('active');
//                var $html = $(this.outerHTML);
//                $('.result-tag label').hide();
//                $html.addClass('can_close');
//                $('.result-tag .center').append($html)
//            }
//        })
        //点击标签
        $('.all-tag').on('click', '.all-tag-item',function() {
            if($(this).hasClass('active')){
                $(this).removeClass('active');
                var index = $(this).attr("dataIndex");
                var tagitem = document.getElementsByClassName("tag-item2");
                if(tagitem != undefined && tagitem != '' && tagitem.length>0){
                    for(var i=0;i<tagitem.length;i++){
                        var value = oldtag[i].attributes.dataIndex.value;
                        if(value == index){
                            var obj = document.getElementsByClassName("tag-item2")[i];
                            var tag2=document.getElementById("tag2")
                            tag2.removeChild(obj)
                        }
                    }
                }
                $('.result-tag .center .all-tag-item[dataIndex="' + index + '"]').remove();
                if (($('.result-tag .all-tag-item').length == 0) && ($('.result-tag .tag-item2').length == 0)) {
                    $('.result-tag label').show();
                }
            }else{
                $(this).addClass('active');
                var addFlag=0;
                var index = $(this).attr("dataIndex");
                var tagitem = document.getElementsByClassName("tag-item2");
                if(tagitem != undefined && tagitem != '' && tagitem.length>0){
                    for(var i=0;i<tagitem.length;i++){
                        var value = oldtag[i].attributes.dataIndex.value;
                        if(value == index){
                            document.getElementsByClassName("tag-item2")[i].classList.add("active")
                            addFlag++
                        }
                    }
                }
                if(addFlag == 0){
                    var $html = $(this.outerHTML);
                    $('.result-tag label').hide();
                    $html.addClass('can_close');
                    $('.result-tag .center').append($html)
                }
            }
        })
        $('.result-tag').on('click', '.all-tag-item',function() {
            var index = $(this).attr("dataIndex");
//            console.log($(this).attr("dataIndex"));
//            console.log($('.all-tag .center .tag-item'));
            $('.all-tag .center .all-tag-item[dataIndex="' + index + '"]').removeClass('active');
            $(this).remove();
            if (($('.result-tag .all-tag-item').length == 0) && ($('.result-tag .tag-item2').length == 0)) {
                $('.result-tag label').show();
            }
        })

        $('.result-tag').on('click', '.tag-item2',function() {
            var index = $(this).attr("dataIndex");
            $('.all-tag .center .tag-item2[data-index="' + index + '"]').removeClass('active');
            $(this).remove();

            //同步选中标签样式
            var tagitem = document.getElementsByClassName("all-tag-item");
            if(tagitem != undefined && tagitem != '' && tagitem.length>0){
                for(var i=0;i<tagitem.length;i++){
                    var value = tagitem[i].attributes.dataIndex.value;
                    if(value == index){
                        document.getElementsByClassName("all-tag-item")[i].classList.remove("active")
                    }
                }
            }

            if (($('.result-tag .all-tag-item').length == 0) && ($('.result-tag .tag-item2').length == 0)) {
                $('.result-tag label').show();
            }
        })
        if ($('.result-tag .tag-item2').length > 0) {
            $('.result-tag label').hide();
        }
    });

    function saveCustomerLabel(){
//        var selectedObj = document.getElementsByClassName("active");
        var selectedObj = $('.result-tag .center .tag-item2');
        var selectedObj2 = $('.result-tag .center .all-tag-item');
        var labelId = '';
        console.log(selectedObj.length);
//        if((selectedObj == undefined || selectedObj == '' || selectedObj.length==0) && (selectedObj2 == undefined || selectedObj2 == '' || selectedObj2.length==0)){
//            alert("请选择标签");
//            return false;
//        }else{
            for(var i=0;i<selectedObj.length;i++){
                var labId = selectedObj[i].attributes.content.value;
                labelId +=labId + ",";
            }
            for(var i=0;i<selectedObj2.length;i++){
                var labId = selectedObj2[i].attributes.content.value;
                labelId +=labId + ",";
            }
//        }
        labelId = labelId.substr(0,labelId.length-1);
        $("#labelId").val(labelId);
//        $("#queryForm").submit();
        var $form = $("#queryForm");
        $.ajax({
            url: $form.attr("action"),
            type: "get",
            data: $form.serialize(),
            success: function (data) {
                if (data == "1") {
                    alert("编辑成功");
//                    window.history.go(-1);
                    window.location.href=document.referrer;
                } else {
                    alert("编辑失败");
                }
            }
        })
    }
</script>
</body>

</html>