{extend name="$_admin_base_layout" /}

{block name="content"}


<style>
    .form-item dl dt {
        width: 120px;
    }
    .form-item dl dd {
        margin-left: 120px;
    }
    .form-item dl dd  input {
        font-size:12px;
    }
</style>
<div class="panel panel-default panel-intro">

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div class="weixin-menu-setting clearfix">
                        <div class="mobile-menu-preview">
                            <div class="mobile-head-title">{$info['nick_name']}</div>
                            <ul class="menu-list" id="menu-list">
                                <li class="add-item extra" id="add-item">
                                    <a href="javascript:;" class="menu-link" title="添加菜单"><i class="weixin-icon add-gray"></i></a>
                                </li>
                            </ul>
                        </div>
                        <div class="weixin-body">
                            <div class="weixin-content" style="display:none">
                                <div class="item-info">
                                    <form id="form-item" class="form-item" data-value="" >
                                        <div class="item-head">
                                            <h4 id="current-item-name">添加子菜单</h4>
                                            <div class="item-delete"><a href="javascript:;" id="item_delete">删除菜单</a></div>
                                        </div>
                                        <div style="margin-top: 20px;">
                                            <dl>
                                                <dt id="current-item-option"><span class="is-sub-item">子</span>菜单标题：</dt>
                                                <dd><div class="input-box"><input id="item_title" name="item-title" type="text" value=""></div></dd>
                                            </dl>
                                            <dl class="is-item">
                                                <dt id="current-item-type"><span class="is-sub-item">子</span>菜单内容：</dt>
                                                <dd>
                                                    <input id="type1" type="radio" name="type" value="click"><label for="type1" data-editing="1"><span class="lbl_content">发送消息</span></label>
                                                    <input id="type2" type="radio" name="type" value="view" ><label for="type2"  data-editing="1"><span class="lbl_content">跳转网页</span></label>
                                                    </dd>
                                            </dl>
                                            <div id="menu-content" class="is-item">
                                                <div class="viewbox is-view">
                                                    <p class="menu-content-tips">点击该菜单会跳到以下链接  <a href="javascript:urllistshow();">选择常用链接</a></p> 
                                                    <dl>
                                                        <dt>页面地址：</dt>
                                                        <dd><div class="input-box"><input type="text" id="url" name="url"></div>
                                                        </dd>
                                                    </dl>
                                                  	{$url_list|raw}
                                                  
                                                </div>
                                                <div class="clickbox is-click" style="display: none;">
                                                    <input type="hidden" name="key" id="key" value="" />
                                                    <span class="create-click"><a href="{:url('cdms/wechat/fodder_choose')}?_pop=1" class="pop" id="select-resources"><i class="weixin-icon big-add-gray"></i><strong>选择现有资源</strong></a></span>
                                                    <span class="create-click"><a href="{:url('cdms/wechat/fodder')}?_pop=1" class="pop"  id="add-resources"><i class="weixin-icon big-add-gray"></i><strong>添加新资源</strong></a></span>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                            </div>
                            <div class="no-weixin-content">
                                点击左侧菜单进行编辑操作
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-4 text-left text-danger">
                            <i class="fa fa-lightbulb-o"></i> <small>可直接拖动菜单排序</small>
                        </div>
                        <div class="col-xs-8 text-center"><a href="javascript:;" id="menuSyn" class="btn btn-danger">保存并发布</a></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


{/block}

{block name="style"}
{notempty name="_editormd"}
<link href="__LIBS__/editormd/css/editormd.min.css?v={:config('asset_version')}" rel="stylesheet" type="text/css" />
{/notempty}

{volist name="css_list" id="vo"}
<link rel="stylesheet" href="{$vo}?v={:config('asset_version')}">
{/volist}

<style>
    .btn_default {
        background-color: #fff;
        background-image: -moz-linear-gradient(top, #fff 0, #fff 100%);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#fff));
        background-image: -webkit-linear-gradient(top, #fff 0, #fff 100%);
        background-image: -o-linear-gradient(top, #fff 0, #fff 100%);
        background-image: linear-gradient(to bottom, #fff 0, #fff 100%);
        border-color: #e7e7eb;
        color: #222;
    }

    .mobile_preview_closed {
        position: absolute;
        left: 112px;
    }

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: alpha(opacity=75);
        -moz-opacity: .75;
        -khtml-opacity: .75;
        opacity: .75;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9998;
    }
    .mobile_preview .pre_menu_list{
        padding:0;
    }
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: alpha(opacity=75);
        -moz-opacity: .75;
        -khtml-opacity: .75;
        opacity: .75;
        background-color: #000;
        z-index: 9998;
    }
</style>

{volist name="extend_css_list" id="vo"}
{volist name="vo" id="v"}
<link rel="stylesheet" href="{$v}?v={:config('asset_version')}">
{/volist}
{/volist}

{// 额外CSS代码 }
{$extra_css|raw|default=''}
{/block}

{block name="script"}
{notempty name="_ueditor"}
<script src="__LIBS__/ueditor/ueditor.config.js?v={:config('asset_version')}"></script>
<script src="__LIBS__/ueditor/ueditor.all.min.js?v={:config('asset_version')}"></script>
{/notempty}

{notempty name="_ckeditor"}
<script src="__LIBS__/ckeditor/ckeditor.js?v={:config('asset_version')}"></script>
{/notempty}


{// 额外JS代码 }
{volist name="js_list" id="vo"}
<script src="{$vo}?v={:config('asset_version')}"></script>
{/volist}
{$extra_js|raw|default=''}
<script>var post_url='{$post_diy_create}';</script>
<script>


    String.prototype.subByte = function (start, bytes) {
        for (var i = start; bytes > 0; i++) {
            var code = this.charCodeAt(i);
            bytes -= code < 256 ? 1 : 2;
        }
        return this.slice(start, i + bytes)
    };
    var init_menu = function (menu) {
        var str = "";
        var items = menu;
        var type = action = "";
        for (i in items) {
            if (items[i]['sub_button'] != undefined) {
                type = action = "";
            } else {
                type = items[i]['type'];
                if (items[i]['url'] != undefined)
                    action = "url|" + items[i]['url'];
                if (items[i]['key'] != undefined)
                    action = "key|" + items[i]['key'];
            }
            str += '<li id="menu-' + i + '" class="menu-item" data-type="' + type + '" data-action="' + action + '" data-name="' + items[i]['name'] + '"> <a href="javascript:;" class="menu-link"> <i class="icon-menu-dot"></i> <i class="weixin-icon sort-gray"></i> <span class="title">' + items[i]['name'] + '</span> </a>';
            var tem = '';
            if (items[i]['sub_button'] != undefined) {
                var sub_menu = items[i]['sub_button'];
                for (j in sub_menu) {
                    type = sub_menu[j]['type'];
                    if (sub_menu[j]['url'] != undefined)
                        action = "url|" + sub_menu[j]['url'];
                    if (sub_menu[j]['key'] != undefined)
                        action = "key|" + sub_menu[j]['key'];
                    tem += '<li id="sub-menu-' + j + '" class="sub-menu-item" data-type="' + type + '" data-action="' + action + '" data-name="' + sub_menu[j]['name'] + '"> <a href="javascript:;"> <i class="weixin-icon sort-gray"></i><span class="sub-title">' + sub_menu[j]['name'] + '</span></a> </li>';
                }
            }
            str += '<div class="sub-menu-box" style="' + (i != 0 ? 'display:none;' : '') + '"> <ul class="sub-menu-list">' + tem + '<li class=" add-sub-item"><a href="javascript:;" title="添加子菜单"><span class=" "><i class="weixin-icon add-gray"></i></span></a></li> </ul> <i class="arrow arrow-out"></i> <i class="arrow arrow-in"></i></div>';
            str += '</li>';
        }
        $("#add-item").before(str);
    };
    var refresh_type = function () {
        if ($('input[name=type]:checked').val() == 'view') {
            $(".is-view").show();
            $(".is-click").hide();
        } else {
            $(".is-view").hide();
            $(".is-click").show();
        }
    };
    //初始化菜单
    init_menu(menu);
    //拖动排序
    new Sortable($("#menu-list")[0], {draggable: 'li.menu-item',cursor: "move", animation:100});
    $(".sub-menu-list").each(function () {
        new Sortable(this, {draggable: 'li.sub-menu-item',cursor: "move", animation:100});
    });
    //添加主菜单
    $(document).on('click', '#add-item', function () {
        var menu_item_total = $(".menu-item").size();
        if (menu_item_total < 3) {
            var item = '<li class="menu-item" data-type="click" data-action="key|" data-name="添加菜单" > <a href="javascript:;" class="menu-link"> <i class="icon-menu-dot"></i> <i class="weixin-icon sort-gray"></i> <span class="title">添加菜单</span> </a> <div class="sub-menu-box" style=""> <ul class="sub-menu-list"><li class=" add-sub-item"><a href="javascript:;" title="添加子菜单"><span class=" "><i class="weixin-icon add-gray"></i></span></a></li> </ul> <i class="arrow arrow-out"></i> <i class="arrow arrow-in"></i> </div></li>';
            var itemDom = $(item);
            itemDom.insertBefore(this);
            itemDom.trigger("click");
            $(".sub-menu-box", itemDom).show();
            new Sortable($(".sub-menu-list", itemDom)[0], {draggable: 'li.sub-menu-item'});
        }
    });
    $(document).on('change', 'input[name=type]', function () {
        refresh_type();
    });
    $(document).on('click', '#item_delete', function () {
        var current = $("#menu-list li.current");
        var prev = current.prev("li[data-type]");
        var next = current.next("li[data-type]");

        if (prev.size() == 0 && next.size() == 0 && $(".sub-menu-box", current).size() == 0) {
            last = current.closest(".menu-item");
        } else if (prev.size() > 0 || next.size() > 0) {
            last = prev.size() > 0 ? prev : next;
        } else {
            last = null;
            $(".weixin-content").hide();
            $(".no-weixin-content").show();
        }
        $("#menu-list li.current").remove();
        if (last) {
            last.trigger('click');
        } else {
            $("input[name='item-title']").val('');
        }
        updateChangeMenu();
    });

    //更新修改与变动
    var updateChangeMenu = function () {
        var title = $("input[name='item-title']").val();
        var type = $("input[name='type']:checked").val();
        var key = value = '';
        if (type == 'view') {
            key = 'url';
        } else {
            key = 'key';
        }
        value = $("input[name='" + key + "']").val();

        if (key == 'key') {
            var keytitle = typeof responselist[value] != 'undefined' ? responselist[value] : '';
            var cont = $(".is-click .create-click:first");
            $(".keytitle", cont).remove();
            cont.append('<div class="keytitle">资源名:' + keytitle + '</div>');
        }
        var currentItem = $("#menu-list li.current");
        if (currentItem.size() > 0) {
            currentItem.attr('data-type', type);
            currentItem.attr('data-action', key + "|" + value);
            if (currentItem.siblings().size() == 4) {
                $(".add-sub-item").show();
            } else if (false) {

            }
            currentItem.children("a").find("span").text(title.subByte(0, 16));
            $("input[name='item-title']").val(title);
            currentItem.attr('data-name', title);
            $('#current-item-name').text(title);
        }
    }
    //获取菜单数据
    var getMenuList = function () {
        var menus = new Array();
        var sub_button = new Array();
        var menu_i = 0;
        var sub_menu_i = 0;
        var item;
        $("#menu-list li").each(function (i) {
            item = $(this);
            var name = item.attr('data-name');
            var type = item.attr('data-type');
            var action = item.attr('data-action');
            if (name != null) {
                actions = action.split('|');
                if (item.hasClass('menu-item')) {
                    sub_menu_i = 0;
                    if (item.find('.sub-menu-item').size() > 0) {
                        menus[menu_i] = {"name": name, "sub_button": "sub_button"}
                    } else {
                        if (actions[0] == 'url')
                            menus[menu_i] = {"name": name, "type": type, "url": actions[1]};
                        else
                            menus[menu_i] = {"name": name, "type": type, "key": actions[1]};
                    }
                    if (menu_i > 0) {
                        if (menus[menu_i - 1]['sub_button'] == "sub_button")
                            menus[menu_i - 1]['sub_button'] = sub_button;
                        else
                            menus[menu_i - 1]['sub_button'];
                    }
                    sub_button = new Array();
                    menu_i++;
                } else {
                    if (actions[0] == 'url')
                        sub_button[sub_menu_i++] = {"name": name, "type": type, "url": actions[1]};
                    else
                        sub_button[sub_menu_i++] = {"name": name, "type": type, "key": actions[1]};
                }
            }
        });
        if (sub_button.length > 0) {
            var len = menus.length;
            menus[len - 1]['sub_button'] = sub_button;
        }
        return menus;
    }
    //添加子菜单
    $(document).on('click', ".add-sub-item", function () {
        var sub_menu_item_total = $(this).parent().find(".sub-menu-item").size();
        if (sub_menu_item_total < 5) {
            var item = '<li class="sub-menu-item" data-type="click" data-action="key|" data-name="添加子菜单"><a href="javascript:;"><span class=" "><i class="weixin-icon sort-gray"></i><span class="sub-title">添加子菜单</span></span></a></li>';
            var itemDom = $(item);
            itemDom.insertBefore(this);
            itemDom.trigger("click");
            if (sub_menu_item_total == 4) {
                $(this).hide();
            }
        }
        return false;
    });
    //主菜单子菜单点击事件
    $(document).on('click', ".menu-item, .sub-menu-item", function () {
        if ($(this).hasClass("sub-menu-item")) {
            $("#menu-list li").removeClass('current');
            $(".is-item").show();
            $(".is-sub-item").show();
        } else {
            $("#menu-list li").removeClass('current');
            $("#menu-list > li").not(this).find(".sub-menu-box").hide();
            $(".sub-menu-box", this).toggle();
            //如果当前还没有子菜单
            if ($(".sub-menu-item", this).size() == 0) {
                $(".is-item").show();
                $(".is-sub-item").show();
            } else {
                $(".is-item").hide();
                $(".is-sub-item").hide();
            }
        }
        $(this).addClass('current');
        var type = $(this).attr('data-type');
        var action = $(this).attr('data-action');
        var title = $(this).attr('data-name');

        actions = action.split('|');
        $("input[name=type][value='" + type + "']").prop("checked", true);
        $("input[name='item-title']").val(title);
        $('#current-item-name').text(title);
        if (actions[0] == 'url') {
            $('input[name=key]').val('');
        } else {
            $('input[name=url]').val('');
        }
        $("input[name='" + actions[0] + "']").val(actions[1]);
        if (actions[0] == 'key') {
            var keytitle = typeof responselist[actions[1]] != 'undefined' ? responselist[actions[1]] : '';
            var cont = $(".is-click .create-click:first");
            $(".keytitle", cont).remove();
            if (keytitle) {
                cont.append('<div class="keytitle">资源名:' + keytitle + '</div>');
            }
        } else {

        }

        $(".weixin-content").show();
        $(".no-weixin-content").hide();

        refresh_type();

        return false;
    });
    $("form").on('change', "input,textarea", function () {
        updateChangeMenu();
    });
    $(document).on('click', "#menuSyn", function () {
        //$("input[name='keys']").val("5da7d3d7c1468");
        menu_list = JSON.stringify(getMenuList());
        // 发送ajax请求
        jQuery.post(post_url, {menu:menu_list}, {}, 'json').success(function(res) {
            msg = res.msg;
            if (res.code) {

                Strawberry.notify(msg, 'success');
                setTimeout(function () {
                    location.reload();
                }, 1500);
            } else {
                jQuery(".reload-verify").length > 0 && jQuery(".reload-verify").click();
                Strawberry.notify(msg, 'danger');
                setTimeout(function () {
                    location.reload();
                }, 2000);
            }
        }).fail(function (res) {
            Strawberry.notify('服务器内部错误~', 'danger');
        });

    });
function urllistchenge(url){
  $("#url").val(url);
  updateChangeMenu();
}
function urllistshow(){
$("#builder-table").show();
}


</script>


{volist name="extend_js_list" id="vo"}
{volist name="vo" id="v"}
<script src="{$v}?v={:config('asset_version')}"></script>
{/volist}
{/volist}

{/block}