<style>
    .layui-form-pane .layui-form-label { width: 110px; padding: 8px 15px; height: 38px; line-height: 20px; border-width: 0px; border-style: solid; border-radius: 2px 0 0 2px; text-align: center; background-color: #fff; overflow: hidden; box-sizing: border-box; }
</style>
<script type="text/html" template lay-done="layui.data.done(d);">
    <div class="layui-form coreshop-form layui-form-pane" lay-filter="LAY-app-CoreCmsLabel-createForm" id="LAY-app-CoreCmsLabel-createForm">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>已选标签</legend>
        </fieldset>
        <div class="layui-form">
            <div class="layui-form-item" id="select_label">
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>选择标签</legend>
        </fieldset>
        <div class="layui-form">
            <input type="hidden" name="ids" value="{{d.params.data.ids.id}}">
            <div class="layui-form-item" id="default_item">
                {{# layui.each(d.params.data.labels, function(index, item){ }}
                <div class="layui-inline"><label class="layui-form-label"><span class="layui-badge layui-bg-{{item.style}}" data-value="{{ item.name }}" data-style="{{ item.style }}">{{ item.name }}</span></label></div>
                {{# }); }}
                {{#  if(d.params.data.labels.length<=0){ }}
                <div class="layui-inline"><label class="layui-form-label"><span class="layui-badge" data-value="热卖" data-style="red">热卖</span></label></div>
                <div class="layui-inline"><label class="layui-form-label"><span class="layui-badge layui-bg-green" data-value="新品" data-style="green">新品</span></label></div>
                <div class="layui-inline"><label class="layui-form-label"><span class="layui-badge layui-bg-orange" data-value="推荐" data-style="orange">推荐</span></label></div>
                <div class="layui-inline"><label class="layui-form-label"><span class="layui-badge layui-bg-blue" data-value="促销" data-style="blue">促销</span></label></div>                {{#  }  }}
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">标签名称：</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="label_name" lay-verify="verifyname" style="width:200px;" placeholder="请输入标签名称" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <select name="style" id="style">
                        <option value="">请选择颜色</option>
                        <option value="red" selected="">红色</option>
                        <option value="green">绿色</option>
                        <option value="orange">橙色</option>
                        <option value="blue">蓝色</option>
                    </select>
                </div>
                <div class="layui-input-inline text-center" style="width: 40px;">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" id="add_label" style="height: 37px;line-height: 37px;">确定</button>
                </div>
            </div>
        </div>

        <div class="layui-form-item core-hidden">
            <input type="button" class="layui-btn" lay-submit lay-filter="LAY-app-CoreCmsLabel-createForm-submit" id="LAY-app-CoreCmsLabel-createForm-submit" value="确认设置">
        </div>
    </div>
</script>
<script>
    var selected = new Array;
    var debug = layui.setter.debug;
    layui.data.done = function (d) {
        //开启调试情况下获取接口赋值数据
        if (debug) { console.log(d.params.data); }
        layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper'],
            function () {
                var $ = layui.$
                    , form = layui.form
                    , admin = layui.admin
                    , laydate = layui.laydate
                    , upload = layui.upload
                    , coreHelper = layui.coreHelper;

                form.verify({
                    verifyname: [/^[\S]{0,4}$/, '标签名称最大只允许输入4位字符，且不能出现空格'],
                });

                //todo 默认选中
                $("#default_item span").click(function () {
                    var label_text = $(this).attr("data-value");
                    var label_style = $(this).attr("data-style");
                    appendLabel(label_text, label_style);
                });
                $("#add_label").click(function () {
                    var label_text = $("#label_name").val();
                    if (label_text) {
                        var label_style = $("#style").val();
                        appendLabel(label_text, label_style);
                    } else {
                        layer.msg('标签名称不能为空');
                        return false;
                    }

                });
                //删除标签
                $(".layui-layer-content").on('click', '.layui-unselect', function () {
                    var label = $(this).parent().parent();
                    var label_text = label.attr('data-text');
                    if (selected.length > 0) {
                        $.each(selected, function (i, j) {
                            if (selected[i]) {
                                if (j.text == label_text) {
                                    selected.splice(i, 1);
                                    label.remove();
                                }
                            }
                        });
                    }
                });
                //追加标签
                function appendLabel(label_text, label_style) {
                    var current = { 'text': label_text, 'style': label_style };
                    var isAppend = true;
                    $.each(selected, function (i, j) {
                        if (j.text == label_text) {
                            layer.msg(label_text + '标签已存在');
                            isAppend = false;
                            return false;
                        }
                    });
                    if (isAppend) {
                        selected.push(current);
                        switch (label_style) {
                            case 'red':
                                label_style = "";
                                break;
                            case 'green':
                                label_style = "layui-bg-green";
                                break;
                            case 'orange':
                                label_style = "layui-bg-orange";
                                break;
                            case 'blue':
                                label_style = "layui-bg-blue";
                                break;
                            default:
                                label_style = '';
                        }
                        var html = '<div class="layui-inline" data-text="' + label_text + '"><label class="layui-form-label"><span class="layui-badge ' + label_style + '" >' + label_text + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i></label></div>';
                        $("#select_label").append(html);
                    }
                }

                //重载form
                form.render(null, 'LAY-app-CoreCmsLabel-createForm');
            })
    };
    function getSelected() {
        if (selected <= 0) {
            layer.msg("请先选择标签");
            return false;
        }
        return selected;
    }
</script>