<!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 onload="InitParams({{.AwardList}}, {{.ConditionList}}, {{.ItemList}})">
    <input type="text" id="token" value={{.token}} hidden=true>
    <div class="x-body layui-anim layui-anim-up">
        <blockquote class="layui-elem-quote">
          <input class="layui-btn" type="button" onclick="OpenAddItem()" value=新增>
          {{"    "}}
          <input class="layui-btn" type="button" onclick="Refresh()" value=刷新>
        </blockquote>
    </div>
    <dialog open id="modalAdd" class="x-body layui-anim layui-anim-up" hidden=true style = "center;">
        <form action="roll" method="post" class="layui-form layui-form-pane">
            房间名
            <input id="name" name="name" placeholder="房间名"  type="text" lay-verify="required" class="layui-input">
            <br>
            限制绑定推广码
            <input id="bandShareCode" name="bandShareCode" placeholder="限制绑定推广码"  type="text" lay-verify="required" class="layui-input">
            <br>
            开始展示时间
            <input id="showStartTime" name="showStartTime" placeholder="开始展示时间"  type="text" lay-verify="required" class="layui-input">
            <br>
            报名开始时间
            <input id="signupStartTime" name="signupStartTime" placeholder="报名开始时间"  type="text" lay-verify="required" class="layui-input">
            <br>
            报名结束时间
            <input id="signupEndTime" name="signupEndTime" placeholder="兑报名结束时间换码"  type="text" lay-verify="required" class="layui-input">
            <br>
            开奖时间
            <input id="awardTime" name="awardTime" placeholder="开奖时间"  type="text" lay-verify="required" class="layui-input">
            <br>
            奖励方案
            <select id="award_id">
              {{range .AwardList}}
                <option value={{.Id}}>{{BeegoItemNameList .ItemIdList}}</option>
              {{end}}
            </select>
            <hr class="hr15">
            条件列表
            <table class="radio-table" border="1" id="tb_condition_add">
              <thead>
                <th style="width:256px;">条件类型</th>
                <th style="width:100px;">需求值</th>
                <th style="width:128px;">操作</th>
              </thead>
            </table>
            <br>
            <input class="layui-btn" type="button" onclick="modalAddCondition()" value=新增条件>
            <hr class="hr15">
            <input value="新增" class="layui-btn" style="width:100%;" type="button" onclick="addRoll()">
            <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="roll" method="put" class="layui-form layui-form-pane">
            <input id="id_modify" hidden=true type="text">
            房间名
            <input id="name_modify" name="name" placeholder="房间名"  type="text" lay-verify="required" class="layui-input">
            <br>
            限制绑定推广码
            <input id="bandShareCode_modify" name="bandShareCode" placeholder="限制绑定推广码"  type="text" lay-verify="required" class="layui-input">
            <br>
            开始展示时间
            <input id="showStartTime_modify" name="showStartTime" placeholder="开始展示时间"  type="text" lay-verify="required" class="layui-input">
            <br>
            报名开始时间
            <input id="signupStartTime_modify" name="signupStartTime" placeholder="报名开始时间"  type="text" lay-verify="required" class="layui-input">
            <br>
            报名结束时间
            <input id="signupEndTime_modify" name="signupEndTime" placeholder="兑报名结束时间换码"  type="text" lay-verify="required" class="layui-input">
            <br>
            开奖时间
            <input id="awardTime_modify" name="awardTime" placeholder="开奖时间"  type="text" lay-verify="required" class="layui-input">
            <br>
            奖励方案
            <select id="award_id_modify">
              {{range .AwardList}}
                <option value={{.Id}}>{{BeegoItemNameList .ItemIdList}}</option>
              {{end}}
            </select>
            <hr class="hr15">
            条件列表
            <table class="radio-table" border="1" id="tb_condition_modify">
              <thead>
                <th style="width:256px;">条件类型</th>
                <th style="width:100px;">需求值</th>
                <th style="width:128px;">操作</th>
              </thead>
            </table>
            <br>
            <input class="layui-btn" type="button" onclick="modalAddCondition()" value=新增条件>
            <hr class="hr15">
            <input value="修改" class="layui-btn" style="width:100%;" type="button" onclick="modifyRoll()">
            <br>
            <br>
            <input value="关闭" class="layui-btn" style="width:100%;" type="button" onclick="closeModalModify()">
            <hr class="hr20">
        </form>
    </dialog>
    <dialog open id="modalModifyCondition" class="x-body layui-anim layui-anim-up" hidden=true style = "center;">
        <form class="layui-form layui-form-pane">
            条件类型
            <select id="condition">
              {{range .ConditionList}}
                <option value={{.KeyCondition}}>{{.Name}}</option>
              {{end}}
            </select>
            <br>
            需求值
            <input id="conditionValue" name="conditionValue" placeholder="需求值"  type="text" lay-verify="required" class="layui-input">
            <hr class="hr15">
            <input id="btn" value="新增" class="layui-btn" style="width:100%;" type="button" onclick="addCondition()">
            <br>
            <br>
            <input value="关闭" class="layui-btn" style="width:100%;" type="button" onclick="closeModalCondtion()">
            <hr class="hr20" >
        </form>
    </dialog>
    <dialog open id="modalCondition" class="x-body layui-anim layui-anim-up" hidden=true style = "center;">
        <form action="roll" method="put" class="layui-form layui-form-pane">
            条件列表
            <table class="radio-table" border="1" id="tb_condition">
              <thead>
                <th style="width:256px;">需求类型</th>
                <th style="width:100px;">需求值</th>
              </thead>
            </table>
            <hr class="hr15">
            <input value="关闭" class="layui-btn" style="width:100%;" type="button" onclick="closeModalCondition()">
            <hr class="hr20" >
        </form>
    </dialog>
    <dialog open id="modalItems" class="x-body layui-anim layui-anim-up" hidden=true style = "center;">
        <form action="roll" method="put" class="layui-form layui-form-pane">
            总价值
            <input id="totalPrice" type="text" lay-verify="required" class="layui-input", disabled="disabled">
            <br>
            奖励道具列表
            <table class="radio-table" border="1" id="tb_items">
              <thead>
                <th style="width:256px;">道具名称</th>
                <th style="width:100px;">价值</th>
              </thead>
            </table>
            <hr class="hr15">
            <input value="关闭" class="layui-btn" style="width:100%;" type="button" onclick="closeModalItems()">
            <hr class="hr20" >
        </form>
    </dialog>
    <dialog open id="modalPlayer" class="x-body layui-anim layui-anim-up" hidden=true style = "center;">
        <form action="roll" method="put" class="layui-form layui-form-pane">
            参与玩家列表
            <table class="radio-table" border="1" id="tb_players">
              <thead>
                <th style="width:100px;">玩家ID</th>
              </thead>
            </table>
            <hr class="hr15">
            <input value="关闭" class="layui-btn" style="width:100%;" type="button" onclick="closeModalPlayer()">
            <hr class="hr20" >
        </form>
    </dialog>
    <table class="radio-table" border="1">
      <thead>
        <th style="width:256px;">操作</th>
        <th style="width:64px;">活动ID</th>
        <th style="width:100px;">房间名</th>
        <th style="width:128px;">限制绑定推广码</th>
        <th style="width:256px;">创建时间</th>
        <th style="width:256px;">开始展示时间</th>
        <th style="width:256px;">报名开始时间</th>
        <th style="width:256px;">报名结束时间</th>
        <th style="width:256px;">开奖时间</th>
        <th style="width:128px;">参与条件列表</th>
        <th style="width:128px;">奖励物品ID列表</th>
        <th style="width:128px;">报名玩家ID列表列表</th>
      </thead>
      <tbody>
        {{range .infoList}}
          <tr>
            <td style = "text-align:center;">
              <input class="layui-btn" type="button" onclick="OpenModifyItem({{.Id}}, {{.Name}}, {{.BandShareCode}}, {{TimeToStr .ShowStartTime}}, {{TimeToStr .SignupStartTime}}, {{TimeToStr .SignupEndTime}}, {{TimeToStr .AwardTime}}, {{.Conditions}}, {{.ItemIdList}})" value=修改>
              {{"   | "}}
              <input class="layui-btn" type="button" onclick="clickDelete({{.Id}})" value=删除>
            </td>
            <td style = "text-align:center;">{{.Id}}</td>
            <td style = "text-align:center;">{{.Name}}</td>
            <td style = "text-align:center;">{{.BandShareCode}}</td>
            <td style = "text-align:center;">{{TimeToStr .CreateTime}}</td>
            <td style = "text-align:center;">{{TimeToStr .ShowStartTime}}</td>
            <td style = "text-align:center;">{{TimeToStr .SignupStartTime}}</td>
            <td style = "text-align:center;">{{TimeToStr .SignupEndTime}}</td>
            <td style = "text-align:center;">{{TimeToStr .AwardTime}}</td>
            <td style = "text-align:center;">
              <input class="layui-btn" type="button" onclick="ShowConditions({{.Conditions}})" value=展示>
            </td>
            <td style = "text-align:center;">
              <input class="layui-btn" type="button" onclick="ShowItems({{.ItemIdList}})" value=展示>
            </td>
            <td style = "text-align:center;">
              <input class="layui-btn" type="button" onclick="ShowPlayers({{.SignupUidList}})" value=展示>
            </td>
          </tr>
        {{end}}
      </tbody>
    </table>
    <script language="JavaScript">
      var isModelAdd = true
      var _ItemList = [];
      var _ConditionList = [];

      function InitParams(awardList, conditionList, itemList) {
        console.log("InitParams");
        _ConditionList = conditionList;
        _ItemList = itemList;
      }
      
      function Refresh() {
        var token = document.getElementById("token").value;
        var text = "token=" + encodeURI(token);
        text += "&action=update";
        
        $.ajax({
          type:"get",
          url:"/roll?" + text,
          success:function (data) {
            // alert(data.status);
            if (data.status){
              window.location.href="/roll";
              if (data.info){
                layer.msg(data.info,{icon:1,time:1000});
              }
            }else{
              if (data.info){
                alert(data.info);
              }else{
                window.location.href="/accountlogin";
              }
            }
          }
        });
      }
      
      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)}`
      }

      function getConditionName(key) {
        for (var i = 0; i < _ConditionList.length; i ++){
          if (_ConditionList[i].KeyCondition == key){
            return _ConditionList[i].Name
          }
        }
        return ""
      }
      
      // 道具名称
      function getItemName(itemId) {
        var id = parseInt(itemId)
        for (var i = 0; i < _ItemList.length; i ++){
          if (_ItemList[i].id == id){
            return _ItemList[i].name
          }
        }
        return ""
      }
      // 道具价格
      function getItemPrice(itemId) {
        var id = parseInt(itemId)
        for (var i = 0; i < _ItemList.length; i ++){
          if (_ItemList[i].id == id){
            return _ItemList[i].price
          }
        }
        return ""
      }
      // 展示条件列表
      function ShowConditions(conditions) {
        var obj = document.getElementById("tb_condition")
        var tbody = obj.getElementsByTagName("tbody")[0];
        if (tbody) {
          if (-[1,]) {
            obj.removeChild(tbody);
          }else{
            obj.removeNode(tbody);
          }
        }

        if (conditions.length > 0 && conditions[0] != "") {
          tbody = document.createElement("tbody")
          for (var i = 0; i < conditions.length; i++){
            var tr = document.createElement("tr")

            var td1 = document.createElement("td")
            td1.style = "text-align:center;"
            td1.innerHTML = getConditionName(conditions[i].c)
            tr.appendChild(td1)

            var td2 = document.createElement("td")
            td2.style = "text-align:center;"
            td2.innerHTML = conditions[i].cv
            tr.appendChild(td2)

            tbody.appendChild(tr)
          }
          obj.appendChild(tbody)
        }
        document.getElementById("modalCondition").hidden = false;
      }
      function closeModalCondition() {
        document.getElementById("modalCondition").hidden = true;
      }
      // 展示奖励列表
      function ShowItems(itemIdList) {
        var obj = document.getElementById("tb_items")
        var tbody = obj.getElementsByTagName("tbody")[0];
        if (tbody) {
          if (-[1,]) {
            obj.removeChild(tbody);
          }else{
            obj.removeNode(tbody);
          }
        }

        var totalPrice = 0;
        if (itemIdList.length > 0 && itemIdList[0] != "") {
          tbody = document.createElement("tbody")
          for (var i = 0; i < itemIdList.length; i++){
            var tr = document.createElement("tr");

            var td1 = document.createElement("td");
            td1.style = "text-align:center;";
            td1.innerHTML = getItemName(itemIdList[i]);
            tr.appendChild(td1);

            var price = getItemPrice(itemIdList[i]);
            totalPrice += price;
            var td2 = document.createElement("td")
            td2.style = "text-align:center;"
            td2.innerHTML = price+"分"
            tr.appendChild(td2)

            tbody.appendChild(tr)
          }
          obj.appendChild(tbody)
        }
        document.getElementById("totalPrice").value = totalPrice+"分";

        document.getElementById("modalItems").hidden = false;
      }
      function closeModalItems() {
        document.getElementById("modalItems").hidden = true;
      }
      // 展示玩家列表
      function ShowPlayers(signupUidList) {
        var obj = document.getElementById("tb_players")
        var tbody = obj.getElementsByTagName("tbody")[0];
        if (tbody) {
          if (-[1,]) {
            obj.removeChild(tbody);
          }else{
            obj.removeNode(tbody);
          }
        }

        if (signupUidList != null && signupUidList.length > 0 && signupUidList[0] != "") {
          tbody = document.createElement("tbody")
          for (var i = 0; i < signupUidList.length; i++){
            var tr = document.createElement("tr");

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

            tbody.appendChild(tr)
          }
          obj.appendChild(tbody)
        }
        document.getElementById("modalPlayer").hidden = false;
      }
      function closeModalPlayer() {
        document.getElementById("modalPlayer").hidden = true;
      }

      // 刷新条件列表
      var conList = [];
      function refreshTableCondition() {
        var key = "tb_condition_add"
        if (isModelAdd == false){key = "tb_condition_modify"}
        var obj = document.getElementById(key)
        var tbody = obj.getElementsByTagName("tbody")[0];
        if (tbody) {
          if (-[1,]) {
            obj.removeChild(tbody);
          }else{
            obj.removeNode(tbody);
          }
        }

        if (conList.length > 0 && conList[0] != "") {
          tbody = document.createElement("tbody")
          for (var i = 0; i < conList.length; i++){
            var tr = document.createElement("tr")

            var td1 = document.createElement("td")
            td1.style = "text-align:center;"
            td1.innerHTML = getConditionName(conList[i].c)
            tr.appendChild(td1)

            var td2 = document.createElement("td")
            td2.style = "text-align:center;"
            td2.innerHTML = conList[i].cv
            tr.appendChild(td2)

            console.info("refreshTableCondition :"+conList[i].c)
            var td4 = document.createElement("td")
            td4.style = "text-align:center;"
            td4.innerHTML = '<input class="layui-btn" type="button" onclick="conditionDelete(' + i + ')" value=删除>'
            tr.appendChild(td4)

            tbody.appendChild(tr)
          }
          obj.appendChild(tbody)
        }
      }
      // 物品弹窗
      function modalAddCondition() {
        refreshTableCondition()

        document.getElementById("modalModifyCondition").hidden = false;
      }
      function closeModalCondtion() {
        document.getElementById("modalModifyCondition").hidden = true;
      }
      function addCondition() {
        var condition = document.getElementById("condition").value;
        var conditionValue = document.getElementById("conditionValue").value;
        console.log("addCondition conditionValue:" + conditionValue)

        if (condition == null || condition == ""){
          alert("请选择条件类型");
          return;
        }
        if (conditionValue == NaN || conditionValue == ""){
          alert("请输入需求值");
          return;
        }
        var _val = parseInt(conditionValue)
        if (_val <= 0) {
          alert("请输入正确需求值");
          return;
        }
        if (conList.length > 0){
          for (var i = 0; i < conList.length; i ++){
            if (conList[i].c == condition) {
              alert("已存在该条件类型！请重新选择");
              return;
            }
          }
        }
        conList.push({'c':condition, 'cv':_val})
        refreshTableCondition()
        document.getElementById("modalModifyCondition").hidden = true;
      }
      // 删除物品
      function conditionDelete(index) {
        console.log("conditionDelete index:" + index)
        conList.splice(index, 1);
        refreshTableCondition()
        document.getElementById("modalModifyCondition").hidden = true;
      }

      function OpenAddItem() {
        isModelAdd = true
        conList = []
        
        var dateTime = new Date();
        document.getElementById("showStartTime").value = formaData(dateTime);
        dateTime = dateTime.setDate(dateTime.getDate()+7);
        dateTime = new Date(dateTime);
        document.getElementById("signupStartTime").value = formaData(dateTime);
        dateTime = dateTime.setDate(dateTime.getDate()+30);
        dateTime = new Date(dateTime);
        document.getElementById("signupEndTime").value = formaData(dateTime);
        dateTime = dateTime.setDate(dateTime.getDate()+1);
        dateTime = new Date(dateTime);
        document.getElementById("awardTime").value = formaData(dateTime);

        document.getElementById("modalAdd").hidden = false;
      }
      function closeModalAdd() {
        document.getElementById("modalAdd").hidden = true;
      }
      function addRoll () {
        var token = document.getElementById("token").value;
        var name = document.getElementById("name").value;
        var bandShareCode = document.getElementById("bandShareCode").value;
        var showStartTime = document.getElementById("showStartTime").value;
        var signupStartTime = document.getElementById("signupStartTime").value;
        var signupEndTime = document.getElementById("signupEndTime").value;
        var awardTime = document.getElementById("awardTime").value;
        var award_id = document.getElementById("award_id").value;

        if (name == ""){
          alert("请设置房间名");
          return;
        }
        if (showStartTime == ""){
          alert("请设置开始展示时间");
          return;
        }
        if (signupStartTime == ""){
          alert("请设置报名开始时间");
          return;
        }
        if (signupEndTime == ""){
          alert("请设置报名结束时间");
          return;
        }
        if (awardTime == ""){
          alert("请设置开奖时间");
          return;
        }
        if (award_id == ""){
          alert("请设置奖励方案");
          return;
        }
        if (conList.length <= 0){
          alert("请设置参与条件");
          return;
        }

        var text = "token=" + encodeURI(token);
        text += "&name=" + encodeURI(name);
        text += "&bandShareCode=" + encodeURI(bandShareCode);
        text += "&showStartTime=" + encodeURI(showStartTime);
        text += "&signupStartTime=" + encodeURI(signupStartTime);
        text += "&signupEndTime=" + encodeURI(signupEndTime);
        text += "&awardTime=" + encodeURI(awardTime);
        text += "&awardId=" + encodeURI(award_id);
        text += "&conditionList=" + encodeURI(JSON.stringify(conList));

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


      function OpenModifyItem(id, name, bandShareCode, showStartTime, signupStartTime, signupEndTime, awardTime, conditions, itemIdList) {
        isModelAdd = false;

        document.getElementById("id_modify").value = id;
        document.getElementById("name_modify").value = name;
        document.getElementById("bandShareCode_modify").value = bandShareCode;
        document.getElementById("showStartTime_modify").value = showStartTime;
        document.getElementById("signupStartTime_modify").value = signupStartTime;
        document.getElementById("signupEndTime_modify").value = signupEndTime;
        document.getElementById("awardTime_modify").value = awardTime;

        conList = []
        if (conditions != null && conditions.length > 0) {
          for (var i = 0; i < conditions.length; i ++) {
            conList.push({'c':conditions[i].c, 'cv':conditions[i].cv})
          }
        }
        
        refreshTableCondition()

        document.getElementById("modalModify").hidden = false;
      }
      function closeModalModify() {
        document.getElementById("modalModify").hidden = true;
      }

      function modifyRoll () {
        var token = document.getElementById("token").value;
        var id = document.getElementById("id_modify").value;
        var name = document.getElementById("name_modify").value;
        var bandShareCode = document.getElementById("bandShareCode_modify").value;
        var showStartTime = document.getElementById("showStartTime_modify").value;
        var signupStartTime = document.getElementById("signupStartTime_modify").value;
        var signupEndTime = document.getElementById("signupEndTime_modify").value;
        var awardTime = document.getElementById("awardTime_modify").value;
        var awardId = document.getElementById("award_id_modify").value;

        if (name == ""){
          alert("请设置房间名");
          return;
        }
        if (showStartTime == ""){
          alert("请设置开始展示时间");
          return;
        }
        if (signupStartTime == ""){
          alert("请设置报名开始时间");
          return;
        }
        if (signupEndTime == ""){
          alert("请设置报名结束时间");
          return;
        }
        if (awardTime == ""){
          alert("请设置开奖时间");
          return;
        }
        if (awardId == ""){
          alert("请设置奖励方案");
          return;
        }
        if (conList.length <= 0){
          alert("请设置参与条件");
          return;
        }

        var text = "token=" + encodeURI(token);
        text += "&id=" + encodeURI(id);
        text += "&name=" + encodeURI(name);
        text += "&bandShareCode=" + encodeURI(bandShareCode);
        text += "&showStartTime=" + encodeURI(showStartTime);
        text += "&signupStartTime=" + encodeURI(signupStartTime);
        text += "&signupEndTime=" + encodeURI(signupEndTime);
        text += "&awardTime=" + encodeURI(awardTime);
        text += "&awardId=" + encodeURI(awardId);
        text += "&conditionList=" + encodeURI(JSON.stringify(conList));

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

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