// ==UserScript==
// @name         component_management
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1.0
// @description  try to take over the world!
// @author       You
// @grant        GM_setValue
// @grant        GM_getValue
// @match        https://*/web/index.php?r=plugin%2Fdiy%2Fmall%2Fmodule%2Fedit&id=*
// @match        https://*/web/index.php?r=plugin%2Fdiy%2Fmall%2Fmodule%2Fedit
// @match        https://*/web/index.php?r=plugin%2Fdiy%2Fmall%2Ftemplate%2Fedit
// @match        https://*/web/index.php?r=plugin%2Fdiy%2Fmall%2Ftemplate%2Fedit&id=*
// @require-css  http://www.francescomalagrino.com/BootstrapPageGenerator/3/css/bootstrap-combined.min.css
// @require      http://www.francescomalagrino.com/BootstrapPageGenerator/3/js/jquery-2.0.0.min.js
// @require      http://www.francescomalagrino.com/BootstrapPageGenerator/3/js/jquery-ui
// @require      http://www.francescomalagrino.com/BootstrapPageGenerator/3/js/bootstrap.min.js
// @connect       cdn.staticfile.org
// ==/UserScript==


//组件数据
//app.$children[0].components
//保存
//app.$children[0].components.save()
//名字
//app.$children[0].templateName



//构建界面
function createNode() {
    var container = document.createDocumentFragment();
    var e_0 = document.createElement("div");
    var e_1 = document.createElement("script");
    e_1.appendChild(document.createTextNode("\nfunction saveComponent() {\nlet component = {}\nlet components = JSON.parse(localStorage.getItem('componentsStorage'))\nif (!components) components = []\ncomponent.data = app.$children[0].components\ncomponent.name = app.$children[0].templateName\ncomponents.push(component)\nlocalStorage.setItem(\"componentsStorage\", JSON.stringify(components))\nalert('保存成功:'+component.name)\n}\nfunction delComponent(_this) {\nlet components = JSON.parse(localStorage.getItem('componentsStorage'))\nif (!components) components = []\nlet index = parseInt(_this.parentNode.parentNode.firstChild.innerText)-1\ncomponents.splice(index, 1);\nlocalStorage.setItem(\"componentsStorage\", JSON.stringify(components))\nrender()\n}\nfunction loadComponent(_this) {\nlet index = parseInt(_this.parentNode.parentNode.firstChild.innerText)-1\nlet components = JSON.parse(localStorage.getItem('componentsStorage'))\nif (components) {\napp.$children[0].components=components[index].data\napp.$children[0].templateName= components[index].name\n}\n}\nvar render = function () {\n$('#tbody').html('');\nlet components = JSON.parse(localStorage.getItem('componentsStorage'))\nif (!components) components = []\nfor (let i = 0; i < components.length; i++) {\nvar html = \"\";\nhtml += \"<tr class='success'><td>\" + (i + 1) + \"</td><td>\" + components[i].name + \"</td><td><button onclick='loadComponent(this)'>加载</button><button onclick='delComponent(this)'>删除</button></td></tr>\";\n$('#tbody').append(html);\n}\n}\n$('#myTemplate').click(render);\n"));
    e_0.appendChild(e_1);
    var e_2 = document.createElement("div");
    e_2.setAttribute("class", "btn-group");
    e_2.setAttribute("style", "position:absolute;top:0;left:0");
    var e_3 = document.createElement("button");
    e_3.style='border-color: rgba(0,0,0,.3);background:#4E6EF2;color:white'
    e_3.setAttribute("data-toggle", "dropdown");
    e_3.setAttribute("class", "btn dropdown-toggle");
    e_3.setAttribute("id", "myTemplate");
    e_3.appendChild(document.createTextNode("我的模板\n"));
    var e_4 = document.createElement("span");
    e_4.setAttribute("class", "caret");
    e_3.appendChild(e_4);
    e_2.appendChild(e_3);
    var e_5 = document.createElement("button");
    e_5.setAttribute("onclick", "saveComponent()");
    e_5.setAttribute("class", "btn dropdown-toggle");
    e_5.style='border-color: rgba(0,0,0,.3);background:#4E6EF2;color:white'
    e_5.appendChild(document.createTextNode("保存"));
    e_2.appendChild(e_5);
    var e_6 = document.createElement("ul");
    e_6.setAttribute("class", "dropdown-menu");
    e_6.setAttribute("contenteditable", "true");
    var e_7 = document.createElement("li");
    var e_8 = document.createElement("table");
    e_8.setAttribute("class", "table");
    e_8.setAttribute("style", "z-index:999");
    e_8.setAttribute("contenteditable", "true");
    e_8.setAttribute("align", "center");
    var e_9 = document.createElement("thead");
    var e_10 = document.createElement("tr");
    var e_11 = document.createElement("th");
    e_11.appendChild(document.createTextNode("编号"));
    e_10.appendChild(e_11);
    var e_12 = document.createElement("th");
    e_12.appendChild(document.createTextNode("名称"));
    e_10.appendChild(e_12);
    var e_13 = document.createElement("th");
    e_13.appendChild(document.createTextNode("操作"));
    e_10.appendChild(e_13);
    e_9.appendChild(e_10);
    e_8.appendChild(e_9);
    var e_14 = document.createElement("tbody");
    e_14.setAttribute("id", "tbody");
    e_8.appendChild(e_14);
    e_7.appendChild(e_8);
    e_6.appendChild(e_7);
    e_2.appendChild(e_6);
    e_0.appendChild(e_2);
    container.appendChild(e_0);
    return container;
}
(function () {
    'use strict';
    let templateBtn = createNode()
    // unsafeWindow.document.body.innerHTML=""
    // unsafeWindow.document.body.appendChild(templateBtn)
    let nav = unsafeWindow.document.querySelector("body > div.el-container > div.el-container.is-vertical > main")
    nav.appendChild(templateBtn)
    // Your code here...
})();


/**
 * <script>

<script>

function saveComponent() {
    let component = {}
    let components = JSON.parse(localStorage.getItem('componentsStorage'))
    if (!components) components = []
    component.data = app.$children[0].components
    component.name = app.$children[0].templateName
    components.push(component)
    localStorage.setItem("componentsStorage", JSON.stringify(components))
	alert('保存成功:'+component.name)
}

function delComponent(_this) {
    let components = JSON.parse(localStorage.getItem('componentsStorage'))
    if (!components) components = []
    let index = parseInt(_this.parentNode.parentNode.firstChild.innerText)-1
    components.splice(index, 1);
    localStorage.setItem("componentsStorage", JSON.stringify(components))
    render()
	alert('删除成功')
}

function loadComponent(_this) {
	let index = parseInt(_this.parentNode.parentNode.firstChild.innerText)-1
	let components = JSON.parse(localStorage.getItem('componentsStorage'))
    if (components) {
		app.$children[0].components=components[index].data
		alert('加载成功')
	}
	
}
	var render = function () {
		$('#tbody').html('');
    let components = JSON.parse(localStorage.getItem('componentsStorage'))
    if (!components) components = []
    for (let i = 0; i < components.length; i++) {
        var html = "";
        html += "<tr class='success'><td>" + (i + 1) + "</td><td>" + components[i].name + "</td><td><button onclick='loadComponent(this)'>加载</button><button onclick='delComponent(this)'>删除</button></td></tr>";
        $('#tbody').append(html);
    }
}

$('#myTemplate').click(render);

</script>
<div class="btn-group" style="position:absolute;top:0;left:0">
  <button data-toggle="dropdown" class="btn dropdown-toggle" id="myTemplate">我的模板
    <span class="caret"></span>
  </button>
  <button onclick="saveComponent()">保存</button>
  <ul class="dropdown-menu" contenteditable="true">
    <li>
      <table class="table" style="z-index:999" contenteditable="true" align="center">
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="tbody">
          
        </tbody>
      </table>
    </li>
  </ul>
</div>
 * 
 * 
 */