<!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="user" method="post" class="layui-form layui-form-pane">
            用户名:
            <input id="username" name="username" placeholder="用户名至少6个字符串"  type="text" lay-verify="required" class="layui-input" >
            <br>
            <br>
            密码:
            <input id="password" name="password" placeholder="密码6到32位"  type="password" lay-verify="required" class="layui-input" >
            <br>
            <br>
            确认密码:
            <input id="passwordform" name="passwordform"  type="password" lay-verify="required" class="layui-input" >
            <br>
            <br>
            权限:
            <select name="" id="permission">
              {{range .permissions}}
                <option value={{.Id}}>{{.Name}}</option>
              {{end}}
            </select>
            <br>
            <br>
            <input value="新增" class="layui-btn" style="width:100%;" type="button" onclick="addUser()">
            <br>
            <br>
            <input value="关闭" class="layui-btn" style="width:100%;" type="button" onclick="closeAddUser()">
            <hr class="hr20" >
        </form>
    </dialog>
    
    <dialog open id="modalModify" class="x-body layui-anim layui-anim-up" hidden=true style = "center;">
        <form action="user" method="put" class="layui-form layui-form-pane">
            <input id="modify_id" hidden=true type="text">
            用户名:
            <input id="usernamemodify" name="usernamemodify" placeholder="用户名至少6个字符串"  type="text" lay-verify="required" class="layui-input" >
            <br>
            <br>
            密码:
            <input id="passwordmodify" name="passwordmodify" placeholder="密码6到32位"  type="password" lay-verify="required" class="layui-input" >
            <br>
            <br>
            确认密码:
            <input id="passwordformmodify" name="passwordformmodify"  type="password" lay-verify="required" class="layui-input" >
            <br>
            <br>
            权限:
            <select name="" id="permissionmodify">
              {{range .permissions}}
                <option value={{.Id}}>{{.Name}}</option>
              {{end}}
            </select>
            <br>
            <br>
            <input value="修改" class="layui-btn" style="width:100%;" type="button" onclick="modifyUser()">
            <br>
            <br>
            <input value="关闭" class="layui-btn" style="width:100%;" type="button" onclick="closeModifyUser()">
            <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:128px;">用户名</th>
        <th style="width:128px;">角色</th>
        <th style="width:256px;">创建时间</th>
        <th style="width:256px;">最后登录时间</th>
      </thead>
      <tbody>
        {{range .users}}
          <tr>
            <td style = "text-align:center;">
              <input class="layui-btn" type="button" onclick="OpenModifyUser({{.Id}}, {{.Username}}, {{.Password}})" value=修改>
              {{"   | "}}
              <input class="layui-btn" type="button" onclick="clickDelete({{.Id}})" value=删除>
            </tb>
            <td style = "text-align:center;">{{.Username}}</td>
            <td style = "text-align:center;">{{GetRoleNameById .Role}}</td>
            <td style = "text-align:center;">{{TimeToStr .CreateTs}}</td>
            <td style = "text-align:center;">{{TimeToStr .LastLoginTs}}</td>
          </tr>
        {{end}}
      </tbody>
    </table>
    <script language="JavaScript">
      function OpenAddRole() {
        document.getElementById("modalAdd").hidden = false;
      }
      function closeAddUser() {
        document.getElementById("modalAdd").hidden = true;
      }
      function addUser() {
        
        var name = document.getElementById("username").value;
        if (name.length > 20 || name.length < 6){
          alert("用户名至少6个字符！");
          return;
        }
        var pwd = document.getElementById("password").value;
        var pwdform = document.getElementById("passwordform").value;
        if (pwd.length > 32 || pwd.length < 6){
          alert("密码至少6个且32个字符！");
          return;
        }
        if (pwd != pwdform) {
          document.getElementById("password").value = "";
          document.getElementById("passwordform").value = "";
          alert("密码不一致！");
          return;      
        }
        document.getElementById("modalAdd").hidden = true;

        var token = document.getElementById("token").value;
        var permission = document.getElementById("permission").value;
        
        var text;
        text = "permission=" + encodeURI(permission) + "&token=" + encodeURI(token);
        text += "&username=" + encodeURI(name);
        text += "&password=" + encodeURI(pwd);

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

      function OpenModifyUser(id, name, pwd) {
        document.getElementById("modify_id").value = id;
        document.getElementById("usernamemodify").value = name;
        document.getElementById("passwordmodify").value = pwd;
        document.getElementById("passwordformmodify").value = pwd;
        document.getElementById("modalModify").hidden = false;
      }
      function closeModifyUser() {
        document.getElementById("modalModify").hidden = true;
      }

      function modifyUser () {
        var name = document.getElementById("usernamemodify").value;
        if (name.length > 20 || name.length < 6){
          alert("用户名至少6个字符！");
          return;
        }
        var pwd = document.getElementById("passwordmodify").value;
        var pwdform = document.getElementById("passwordformmodify").value;
        if (pwd.length > 32 || pwd.length < 6){
          alert("密码至少6个且32个字符！");
          return;
        }
        if (pwd != pwdform) {
          document.getElementById("passwordmodify").value = "";
          document.getElementById("passwordformmodify").value = "";
          alert("密码不一致！");
          return;      
        }

        document.getElementById("modalModify").hidden = true;

        var token = document.getElementById("token").value;
        var permission = document.getElementById("permissionmodify").value;
        var id = document.getElementById("modify_id").value;
        
        var text;
        text = "permission=" + encodeURI(permission) + "&token=" + encodeURI(token);
        text += "&username=" + encodeURI(name);
        text += "&password=" + encodeURI(pwd);
        text += "&id=" + encodeURI(id);

        $.ajax({
          type:"put",
          url:"user?" + text,
          success:function (data) {
            if (data.status){
              window.location.href="/user";
              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:"/user?" + text,
          success:function (data) {
            // alert(data.status);
            if (data.status){
              window.location.href="/user";
              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>