<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>欢迎页面-X-admin2.0</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="./static/css/font.css">
        <link rel="stylesheet" href="./static/css/xadmin.css">
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="./static/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./static/js/xadmin.js"></script>
    </head>
    <body>
    <input type="text" id="token" value={{.token}} hidden=true>
    <dialog open id="modalAdd" class="x-body layui-anim layui-anim-up" hidden=true style = "center;">
        <form action="role" method="post" class="layui-form layui-form-pane">
            <input id="rolename" name="rolename" placeholder="角色名"  type="text" lay-verify="required" class="layui-input" >
            <hr class="hr15">
            权限列表:
            {{range .permissions}}
              <br>
              <input id={{.Id}} name="cbPower" type="checkbox" value={{.Id}}>
              <label for={{.Id}}>{{.Name}}</label>
            {{end}}
            <br>
            <br>
            <input value="新增" class="layui-btn" style="width:100%;" type="button" onclick="addRole()">
            <br>
            <br>
            <input value="关闭" class="layui-btn" style="width:100%;" type="button" onclick="closeModalAdd()">
            <hr class="hr20" >
        </form>
    </dialog>
    
    <dialog open id="modalModify" class="x-body layui-anim layui-anim-up" hidden=true style = "center;">
        <form action="role" method="put" class="layui-form layui-form-pane">
            <input id="modify_id" hidden=true type="text">
            <input id="rolenamemodify" name="rolenamemodify" placeholder="角色名"  type="text" lay-verify="required" class="layui-input" >
            <hr class="hr15">
            权限列表:
            <tb>
            <tb>
            {{range .permissions}}
              <br>
              <input id={{.Id}} name="cbPowerModify" type="checkbox" value={{.Id}}>
              <label for={{.Id}}>{{.Name}}</label>
            {{end}}
            <br>
            <br>
            <input value="修改" class="layui-btn" style="width:100%;" type="button" onclick="modifyRole()">
            <br>
            <br>
            <input value="关闭" class="layui-btn" style="width:100%;" type="button" onclick="closeModifyRole()">
            <hr class="hr20" >
        </form>
    </dialog>

    <input class="layui-btn" type="button" onclick="OpenAddRole()" value=新增角色>
    <br>
    <br>
    <table border="1">
      <thead>
        <th style="width:256px;">操作</th>
        <th style="width:64px;">ID</th>
        <th style="width:128px;">角色名</th>
        <th style="width:512px;">权限列表</th>
      </thead>
      <tbody>
        {{range .roles}}
          <tr>
            <td style = "text-align:center;">
              <input class="layui-btn" type="button" onclick="OpenModifyRole({{.Id}}, {{.Name}})" value=修改>
              {{"   | "}}
              <input class="layui-btn" type="button" onclick="clickDelete({{.Id}})" value=删除>
            </tb>
            <td style = "text-align:center;">{{.Id}}</td>
            <td style = "text-align:center;">{{.Name}}</td>
            <td style = "text-align:center;">{{PermissionToStr .Permission}}</td>
          </tr>
        {{end}}
      </tbody>
    </table>
    <script language="JavaScript">
      function OpenAddRole() {
        document.getElementById("modalAdd").hidden = false;
      }
      function closeModalAdd() {
        document.getElementById("modalAdd").hidden = true;
      }
      function addRole() {
        document.getElementById("modalAdd").hidden = true;
        var name = document.getElementById("rolename").value;
        var token = document.getElementById("token").value;
        var arr = new Array();
        $("input[name='cbPower']:checked").each(function(i) {
          var val = $(this).val();
          arr.push(val);
        })
        var value=0;
        for (var i=0;i<arr.length;i++ ){
          value=value | 1 << parseInt(arr[i]);
        }
        
        var text;
        text = "permission=" + encodeURI(value) + "&name=" + name + "&token=" + encodeURI(token);

        $.ajax({
          type:"post",
          url:"role?" + text,
          success:function (data) {
            if (data.status){
              window.location.href="/role";
              if (data.info){
                layer.msg(data.info,{icon:1,time:1000});
              }
            }else{
              if (data.info){
                alert(data.info);
              }else{
                window.location.href="/accountlogin";
              }
            }
          }
        });
      }

      function OpenModifyRole(id, name) {
        document.getElementById("modify_id").value = id;
        document.getElementById("rolenamemodify").value = name;
        document.getElementById("modalModify").hidden = false;
      }
      function closeModifyRole() {
        document.getElementById("modalModify").hidden = true;
      }

      function modifyRole () {
        document.getElementById("modalModify").hidden = true;

        var id = document.getElementById("modify_id").value;
        var name = document.getElementById("rolenamemodify").value;
        var token = document.getElementById("token").value;
        var arr = new Array();
        $("input[name='cbPowerModify']:checked").each(function(i) {
          var val = $(this).val();
          arr.push(val);
        })
        var value=0;
        for (var i=0;i<arr.length;i++ ){
          value=value | 1 << parseInt(arr[i]);
        }
        
        var text;
        text = "permission=" + encodeURI(value) + "&name=" + name + "&token=" + encodeURI(token);
        text += "&id=" + encodeURI(id);

        $.ajax({
          type:"put",
          url:"role?" + text,
          success:function (data) {
            if (data.status){
              window.location.href="/role";
              if (data.info){
                layer.msg(data.info,{icon:1,time:1000});
              }
            }else{
              if (data.info){
                alert(data.info);
              }else{
                window.location.href="/accountlogin";
              }
            }
          }
        });
      }
      
      function clickDelete (id) {
        var token = document.getElementById("token").value;
        var text = "id=" + encodeURI(id) + "&action=delete";
        text += "&token=" + encodeURI(token);
        
        $.ajax({
          type:"delete",
          url:"/role?" + text,
          success:function (data) {
            // alert(data.status);
            if (data.status){
              window.location.href="/role";
              if (data.info){
                layer.msg(data.info,{icon:1,time:1000});
              }
            }else{
              if (data.info){
                alert(data.info);
              }else{
                window.location.href="/accountlogin";
              }
            }
          }
        });
      }
    </script>
    </body>
</html>