<?xml version="1.0" encoding="UTF-8"?>
<h:screen xmlns:h="http://www.hand-china.com/hap">
    <link href="${base.contextPath}/resources/css/WECHAT/wechatMenu.css" rel="stylesheet" type="text/css"/>

    <script id="scriptA"><![CDATA[
    var wechatAccountId = ${RequestParameters.wechatId!-1};

    /*发布菜单*/
    function pushMenus() {
        $.ajax({
            type: "GET",
            async: false,
            url: "${base.contextPath}/wechat/menu/publish?wechatAccountId=" + wechatAccountId,
            contentType: "application/json; charset=utf-8",
            success: function () {
                kendo.ui.showInfoDialog({
                    title: $l('提示'),
                    message: "发布成功"
                });
            }
        })
    }
    /*数据源   */
    var datas;
    var dataSourceCloned;
    function refresh() {
        $.ajax({
            type: "GET",
            async: false,
            url: "${base.contextPath}/wechat/menu/query?wechatAccountId=" + wechatAccountId,
            contentType: "application/json; charset=utf-8",
            success: function (res) {
                datas = res.rows || [];
            }
        });
        /*复制数据源用于编辑时预览*/
        dataSourceCloned = $.extend(true, [], datas);
    }
    refresh();

    /*
     datas = [{buttonId: 1, name: "test con", sub_button: [{buttonId: 2, name: "a"}, {buttonId: 3, name: "b"}]}];
     */


    var title;
    title = "${RequestParameters.title!}";
    $(document).ready(function () {
        makeList();
        makePreview(datas);

    });
    /*生成左侧菜单*/
    function makeList() {
        var leftPart = document.getElementById("left-part");
        var html = '<ul class="apiApp_menu_showList js_main_menuList">';
        /*遍历数据源生成左侧菜单*/
        var count = 0;
        if (datas.length > 0) {
            datas.forEach(function (val, index, array) {
                var num = index + 1;
                var children = val.childMenus || [];
                html += '<li class="apiApp_menu_showItem menuCount" data-id=""><dl class="apiApp_menu_showItem_cnt"> <dt class="apiApp_menu_showItem_cnt_title">菜单' + num
                    + '</dt> <dd class="apiApp_menu_showItem_cnt_menuName apiApp_menu_showItem_cnt_menuName_First">' + val.name + '</dd>'
                children.forEach(function (childVal, childIndex, childArray) {
                    html += '<dd class="apiApp_menu_showItem_cnt_menuName">' + childVal.name + '</dd>'
                });
                html += '<a href="javascript:;" class="apiApp_menu_showItem_cnt_editBtn js_enter_menuEdit" > <span class="ww_icon ww_icon_Edit" onclick="openEdit(' + index + ')"></span> </a> </dl> </li>'
                count++;
            });
            if (count != 3) {
                html += '<li class="apiApp_menu_showItem apiApp_menu_showItem_AddMenu"> <a href="javascript:;" onclick="openEdit(' + count + ')" class="js_enter_menuEdit">添加主菜单</a></li>   '
            }
            html += '<li class="apiApp_menu_showItem apiApp_menu_showItem_Publish"> <a class="qui_btn ww_btn ww_btn_Large ww_btn_Blue js_save_menu" href="javascript:;" onclick="pushMenus()">发布</a> <span class="apiApp_assistDesWithLightGray">应用菜单更新需发布后才能生效</span> </li></ul> <div class="apiApp_menu_setMenu js_menu_edit_container"></div>';
            leftPart.innerHTML = html;
        } else {
            html += '<li class="apiApp_menu_showItem apiApp_menu_showItem_AddMenu"> <a href="javascript:;" onclick="openEdit(' + count + ')" class="js_enter_menuEdit">添加主菜单</a></li>   '
            html += '<li class="apiApp_menu_showItem apiApp_menu_showItem_Publish"> <a class="qui_btn ww_btn ww_btn_Large ww_btn_Blue js_save_menu" href="javascript:;">发布</a> <span class="apiApp_assistDesWithLightGray">应用菜单更新需发布后才能生效</span> </li></ul> <div class="apiApp_menu_setMenu js_menu_edit_container"></div>';
            leftPart.innerHTML = html;
        }

    }
    /*生成右侧预览图*/
    function makePreview(datas) {
        var rightPart = document.getElementById("right-part");
        var view = '<div class="apiApp_previewPanel"> <div class="apiApp_previewPanel_header"> <h3>' + title + '</h3> </div>';

        /*遍历数据生成右侧预览图*/
        if (datas.length > 0) {
            view += '<div class="apiApp_previewPanel_footerBar js_menu_bar apiApp_previewPanel_footerBar_MenuCount' + datas.length + '">'
            datas.forEach(function (val, index, array) {
                view += ' <div class="apiApp_previewPanel_footerBar_itemMenu"> <a href="javascript:;">' + val.name + '</a> </div>'
            })
            datas.forEach(function (val, index, array) {
                var n = index + 1;
                var children = val.childMenus || [];
                if (children.length == 0) {
                    view += '<ul style="display:none" class="apiApp_previewPanel_subMenuWrap apiApp_previewPanel_subMenuWrap_Menu' + n + '"></ul>'
                } else {
                    view += '<ul class="apiApp_previewPanel_subMenuWrap apiApp_previewPanel_subMenuWrap_Menu' + n + '">';
                    children.forEach(function (childVal, childIndex, childArray) {
                        view += '<li class="apiApp_previewPanel_subMenu"> <a href="javascript:;">' + childVal.name + '</a> </li>'
                    });
                    view += '</ul>'
                }
            });
            view += '</div></div>';
            rightPart.innerHTML = view;
        } else {
            rightPart.innerHTML = '';
        }
    }

    /*===============================左侧编辑菜单============================================*/
    /*生成左侧编辑菜单*/
    function openEdit(index) {
        $("#hidden").hide();
        $("#left-edit").show();
        document.getElementById("left-edit").setAttribute("data-num", index);
        if (datas[index]) {
            $("#mainMenu").val(datas[index].name);
            if (datas[index].redirectUri) {
                $("#state").val(datas[index].state);
                $("#scope").val(datas[index].scope);
                $("#redirectUri").val(datas[index].redirectUri);
                $("#main").show();
                $("#childMain").hide();
            } else {
                $("#main").hide();
                $("#childMain").show();
                for (var i = 0; i < 5; i++) {
                    if (datas[index].childMenus && datas[index].childMenus[i]) {
                        $("#childMenu" + i).val(datas[index].childMenus[i].name);
                        $("#state" + i).val(datas[index].childMenus[i].state);
                        $("#scope" + i).val(datas[index].childMenus[i].scope);
                        $("#redirectUri" + i).val(datas[index].childMenus[i].redirectUri);
                    }
                }
            }
        }
        else {
            $("#main").show();
            $("#childMain").hide();
        }
        /* document.getElementById("hidden").style.display = 'none';
         var main = document.getElementById("left-edit");
         var mainView = '';
         if (datas[index] != undefined) {
         mainView += '<div class="apiApp_menu_mostBlue"> <form> <span>主菜单</span> <div class="apiApp_menu_delete" onclick="deleteMenu(' + index + ')"></div> <div style="clear: both"></div><input id="mainMenu' + index + '" type="text" onblur="makeMainMenu(\'mainMenu' + index + '\')" class="apiApp_menu_input" value="' + datas[index].name + '"/><div class="apiApp_menu_innerPart"><div id="main">';
         } else {
         mainView += '<div class="apiApp_menu_mostBlue"> <form> <span>主菜单</span> <div class="apiApp_menu_delete" onclick="deleteMenu(' + index + ')"></div> <div style="clear: both"></div><input id="mainMenu' + index + '" type="text" onblur="makeMainMenu(\'mainMenu' + index + '\')" class="apiApp_menu_input" value=""/><div class="apiApp_menu_innerPart"><div id="main">';

         }
         /!*如果没有子菜单*!/
         if (datas[index] == undefined) {
         mainView += '<div class="apiApp_menu_line"> <span>state：</span> <input id="state" type="number" class="mainMenu apiApp_menu_inputState" /> </div> <div class="apiApp_menu_line"> <span>菜单内容：</span> <select id="contentMain" class="apiApp_menu_dropDown_main"> <option value="view">跳转到网页</option> <option value="click">点击</option> </select> </div> <div style="clear: both"></div> <div class="apiApp_menu_line"> <span>网址：</span> <input id="url0" type="text" class="mainMenu apiApp_menu_inputUrl"/> </div> </div>'
         } else {
         var children = datas[index].childMenus || [];
         if (children.length == 0) {
         mainView += '<div class="apiApp_menu_line"> <span>state：</span> <input id="state" type="number" class="mainMenu apiApp_menu_inputState" value="' + datas[index].state + '"/> </div> <div class="apiApp_menu_line"> <span>菜单内容：</span> <select id="contentMain" class="apiApp_menu_dropDown_main" value="' + datas[index].type + '"> <option value="view">跳转到网页</option> <option value="click">点击</option> </select> </div> <div style="clear: both"></div> <div class="apiApp_menu_line"> <span>网址：</span> <input id="url0" type="text" class="mainMenu apiApp_menu_inputUrl" value="' + datas[index].url + '"/> </div> </div>'
         } else {
         children.forEach(function (childVal, childIndex, childArray) {
         mainView += '<div id="child' + childIndex + '" class="childMenuCount childMenu"><div class="apiApp_menu_line">  <span>子菜单</span> <div class="apiApp_menu_delete" onclick="deleteChildMenu(' + index + ',' + childIndex + ')" ></div> <div id="childId' + childIndex + '"class="' + childVal.id + '" style="clear: both"></div><input id="childMenu' + childIndex + '" type="text" class="apiApp_menu_input childMenuInput" onblur="makeChildMenu(' + index + ')" value="' + childVal.name + '"/></div><div class="apiApp_menu_line"> <span>state：</span> <input id="state' + childIndex + '" type="number" class="childMenuStateInput apiApp_menu_inputState" value="' + childVal.state + '"/> </div> </div><div class="apiApp_menu_line"> <span>菜单内容：</span> <select id="content' + childIndex + '" class="apiApp_menu_dropDown" value="' + childVal.type + '"> <option value="view">跳转到网页</option> <option value="click">点击</option> </select> </div> <div style="clear: both"></div> <div class="apiApp_menu_line"> <span>网址：</span> <input id="url' + childIndex + '" type="text" class="childMenuUrlInput apiApp_menu_inputUrl" value="' + childVal.url + '"/> </div></div>'
         })
         }
         }
         mainView += '</div>'
         if (datas[index] == undefined) {
         mainView += '<div id="addNew"> <a class="apiApp_menu_setMenu_addSubMenu js_addSubMenu" href="javascript:;" onclick="addChild(0,' + index + ')" style="display: inline;">添加子菜单</a> </div>'
         } else if (children.length < 5) {
         mainView += '<div id="addNew"> <a class="apiApp_menu_setMenu_addSubMenu js_addSubMenu" href="javascript:;" onclick="addChild(' + children.length + ',' + index + ')" style="display: inline;">添加子菜单</a> </div>'
         } else {
         mainView += '<div id="addNew" style="display: none;"> <a class="apiApp_menu_setMenu_addSubMenu js_addSubMenu" href="javascript:;" onclick="addChild(' + children.length + ',' + index + ')" style="display: inline;">添加子菜单</a> </div>'
         }
         mainView += '<div id="footButton" style="margin-top: 15px;"> <a class="qui_btn ww_btn ww_btn_Big ww_btn_Blue js_SaveMainMenu" style="width: 52px;height: 24px;line-height: 24px;" onclick="saveEdit(' + index + ')" href="javascript:;">保存</a><a class="apiApp_menu_setMenu_footer_cancelBtn" onclick="cancelEdit()" href="javascript:;">取消</a> </div> </div> </form> </div>'

         main.innerHTML = mainView;*/
    }

    /*增加一个子菜单*/
    /* function addChild(e, index) {
     var addView = '<div id="child' + document.getElementsByClassName("childMenu").length + '" class="childMenuCount childMenu"><div class="apiApp_menu_line">  <span>子菜单</span> <div class="apiApp_menu_delete" onclick="deleteChildMenu(' + index + ',' + document.getElementsByClassName("childMenu").length + ')"></div> <div style="clear: both"></div><input id="childMenu' + document.getElementsByClassName("childMenu").length + '" type="text" class="apiApp_menu_input childMenuInput" onblur="makeChildMenu(' + index + ')" value=""/></div><div class="apiApp_menu_line"> <span>state：</span> <input id="state' + document.getElementsByClassName("childMenu").length + '" type="number" class="childMenuStateInput apiApp_menu_inputState"/> </div><div class="apiApp_menu_line "> <span>菜单内容：</span> <select id="content' + document.getElementsByClassName("childMenu").length + '" class="apiApp_menu_dropDown"> <option value="view">跳转到网页</option> <option value="click">点击</option> </select> </div> <div style="clear: both"></div> <div class="apiApp_menu_line"> <span>网址：</span> <input id="url' + document.getElementsByClassName("childMenu").length + '" type="text" class="childMenuUrlInput apiApp_menu_inputUrl"/> </div>'
     var mainTag = document.getElementById("main");
     /!*假如原来没有子菜单*!/
     if (document.getElementsByClassName("childMenuCount").length == 0) {
     document.getElementById("main").innerHTML = '';
     }
     /!*添加节点*!/
     for (var i = 0; i < $(addView).length; i++) {
     mainTag.append($(addView)[i]);
     }
     /!*多余5个子菜单就不能继续添加*!/
     if (document.getElementsByClassName("childMenuCount").length >= 5) {
     document.getElementById("addNew").style.display = "none";
     }
     }*/
    /*根据主菜单input框里面的内容改变数据源和预览图片*/
    function makeMainMenu(e) {
        var num = document.getElementById("left-edit").getAttribute("data-num")
        if (dataSourceCloned[num] != undefined) {
            dataSourceCloned[num].name = e.value;
        } else {
            dataSourceCloned.push({});
            dataSourceCloned[num].name = e.value;
            dataSourceCloned[num].wechatAccountId = wechatAccountId;
            dataSourceCloned[num].childMenus = [];
        }
        makePreview(dataSourceCloned);

    }

    /*根据子菜单文本框内容改变数据源以及右侧预览图*/
    function makeChildMenu() {
        var index = document.getElementById("left-edit").getAttribute("data-num");
        var listChildMenu = [];
        listChildMenu = $(".childMenuInput");
        listChildId = listChildMenu.prev();
        /*
         listChildMenu = document.getElementsByClassName("childMenuInput");
         */
        var childList = [];
        /*假如主菜单不存在则先创建主菜单*/
        if (dataSourceCloned[index] == undefined) {
            dataSourceCloned.push({"name": '', 'wechatAccountId': wechatAccountId});
            for (var i = 0; i < listChildMenu.length; i++) {
                if (listChildMenu[i].value != '') {
                    childList.push({id: '', 'name': listChildMenu[i].value});
                }
            }
        } else {
            for (var i = 0; i < listChildMenu.length; i++) {
                /*如有id,仍用之前id;如没有,则设为空*/
                if (listChildMenu[i].value != '') {
                    if (listChildId[i].className != '') {
                        childList.push({
                            id: listChildId[i].className,
                            'name': listChildMenu[i].value
                        });
                    } else {
                        childList.push({id: '', 'name': listChildMenu[i].value});
                    }
                }
            }
        }


        dataSourceCloned[index].childMenus = $.extend(true, [], childList);
        makePreview(dataSourceCloned);
    }

    /*撤销所做的修改*/
    function cancelEdit() {
        /*还原复制的数据源*/
        dataSourceCloned = $.extend(true, [], datas);
        /*还原预览图*/
        makePreview(datas);
        deleteInputData();
        $("#left-edit").hide();
        document.getElementById("hidden").style = '';
    }

    /*校验某个div下的input框和select框是否为空*/
    function checkMenu(div) {
        var result = true;
        $("#" + div + " input").each(function () {
            if (!this.value) {
                result = false;
                return false;
            }
        });
        return result;
    }

    /*要么全为空要么都填满*/
    function checkChildMenu(div) {
        var isChecked = true;
        var result = true;
        $("#" + div + " input").each(function () {
            if (!this.value) {
                return result;
            }
            result = false;
        });
        if (!result) {
            $("#" + div + " input").each(function () {
                if (!this.value) {
                    isChecked = false;
                    return false;
                }
            });
        }
        return isChecked;
    }

    /*保存修改*/
    function saveEdit() {
        debugger
        var index = document.getElementById("left-edit").getAttribute("data-num");
        if (document.getElementById("main").style.display != "none") {
            if (checkMenu.call(this, "main") && $("#mainMenu").val()) {
                dataSourceCloned[index].name = $("#mainMenu").val();
                dataSourceCloned[index].state = $("#state").val();
                dataSourceCloned[index].scope = $("#scope").val();
                dataSourceCloned[index].redirectUri = $("#redirectUri").val();
                dataSourceCloned[index].childMenus = [];
                datas = dataSourceCloned;
                saveData(datas);
                deleteInputData();
                $("#hidden").show();
                $("#left-edit").hide();
                refresh();
                //fixme

                makePreview(datas);
                makeList();
            } else {
                kendo.ui.showErrorDialog({
                    title: $l('提示'),
                    message: "请将内容填完整"
                });
            }
        } else {
            if ($("#mainMenu").val() && checkChildMenu("child0") && checkChildMenu("child1") && checkChildMenu("child2") && checkChildMenu("child3") && checkChildMenu("child4")) {
                dataSourceCloned[index].name = $("#mainMenu").val();
                dataSourceCloned[index].state = "";
                dataSourceCloned[index].scope = "";
                dataSourceCloned[index].redirectUri = "";
                for (var i = 0; i < 5; i++) {
                    if (dataSourceCloned[index].childMenus[i]) {
                        dataSourceCloned[index].childMenus[i].name = $("#childMenu" + i).val();
                        dataSourceCloned[index].childMenus[i].state = $("#state" + i).val();
                        dataSourceCloned[index].childMenus[i].scope = $("#scope" + i).val();
                        dataSourceCloned[index].childMenus[i].redirectUri = $("#redirectUri" + i).val();
                    }
                }
                //fixme
                datas = dataSourceCloned;
                deleteInputData();
                $("#hidden").show();
                $("#left-edit").hide();
                saveData(datas);
                refresh();

                makePreview(datas);
                makeList();

            } else {
                kendo.ui.showErrorDialog({
                    title: $l('提示'),
                    message: "请将内容填完整"
                });
            }
        }
        /* if (checkMenu(".apiApp_menu_inputUrl") && checkMenu(".apiApp_menu_inputState")) {
         if ($("#contentMain").val() != undefined) {
         dataSourceCloned[index].type = $("#contentMain").val();
         dataSourceCloned[index].url = $("#url0").val();
         dataSourceCloned[index].state = $("#state").val();
         dataSourceCloned[index].childMenus = [];
         } else {
         dataSourceCloned[index].type = '';
         dataSourceCloned[index].url = '';
         var contents = $(".apiApp_menu_dropDown");
         var childUrlInputs = $(".apiApp_menu_inputUrl");
         var childStateInputs = $(".apiApp_menu_inputState");
         for (var i = 0; i < contents.length; i++) {
         dataSourceCloned[index].childMenus[i].type = contents[i].value;
         dataSourceCloned[index].childMenus[i].url = childUrlInputs[i].value;
         dataSourceCloned[index].childMenus[i].state = childStateInputs[i].value;
         }
         }

         /!*统计删除的id*!/
         var childIds = $(".childMenuInput").prev()
         var buttonIds = [];
         if (datas[index] != undefined) {
         var children = datas[index].childMenus || [];
         for (var i = 0; i < children.length; i++) {
         if (children[i].id != "") {
         buttonIds.push(children[i].id);
         }
         }
         for (var i = 0; i < $(".childMenuInput").prev().length; i++) {
         if (childIds[i].className != "") {
         for (var n = 0; n < children.length; n++) {
         if (childIds[i].className == children[n].id) {
         buttonIds[n] = '';
         }
         }
         }
         }
         dataSourceCloned[index].deleteId = buttonIds;
         }

         datas = dataSourceCloned;
         saveData(datas);
         refresh();
         makePreview(datas);
         makeList();
         /!*关闭子菜单编辑栏*!/
         document.getElementById("left-edit").innerHTML = '';
         /!*还原左侧主菜单编辑*!/
         document.getElementById("hidden").style = '';
         } else {
         kendo.ui.showErrorDialog({
         title: $l('提示'),
         message: "请将内容填完整"
         });
         }
         */
    }

    /*删除主菜单*/
    function deleteMenu() {
        var index = document.getElementById("left-edit").getAttribute("data-num");
        var mainVal = '';
        if (document.getElementById("mainMenu").value) {
            mainVal = document.getElementById("mainMenu").value;
        }
        kendo.ui.showConfirmDialog({
            title: '提示',
            message: '删除后，' + mainVal + '下设置的内容都将被删除'
        }).done(function (e) {
            if (e.button == 'OK') {
                $("#left-edit").hide();
                deleteInputData();
                $("#hidden").show();
                /*修改数据源*/
                if (dataSourceCloned[index] != undefined) {
                    dataSourceCloned.splice(index, 1);
                }
                if (datas[index].id != undefined) {
                    $.ajax({
                        url: "${base.contextPath}/wechat/menu/delete",
                        async: false, //设为同步
                        type: "POST",
                        dataType: "json",
                        data: JSON.stringify(datas[index]),
                        contentType: "application/json",
                        success: function (data) {

                        }
                    });
                }
                refresh()
                makeList();
                makePreview(datas);
            }
        })
    }

    /*删除编辑菜单中所有input 和 select的值*/
    function deleteInputData() {
        $("#left-edit input").each(function () {
            this.value = '';
        })
        $("#left-edit select").each(function () {
            this.value = 'snsapi_base';
        })
    }

    /*后面的菜单内容替换前面的*/
    function replaceMenu(index) {
        for (var i = index; i < 4; i++) {
            var k = i + 1;
            $("#childMenu" + i).val($("#childMenu" + k).val());
            $("#state" + i).val($("#state" + k).val());
            $("#scope" + i).val($("#scope" + k).val());
            $("#redirectUri" + i).val($("#redirectUri" + k).val());
        }
    }

    /*切换子菜单*/
    function switchChild() {
        if (document.getElementById("main").style.display != "none") {
            $("#main type").each(function () {
                this.value = '';
            })
            $("#main select").each(function () {
                this.value = 'snsapi_base';
            })
            $("#main").hide();
            $("#childMain").show();
        } else {
            $("#childMain type").each(function () {
                this.value = '';
            })
            $("#childMain select").each(function () {
                this.value = 'snsapi_base';
            })
            $("#childMain").hide();
            $("#main").show();
        }
    }

    /*删除子菜单*/
    function deleteChildMenu(index) {
       var parentIndex =  document.getElementById("left-edit").getAttribute("data-num");
        if (datas[parentIndex] && datas[parentIndex].childMenus) {
            $.ajax({
                url: "${base.contextPath}/wechat/menu/delete",
                async: false, //设为同步
                type: "POST",
                dataType: "json",
                data: JSON.stringify(datas[parentIndex].childMenus[index]),
                contentType: "application/json",
                success: function (data) {

                }
            });
        }
        if (index < 4) {
            replaceMenu(index);
        }
        $("#child4 input").each(function () {
            this.value = '';
        })
        $("#child4 select").each(function () {
            this.value = 'snsapi_base';
        })
        refresh()
        makeList();
        makePreview(datas);

    }

    /*保存到数据库*/
    function saveData(datas) {
        $.ajax({
            url: "${base.contextPath}/wechat/menu/update",
            async: false, //设为同步
            type: "POST",
            dataType: "json",
            data: JSON.stringify(datas),
            contentType: "application/json",
            success: function (data) {

            }
        });
    }


    ]]></script>
    <div id="hidden" style="">
        <div class="apiApp_menu_leftPanel" id="left-part"></div>
    </div>
    <div class="apiApp_menu_leftPanel" id="left-edit" data-num="0" style="display: none">
        <div class="apiApp_menu_mostBlue">
            <form>
                <span>主菜单</span>

                <div class="apiApp_menu_delete" onclick="deleteMenu()"></div>
                <a class="apiApp_menu_setMenu_footer_cancelBtn" style="float: right;margin-right: 50px"
                   onclick="switchChild()"
                   href="javascript:;">使用子菜单/不使用子菜单</a>
                <div style="clear: both"></div>
                <input id="mainMenu" type="text" onblur="makeMainMenu(this)" class="apiApp_menu_input"/>
                <div class="apiApp_menu_innerPart">
                    <div id="main">
                        <div class="apiApp_menu_line"><span>state：</span>
                            <input id="state" type="number" class="mainMenu apiApp_menu_inputState"/>
                        </div>
                        <div class="apiApp_menu_line"><span>scope：</span>
                            <select id="scope" class="apiApp_menu_dropDown">
                                <option value="snsapi_base">snsapi_base</option>
                                <option value="snsapi_userinfo">snsapi_userinfo</option>
                            </select>
                        </div>
                        <div style="clear: both"></div>
                        <div class="apiApp_menu_line">
                            <span id="">网址：</span>
                            <input id="redirectUri" type="text" class="mainMenu apiApp_menu_inputUrl"/>
                        </div>
                    </div>
                </div>

                <div id="childMain">
                    <div class="apiApp_menu_innerPart">
                        <div id="child0" class="childMenuCount childMenu">
                            <div class="apiApp_menu_line">
                                <span>子菜单</span>
                                <div class="apiApp_menu_delete" onclick="deleteChildMenu(0)"></div>
                                <div style="clear: both"></div>
                                <input id="childMenu0" type="text" class="apiApp_menu_input childMenuInput"
                                       onblur="makeChildMenu()" value=""/>
                            </div>
                            <div class="apiApp_menu_line"><span>state：</span>
                                <input id="state0" type="number" class="mainMenu apiApp_menu_inputState"/>
                            </div>
                            <div class="apiApp_menu_line"><span>scope：</span>
                                <select id="scope0" class="apiApp_menu_dropDown">
                                    <option value="snsapi_base">snsapi_base</option>
                                    <option value="snsapi_userinfo">snsapi_userinfo</option>
                                </select>
                            </div>
                            <div style="clear: both"></div>
                            <div class="apiApp_menu_line"><span>网址：</span>
                                <input id="redirectUri0" type="text" class="childMenuUrlInput apiApp_menu_inputUrl"/>
                            </div>
                        </div>
                    </div>

                    <div class="apiApp_menu_innerPart">
                        <div id="child1" class="childMenuCount childMenu">
                            <div class="apiApp_menu_line">
                                <span>子菜单</span>
                                <div class="apiApp_menu_delete" onclick="deleteChildMenu(1)"></div>
                                <div style="clear: both"></div>
                                <input id="childMenu1" type="text" class="apiApp_menu_input childMenuInput"
                                       onblur="makeChildMenu()" value=""/>
                            </div>
                            <div class="apiApp_menu_line"><span>state：</span>
                                <input id="state1" type="number" class="mainMenu apiApp_menu_inputState"/>
                            </div>
                            <div class="apiApp_menu_line"><span>scope：</span>
                                <select id="scope1" class="apiApp_menu_dropDown">
                                    <option value="snsapi_base">snsapi_base</option>
                                    <option value="snsapi_userinfo">snsapi_userinfo</option>
                                </select>
                            </div>
                            <div style="clear: both"></div>
                            <div class="apiApp_menu_line"><span>网址：</span>
                                <input id="redirectUri1" type="text" class="childMenuUrlInput apiApp_menu_inputUrl"/>
                            </div>
                        </div>
                    </div>

                    <div class="apiApp_menu_innerPart">
                        <div id="child2" class="childMenuCount childMenu">
                            <div class="apiApp_menu_line">
                                <span>子菜单</span>
                                <div class="apiApp_menu_delete" onclick="deleteChildMenu(2)"></div>
                                <div style="clear: both"></div>
                                <input id="childMenu2" type="text" class="apiApp_menu_input childMenuInput"
                                       onblur="makeChildMenu()" value=""/>
                            </div>
                            <div class="apiApp_menu_line"><span>state：</span>
                                <input id="state2" type="number" class="mainMenu apiApp_menu_inputState"/>
                            </div>
                            <div class="apiApp_menu_line"><span>scope：</span>
                                <select id="scope2" class="apiApp_menu_dropDown">
                                    <option value="snsapi_base">snsapi_base</option>
                                    <option value="snsapi_userinfo">snsapi_userinfo</option>
                                </select>
                            </div>
                            <div style="clear: both"></div>
                            <div class="apiApp_menu_line"><span>网址：</span>
                                <input id="redirectUri2" type="text" class="childMenuUrlInput apiApp_menu_inputUrl"/>
                            </div>
                        </div>
                    </div>

                    <div class="apiApp_menu_innerPart">
                        <div id="child3" class="childMenuCount childMenu">
                            <div class="apiApp_menu_line">
                                <span>子菜单</span>
                                <div class="apiApp_menu_delete" onclick="deleteChildMenu(3)"></div>
                                <div style="clear: both"></div>
                                <input id="childMenu3" type="text" class="apiApp_menu_input childMenuInput"
                                       onblur="makeChildMenu()" value=""/>
                            </div>
                            <div class="apiApp_menu_line"><span>state：</span>
                                <input id="state3" type="number" class="mainMenu apiApp_menu_inputState"/>
                            </div>
                            <div class="apiApp_menu_line"><span>scope：</span>
                                <select id="scope3" class="apiApp_menu_dropDown">
                                    <option value="snsapi_base">snsapi_base</option>
                                    <option value="snsapi_userinfo">snsapi_userinfo</option>
                                </select>
                            </div>
                            <div style="clear: both"></div>
                            <div class="apiApp_menu_line"><span>网址：</span>
                                <input id="redirectUri3" type="text" class="childMenuUrlInput apiApp_menu_inputUrl"/>
                            </div>
                        </div>
                    </div>

                    <div class="apiApp_menu_innerPart">
                        <div id="child4" class="childMenuCount childMenu">
                            <div class="apiApp_menu_line">
                                <span>子菜单</span>
                                <div class="apiApp_menu_delete" onclick="deleteChildMenu(4)"></div>
                                <div style="clear: both"></div>
                                <input id="childMenu4" type="text" class="apiApp_menu_input childMenuInput"
                                       onblur="makeChildMenu()" value=""/>
                            </div>
                            <div class="apiApp_menu_line"><span>state：</span>
                                <input id="state4" type="number" class="mainMenu apiApp_menu_inputState"/>
                            </div>
                            <div class="apiApp_menu_line"><span>scope：</span>
                                <select id="scope4" class="apiApp_menu_dropDown">
                                    <option value="snsapi_base">snsapi_base</option>
                                    <option value="snsapi_userinfo">snsapi_userinfo</option>
                                </select>
                            </div>
                            <div style="clear: both"></div>
                            <div class="apiApp_menu_line"><span>网址：</span>
                                <input id="redirectUri4" type="text" class="childMenuUrlInput apiApp_menu_inputUrl"/>
                            </div>
                        </div>
                    </div>
                </div>


                <!--<div id="addNew" style="">
                    <a class="apiApp_menu_setMenu_addSubMenu js_addSubMenu" href="javascript:;"
                       onclick="addChild(0,0)" style="display: inline;">添加子菜单</a>
                </div>-->
                <div id="footButton" style="margin-top: 15px;">
                    <a class="qui_btn ww_btn ww_btn_Big ww_btn_Blue js_SaveMainMenu"
                       style="width: 52px;height: 24px;line-height: 24px;" onclick="saveEdit(0)"
                       href="javascript:;">保存</a>
                    <a class="apiApp_menu_setMenu_footer_cancelBtn"
                       onclick="cancelEdit()"
                       href="javascript:;">取消</a>
                </div>
            </form>
        </div>
    </div>
    <div class="apiApp_menu_rightPanel js_rightPanel_scroll" id="right-part"></div>
</h:screen>