<!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>
    <div class="x-body layui-anim layui-anim-up">
        <blockquote class="layui-elem-quote">
          邮件类型:
          <select name="" id="mail_ty" onchange="gradeChange(this.options[this.options.selectedIndex].value)">
            <option value="ROLE">玩家</option>
            <option value="SERVER">服务器</option>
          </select>
          <br>
          <br>
          <input id="title" name="title" placeholder="邮件标题"  type="text" lay-verify="required" class="layui-input">
          <br>
          <input id="content" name="content" placeholder="邮件内容"  type="text" lay-verify="required" class="layui-input">
          <hr class="hr15">
          <input id="effect_days" name="effect_days" placeholder="有效天数"  type="number" lay-verify="required" class="layui-input">
          <br>
          有效注册时间止:
          <input id="register_time" name="register_time" placeholder="有效注册时间止"  type="text" lay-verify="required" class="layui-input">
          <hr class="hr15">
          <input id="items" name="items" disabled="disabled" placeholder="邮件物品"  type="text" lay-verify="required" class="layui-input">
          <br>
          <input class="layui-btn" type="button" onclick="modalAddItem()" value=新增>
          <hr class="hr15">
          <input id="uidList" name="uidList" disabled="disabled" placeholder="玩家ID列表"  type="text" lay-verify="required" class="layui-input">
          <input id="sidList" name="sidList" disabled="disabled" placeholder="服务器ID列表"  type="hidden" lay-verify="required" class="layui-input">
          <br>
          <input id="btn_add_player" class="layui-btn" type="button" onclick="modalAddPlayer()" value=新增玩家>
          <input id="btn_add_server" class="layui-btn" type="hidden" onclick="modalAddServer()" value=新增服务器ID>
          <hr class="hr15">
          <input class="layui-btn" type="button" onclick="sendMail()" value=发送>
        </blockquote>
    </div>
    <dialog open id="modalItem" class="x-body layui-anim layui-anim-up" hidden=true style = "center;">
        <form class="layui-form layui-form-pane">
            <input id="item_id" name="item_id" placeholder="物品ID"  type="number" lay-verify="required" class="layui-input">
            <br>
            <input id="item_count" name="item_count" placeholder="物品数量"  type="number" lay-verify="required" class="layui-input">
            <hr class="hr15">
            <input id="btn" value="新增" class="layui-btn" style="width:100%;" type="button" onclick="addItem()">
            <br>
            <br>
            <input value="关闭" class="layui-btn" style="width:100%;" type="button" onclick="closeModalItem()">
            <hr class="hr15">
            <table class="radio-table" border="1" id="tb_item">
              <thead>
                <th style="width:100px;">物品ID</th>
                <th style="width:100px;">物品数量</th>
                <th style="width:256px;">操作</th>
              </thead>
            </table>
            <hr class="hr20" >
        </form>
    </dialog>
    <dialog open id="modalPlayer" class="x-body layui-anim layui-anim-up" hidden=true style = "center;">
        <form class="layui-form layui-form-pane">
            <input id="player_id" name="item_id" placeholder="角色ID"  type="number" lay-verify="required" class="layui-input">
            <hr class="hr15">
            <input id="btn" value="新增" class="layui-btn" style="width:100%;" type="button" onclick="addPlayer()">
            <br>
            <br>
            <input value="关闭" class="layui-btn" style="width:100%;" type="button" onclick="closeModalPlayer()">
            <hr class="hr15">
            <table class="radio-table" border="1" id="tb_player">
              <thead>
                <th style="width:100px;">玩家ID</th>
                <th style="width:256px;">操作</th>
              </thead>
            </table>
            <hr class="hr20" >
        </form>
    </dialog>
    <dialog open id="modalServer" class="x-body layui-anim layui-anim-up" hidden=true style = "center;">
        <form class="layui-form layui-form-pane">
            <select name="" id="server_id" onchange="gradeServerChange(this.options[this.options.selectedIndex].value)">
              {{range .ServerList}}
                <option value={{.ServerId}}>{{.ServerName}}</option>
              {{end}}
            </select>
            <hr class="hr15">
            <input id="btn" value="新增" class="layui-btn" style="width:100%;" type="button" onclick="addServer()">
            <br>
            <br>
            <input value="关闭" class="layui-btn" style="width:100%;" type="button" onclick="closeModalServer()">
            <hr class="hr15">
            <table class="radio-table" border="1" id="tb_server">
              <thead>
                <th style="width:100px;">服务器ID</th>
                <th style="width:256px;">操作</th>
              </thead>
            </table>
            <hr class="hr20" >
        </form>
    </dialog>
    <script language="JavaScript">
      function formaData(timer) {
          const year = timer.getFullYear()
          const month = (timer.getMonth() + 1).toString().padStart(2, '0') // 由于月份从0开始，因此需加1
          const day = timer.getDate().toString().padStart(2, '0')
          const hour = timer.getHours().toString().padStart(2, '0')
          const minute = timer.getMinutes().toString().padStart(2, '0')
          const second = timer.getSeconds().toString().padStart(2, '0')
          return `${(year)}-${(month)}-${(day)} ${(hour)}:${(minute)}:${(second)}`
      }
      var timer = new Date();
      document.getElementById("register_time").value = formaData(timer);

      function gradeChange(tx){
        if (tx == "ROLE") {
          document.getElementById("uidList").type = "text"
          document.getElementById("btn_add_player").type = "button"
          document.getElementById("sidList").type = "hidden"
          document.getElementById("btn_add_server").type = "hidden"
        }else{
          document.getElementById("uidList").type = "hidden"
          document.getElementById("btn_add_player").type = "hidden"
          document.getElementById("sidList").type = "text"
          document.getElementById("btn_add_server").type = "button"
        }
        var timer = new Date();
        document.getElementById("register_time").value = formaData(timer);
      }
      
      // 物品弹窗
      function modalAddItem() {
        var items = document.getElementById("items").value;
        console.log("modalAddItem items:"+items)

        var obj = document.getElementById("tb_item")
        var tbody = obj.getElementsByTagName("tbody")[0];
        if (tbody) {
          if (-[1,]) {
            obj.removeChild(tbody);
          }else{
            obj.removeNode(tbody);
          }
        }

        var arrItems = items.split("|")
        if (arrItems.length > 0 && arrItems[0] != "") {
          tbody = document.createElement("tbody")
          for (var i = 0; i < arrItems.length; i++){
            var arrItem = arrItems[i].split(":")
            var tr = document.createElement("tr")

            var td1 = document.createElement("td")
            td1.style = "text-align:center;"
            td1.innerHTML = arrItem[0]
            tr.appendChild(td1)
            
            var td2 = document.createElement("td")
            td2.style = "text-align:center;"
            td2.innerHTML = arrItem[1]
            tr.appendChild(td2)

            var td3 = document.createElement("td")
            td3.style = "text-align:center;"
            td3.innerHTML = '<input class="layui-btn" type="button" onclick="itemDelete(' + arrItem[0] + ')" value=删除>'
            tr.appendChild(td3)

            tbody.appendChild(tr)
          }
          obj.appendChild(tbody)
        }
        
        document.getElementById("modalItem").hidden = false;
      }
      function closeModalItem() {
        document.getElementById("modalItem").hidden = true;
      }
      function addItem() {
        var item_id = document.getElementById("item_id").value;
        var item_count = document.getElementById("item_count").value;
        var items = document.getElementById("items").value;

        // 转化物品表
        var mapItem = new Map();
        var arrItems = items.split("|")
        if (arrItems.length > 0 && arrItems[0] != "") {
          for (var i = 0; i < arrItems.length; i++){
            var arrItem = arrItems[i].split(":")
            mapItem.set(arrItem[0], parseInt(arrItem[1]))
          }
        }
        var count = parseInt(item_count)
        if (mapItem.get(item_id)) {
          count += mapItem.get(item_id)
        }
        mapItem.set(item_id, count)
        // 更新物品列表
        items = ""
        for (var i of mapItem) {
          if (items != "") {
            items += "|"
          }
          items += i[0] + ":" + i[1]
        }
        document.getElementById("items").value = items
        document.getElementById("modalItem").hidden = true;
      }
      // 删除物品
      function itemDelete(itemId) {
        var items = document.getElementById("items").value;

        // 转化物品表
        var mapItem = new Map();
        var arrItems = items.split("|");
        if (arrItems.length > 0 && arrItems[0] != "") {
          for (var i = 0; i < arrItems.length; i++){
            var arrItem = arrItems[i].split(":");
            mapItem.set(arrItem[0], parseInt(arrItem[1]));
          }
        }
        mapItem.delete(itemId);
        // 更新物品列表
        items = "";
        for (var i of mapItem) {
          console.log(i);
          if(i[0] != itemId){
            if (items != "") {
              items += "|"
            }
            items += i[0] + ":" + i[1];
          }
        }
        console.log(items);
        document.getElementById("items").value = items;
        document.getElementById("modalItem").hidden = true;
      }

      // 玩家
      function modalAddPlayer() {
        var uidList = document.getElementById("uidList").value;

        var arrPlayer = uidList.split("|")
        if (arrPlayer.length > 0 && arrPlayer[0] != "") {
          var obj = document.getElementById("tb_player")
          var tbody = obj.getElementsByTagName("tbody")[0];
          if (tbody) {
            if (-[1,]) {
              obj.removeChild(tbody);
            }else{
              obj.removeNode(tbody);
            }
          }
          tbody = document.createElement("tbody")
          for (var i = 0; i < arrPlayer.length; i++){
            var uid = arrPlayer[i]
            var tr = document.createElement("tr")

            var td1 = document.createElement("td")
            td1.style = "text-align:center;"
            td1.innerHTML = uid
            tr.appendChild(td1)

            var td3 = document.createElement("td")
            td3.style = "text-align:center;"
            td3.innerHTML = '<input class="layui-btn" type="button" onclick="playerDelete(' + uid + ')" value=删除>'
            tr.appendChild(td3)

            tbody.appendChild(tr)
          }
          obj.appendChild(tbody)
        }
        
        document.getElementById("modalPlayer").hidden = false;
      }
      function closeModalPlayer() {
        document.getElementById("modalPlayer").hidden = true;
      }
      // 新增玩家
      function addPlayer() {
        var player_id = document.getElementById("player_id").value;
        var uidList = document.getElementById("uidList").value;

        var arrPlayer = uidList.split("|")
        for (var i = 0; i < arrPlayer.length; i++) {
          if (player_id == arrPlayer[i]) {
            alert("玩家"+player_id+"已在列表中")
            return
          }
        }
        arrPlayer.push(player_id)
        uidList = ""
        for (var i = 0; i < arrPlayer.length; i++) {
          if (uidList != "") {
            uidList += "|"
          }
          uidList += arrPlayer[i]
        }
        document.getElementById("uidList").value = uidList
        document.getElementById("modalPlayer").hidden = true;
      }
      // 删除玩家
      function playerDelete(uid) {
        var uidList = document.getElementById("uidList").value;

        var arrPlayer = uidList.split("|");
        var isMatch = false;
        for (var i = 0; i < arrPlayer.length; i++) {
          if (uid == arrPlayer[i]) {
            isMatch = true;
            break;
          }
        }
        if (isMatch == false) {
          alert("玩家"+uid+"不在列表中")
          return
        }
        uidList = ""
        for (var i = 0; i < arrPlayer.length; i++) {
          if (arrPlayer[i] != uid) {
            if (uidList != "") {
              uidList += "|"
            }
            uidList += arrPlayer[i]
          }
        }
        document.getElementById("uidList").value = uidList
        document.getElementById("modalPlayer").hidden = true;
      }
      
      // 服务器ID
      function modalAddServer() {
        var sidList = document.getElementById("sidList").value;

        var arrServer = sidList.split("|")
        if (arrServer.length > 0 && arrServer[0] != "") {
          var obj = document.getElementById("tb_server")
          var tbody = obj.getElementsByTagName("tbody")[0];
          if (tbody) {
            if (-[1,]) {
              obj.removeChild(tbody);
            }else{
              obj.removeNode(tbody);
            }
          }
          tbody = document.createElement("tbody")
          for (var i = 0; i < arrServer.length; i++){
            var sid = arrServer[i]
            var tr = document.createElement("tr")

            var td1 = document.createElement("td")
            td1.style = "text-align:center;"
            td1.innerHTML = sid
            tr.appendChild(td1)

            var td3 = document.createElement("td")
            td3.style = "text-align:center;"
            td3.innerHTML = '<input class="layui-btn" type="button" onclick="serverDelete(' + sid + ')" value=删除>'
            tr.appendChild(td3)

            tbody.appendChild(tr)
          }
          obj.appendChild(tbody)
        }
        
        document.getElementById("modalServer").hidden = false;
      }
      function closeModalServer() {
        document.getElementById("modalServer").hidden = true;
      }
      // 新增服务器ID
      function addServer() {
        var server_id = document.getElementById("server_id").value;
        var sidList = document.getElementById("sidList").value;

        var arrServer = sidList.split("|")
        for (var i = 0; i < arrServer.length; i++) {
          if (server_id == arrServer[i]) {
            alert("服务器ID"+server_id+"已在列表中")
            return
          }
        }
        arrServer.push(server_id)
        sidList = ""
        for (var i = 0; i < arrServer.length; i++) {
          if (sidList != "") {
            sidList += "|"
          }
          sidList += arrServer[i]
        }
        document.getElementById("sidList").value = sidList
        document.getElementById("modalServer").hidden = true;
      }
      // 删除服务器ID
      function serverDelete(sid) {
        var sidList = document.getElementById("sidList").value;

        var arrServer = sidList.split("|");
        var isMatch = false;
        for (var i = 0; i < arrServer.length; i++) {
          if (sid == arrServer[i]) {
            isMatch = true;
            break;
          }
        }
        if (isMatch == false) {
          alert("服务器ID"+sid+"不在列表中")
          return
        }
        sidList = ""
        for (var i = 0; i < arrServer.length; i++) {
          if (arrServer[i] != sid) {
            if (sidList != "") {
              sidList += "|"
            }
            sidList += arrServer[i]
          }
        }
        document.getElementById("sidList").value = sidList
        document.getElementById("modalServer").hidden = true;
      }

      // 发送邮件
      function sendMail () {
        var token = document.getElementById("token").value;
        var mail_ty = document.getElementById("mail_ty").value;
        var title = document.getElementById("title").value;
        var content = document.getElementById("content").value;
        var effect_days = document.getElementById("effect_days").value;
        var register_time = document.getElementById("register_time").value;
        var items = document.getElementById("items").value;
        var uidList = document.getElementById("uidList").value;
        var sidList = document.getElementById("sidList").value;
        
        if (title == "") {
          alert("请输入邮件标题")
          return
        }
        if (content == "") {
          alert("请输入邮件内容")
          return
        }
        if (mail_ty == "ROLE"){
          var arrPlayer = uidList.split("|")
          if (arrPlayer[0] == "") {
            alert("请输入邮件发送玩家")
            return
          }
        }
        if (mail_ty == "SERVER"){
          var arr = sidList.split("|")
          if (arr[0] == "") {
            alert("请输入邮件发送服务器")
            return
          }
        }

        var text = "token=" + encodeURI(token);
        text += "&mail_ty=" + encodeURI(mail_ty);
        text += "&title=" + encodeURI(title);
        text += "&content=" + encodeURI(content);
        text += "&effect_days=" + encodeURI(effect_days);
        text += "&register_time=" + encodeURI(register_time);
        text += "&items=" + encodeURI(items);
        text += "&uidList=" + encodeURI(uidList);
        text += "&sidList=" + encodeURI(sidList);
        
        $.ajax({
          type:"post",
          url:"/mail?" + text,
          success:function (data) {
            // alert(data.status);
            if (data.status){
              window.location.href="/mail";
              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>