(function () {
    function getTabsHtml() {
        var tabnames = $.trim($("#tabsNames").val());
        if (!tabnames.length) return "";
        var htmls = [], navs = [], panels = [];
        htmls.push('<div class="ui-tabs');
        if ($("#style2").prop("checked")) {
            htmls.push(" noborder");
        } else if ($("#style3").prop("checked")) {
            htmls.push(" simple");
        }
        htmls.push('"><ul class="ui-tabs-nav ui-helper-clearfix">');
        var eid, items = tabnames.split(/[,，;；]/);
        items.forEach((v, i) => {
            v = $.trim(v);
            if (v) {
                eid = "tab_" + randomString(5).toLowerCase();
                navs.push('<li><a href="#' + eid + '">' + v + '</a></li>');
                panels.push('<div class="tab" id="' + eid + '">' + v + ' - 内容区</div>');
            }
        });
        if (!navs.length) return "";
        htmls.push(navs.join(''));
        htmls.push('</ul>');
        htmls.push(panels.join(''));
        htmls.push('</div>');
        return htmls.join('');
    }
    CKEDITOR.dialog.add("tabs",
        function (a) {
            return {
                title: "插入标签页组件",
                minWidth: 316,
                minHeight: 135,
                contents: [{
                    id: "tabs_define",
                    expand: true,
                    padding: 0,
                    elements: [{
                        type: "html",
                        html: '<div style="padding-top:1em;margin-bottom:4px">输入标签名称，以逗号分隔：</div>\n\
                        <input type="text" id="tabsNames" title="输入各个标签的名称，以逗号或分号分隔" style="width:306px" />\n\
                        <div class="mtop_n">显示样式：<div style="margin:4px 0;padding-top:4px;border-top:1px #ddd solid"><input type="radio" name="style" id="style1" value="default" checked="checked" /><label for="style1">默认</label>\n\
                        <input type="radio" name="style" id="style2" value="noborder" /><label for="style2">无边框</label>\n\
                        <input type="radio" name="style" id="style3" value="simple" /><label for="style3">简洁</label></div></div>'
                    }]
                }],
                onShow: function () {
                    setTimeout(function () {
                        $("#tabsNames").val("").focus();
                    }, 0);
                },
                onOk: function () {
                    var html = getTabsHtml();
                    if (!html.length) return showAndExit("请输入至少一个标签名称！");
                    a.insertHtml(html);
                }
            }
        })
})();