<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">
    <base href="/">
    <title>${title}</title>

    <style>
        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: #fcfcfc;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: #3DB6A4;
        }

        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #efefef;
        }

        blockquote {
            background: #f9f9f9;
            border-left: 5px solid #ea800f;
            margin-top: 10px;
            padding: 8px;
            color: #797979;
            font-size: smaller;
            font-style: italic;
        }

        .address {
            background: #ffffff;
            border: 1px solid #e5e5e5;
            margin-top: 10px;
            padding: 10px;
            color: #454545;
        }

        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
            color: #ccc;
            font-size: 12px;
        }

        input:-moz-placeholder, textarea:-moz-placeholder {
            color: #ccc;
            font-size: 12px;
        }

        input::-moz-placeholder, textarea::-moz-placeholder {
            color: #ccc;
            font-size: 12px;
        }

        input:-ms-input-placeholder, textarea:-ms-input-placeholder {
            color: #ccc;
            font-size: 12px;
        }

        .container {
            display: flex;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .menu {
            flex: 0.25;
            background-color: white;
            border-radius: 10px !important;
            -moz-box-shadow: 0 0 3px #cccccc;
            -webkit-box-shadow: 0 0 3px #cccccc;
            box-shadow: 0 0 3px #cccccc;
            margin: 10px 0 10px 10px;
            overflow-y: auto;
            text-overflow: clip;
        }

        .content {
            flex: 1;
            padding: 10px;
            overflow-y: auto;
        }

        .item {
            padding: 15px;
            background-color: white;
            border-radius: 10px !important;
            -moz-box-shadow: 0 0 3px #cccccc;
            -webkit-box-shadow: 0 0 3px #cccccc;
            box-shadow: 0 0 3px #cccccc;
            margin-bottom: 10px;
        }

        table {
            width: 100%;
            margin-top: 10px;
            border-collapse: collapse;
        }

        th {
            background: #fbf8ff;
            border: 1px solid #e5e5e5;
            padding: 0.5em;
            text-align: center;
        }

        td {
            border: 1px solid #e5e5e5;
            padding: 5px;
            text-align: center;
            color: #5e5e5e;
        }

        tr:nth-child(even) {
            background: #fafafa;
        }

        tr:nth-child(odd) {
            background: #ffffff;
        }

        button {
            -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
            -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
            box-shadow: inset 0px 1px 0px 0px #ffffff;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
            background: -moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
            background: -webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
            background: -o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
            background: -ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
            background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0);
            background-color: #ffffff;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            border: 1px solid #dcdcdc;
            display: inline-block;
            cursor: pointer;
            color: #666666;
            font-size: 15px;
            font-weight: bold;
            padding: 6px 24px;
            text-decoration: none;
            text-shadow: 0px 1px 0px #ffffff;
            outline: none;
        }

        button:hover {
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
            background: -moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
            background: -webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
            background: -o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
            background: -ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
            background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff', GradientType=0);
            background-color: #f6f6f6;
        }

        button:active {
            position: relative;
            top: 1px;
        }

        input {
            padding: 5px;
            width: 80%;
            border: 1px solid #e5e5e5;
            border-radius: 5px !important;
            outline: none;
        }

        .sbt {
            width: 80%;
        }

        .cpl{
            width: auto;
             height: 35px;
        }

        ul {
            text-align: center;
            padding: 10px 0 10px 0;
            /*text-shadow: 0 1px 0 #f0f0f0;*/
            border-top: 1px dotted #cccccc;
        }

        ul:nth-child(1) {
            border-top: 0 !important;
        }
        ul:nth-child(even) {
            background: #fafafa;
        }

        li {
            list-style: none;
            padding: 8px;
            margin-bottom: 5px;
            cursor: pointer;
            color: #999999;
        }

        li:hover {
            background: #f9f9f9;
            border-left: 5px solid #3DB6A4;
        }

        .selected {
            background: #f9f9f9;
            border-left: 5px solid #3DB6A4;
            color: #000000;
            font-size: 18px;
            font-weight: bold;
        }

        .checked {
            border-top: 5px solid #3DB6A4;
            background: #fde9e4;
        }    </style>

<script>
    let selectedId = null;
    let upHistoryId = [];
    let ntHistoryId = [];
    let timers = {};
    let buildTime=${time};
    let buildFile="/Users/Janesen/工作/space_idea/FrameWork/FastChar-Auto/pom.xml";
    let tabId="${tabId}";

    let bowhidden = "hidden" in document ? "hidden" : "webkithidden" in document ? "webkithidden" : "mozhidden" in document ? "mozhidden" : null;
    let vibchage = "visibilitychange" || "webkitvisibilitychange" || "mozvisibilitychange";
    document.addEventListener(vibchage, function () {
        if (!document[bowhidden]) {
            let tagElements = document.getElementsByTagName('input');
            for (let j = 0; j < tagElements.length; j++) {
                let inputE = tagElements[j];
                inputE.removeAttribute("disabled");
            }
        }
    });

    function countMenu() {
        let liTags = document.getElementById("menu").getElementsByTagName("li");
        return liTags.length;
    }

    function setCookie(key, val, time) {
        let date = new Date();
        date.setTime(date.getTime() + time * 24 * 3600 * 1000);
        document.cookie = key + "=" + val + ";expires=" + date.toGMTString();
    }

    function getCookie(key) {
        let getCookie = document.cookie.replace(/[ ]/g, "");
        let arrCookie = getCookie.split(";");
        let tips;
        for (let i = 0; i < arrCookie.length; i++) {
            let arr = arrCookie[i].split("=");
            if (key == arr[0]) {
                tips = arr[1];
                break;
            }
        }
        return tips;
    }

    function animate(id, obj, attr, target) {
        clearInterval(timers[id]);
        timers[id] = setInterval(function () {
            let currValue = parseInt(obj[attr]);
            let speed = (parseInt(target) - currValue) / 5;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            obj[attr] = currValue + speed;
            if (speed > 0) {
                if (parseInt(obj[attr]) >= parseInt(target)) {
                    clearInterval(timers[id]);
                    obj[attr] = target;
                    return;
                }
            } else {
                if (parseInt(obj[attr]) <= parseInt(target)) {
                    clearInterval(timers[id]);
                    obj[attr] = target;
                    return;
                }
            }
            if (parseInt(obj[attr]) == currValue) {
                clearInterval(timers[id]);
                obj[attr] = target;
            }
        }, 10);
    }

    function selectMenu(id, select, scroll, toHistory) {
        if (scroll == null) {
            scroll = true;
        }
        if (toHistory == null) {
            toHistory = true;
        }
        let menu = document.getElementById(id + "Menu");
        let item = document.getElementById(id + "Item");
        if (!menu || !item) {
            return false;
        }
        let itemContainer = document.getElementById("content");
        let menuContainer = document.getElementById("menu");
        let offset = 15;
        if (select) {
            setCookie("selected" + document.title, id);
            if (id != selectedId) {
                restoreForm(id);
                if (toHistory) {
                    upHistoryId.push(selectedId);
                } else {
                    ntHistoryId.push(selectedId);
                }
            }
            let itemHidden = itemContainer.scrollTop > (item.offsetTop + item.offsetHeight * 0.8) || itemContainer.scrollTop < (item.offsetTop - item.offsetHeight * 0.4);
            if (item.offsetHeight < itemContainer.offsetHeight) {
                offset = (itemContainer.offsetHeight - item.offsetHeight) / 2;
            }
            if (id != selectedId || itemHidden) {
                animate("itemContainer", itemContainer, "scrollTop", item.offsetTop - offset);
            }
            if (id != selectedId || !scroll) {
                if (menu.offsetHeight < menuContainer.offsetHeight) {
                    offset = (menuContainer.offsetHeight - menu.offsetHeight) / 2;
                }
                animate("menuContainer", menuContainer, "scrollTop", menu.offsetTop - offset);
            }
            menu.classList.add("selected");
            item.classList.add("checked");
            if (selectedId != null && id != selectedId) {
                selectMenu(selectedId, false);
            }
            selectedId = id;
            if (window.parent["onDocSelect"]) {
                window.parent["onDocSelect"](menu.innerText, id,tabId);
             }
        } else {
            menu.classList.remove("selected");
            item.classList.remove("checked");
        }
        return true;
    }

    function onload() {
        let selected = getCookie("selected" + document.title);
        let menu = document.getElementById(selected + "Menu");
        if (!menu) {
            selected = document.getElementsByTagName('li')[0]["id"].replace("Menu", "");
        }
        selectMenu(selected, true, false);
        if (window.parent) {
            document.getElementsByTagName("base")[0].href = window.parent.document.getElementsByTagName("base")[0].href;
        }
    }

    function goUp() {
        if (upHistoryId.length > 0) {
            let upId = upHistoryId.splice(upHistoryId.length - 1, 1);
            selectMenu(upId, true, false, false);
        }
    }

    function goNext() {
        if (ntHistoryId.length > 0) {
            let upId = ntHistoryId.splice(ntHistoryId.length - 1, 1);
            selectMenu(upId, true, false, true);
        }
    }

    function onSubmitForm(id,obj) {
        try {
            let tagElements = obj.getElementsByTagName('input');
            let params = [];
            for (let j = 0; j < tagElements.length; j++){
                let inputE = tagElements[j];
                if (inputE.value.toString().length !== 0) {
                    params.push({
                        name:inputE.name,
                        value: inputE.value
                    });
                }else{
                    inputE.setAttribute("disabled", "disabled");
                }
            }
            setCookie(id + "FormValue", JSON.stringify(params));
        }catch (e) {}
        return true;
    }

    function restoreForm(id) {
        try {
            let formValueJson = getCookie(id + "FormValue");
            let formObj = document.getElementById(id + "Form");
            if (formValueJson && formObj) {
                let tagElements = formObj.getElementsByTagName('input');
                let params = JSON.parse(formValueJson);
                for (let i = 0; i < params.length; i++) {
                    for (let j = 0; j < tagElements.length; j++){
                        let inputE = tagElements[j];
                        if (inputE.name == params[i].name) {
                            inputE.value=params[i].value;
                        }
                    }
                }
            }
        }catch (e) {}
    }

    function copyLink(menu,id) {
        if (window.parent) {
            window.parent.copyLink(menu,id);
        }
        event.stopPropagation();
    }

    function copyComment(id) {
        try {
           let cmtObj = document.getElementById(id + "Comment");
           if (window.parent) {
               window.parent.copyToBoard(cmtObj.innerHTML.trim());
           }
           event.stopPropagation();
           alert("复制成功！");
        } catch (e) {
        }
    }

    function copyJsCode(id) {
        try {
           let cmtObj = document.getElementById(id + "JsCode");
           if (window.parent) {
               window.parent.copyToBoard(cmtObj.innerHTML.trim());
           }
           event.stopPropagation();
           alert("复制成功！");
        } catch (e) {
        }
    }

    function downJsCode() {
        const routeList = document.getElementsByTagName("route");
        let code = "const mainUrl = ''; export{ mainUrl };";
        if (window.parent) {
            code = "const mainUrl = '" + window.parent.getProjectHost() + "'; export{ mainUrl };";
        }
        for (let j = 0; j < routeList.length; j++) {
            let routeE = routeList[j];
            let cmtObj = document.getElementById(routeE.id + "JsCode");
            code += "\n" + cmtObj.innerHTML.trim();
        }
        const fileBlob = new Blob([code]);
        fileBlob.lastModifiedDate = new Date();
        fileBlob.name = "server.js";

        const a = document.createElement("a");
        const url = window.URL.createObjectURL(fileBlob);
        const filename = "server.js";
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
    }

</script>


</head>
<body>

<div class="container">
    <div class="menu" id="menu" >
         ${menus}
    </div>

    <div class="content" id="content" >
     <button style="width:100%;margin-bottom: 10px;
                                   height: 45px;
                                   color: darkred;
                                   font-size: 18px;" type="button" onclick="downJsCode()" >下载JS代码</button>
            ${items}
    </div>

</div>
</body>
</html>