<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php echo $_LANG['zjmf_client_nat_acl_new']; ?></title>
  <link rel="stylesheet" href="modules/servers/zjmfcloud/templates/server_innerpage/css/embed/bootstrap.min.css">
  <link rel="stylesheet" href="modules/servers/zjmfcloud/templates/server_innerpage/css/embed/layui.css">
  <link rel="stylesheet" href="modules/servers/zjmfcloud/templates/server_innerpage/css/embed/selectFilter.css">
  <link rel="stylesheet" href="modules/servers/zjmfcloud/templates/server_innerpage/css/embed/02SecurityGroup.css">
  <!-- <link rel="stylesheet" href="modules/servers/zjmfcloud/templates/server_innerpage/css/global.css"> -->
  <script src="modules/servers/zjmfcloud/templates/server_innerpage/lib/embed/jquery.min.js"></script>
  <script src="modules/servers/zjmfcloud/templates/server_innerpage/lib/embed/bootstrap.min.js"></script>
  <script src="modules/servers/zjmfcloud/templates/server_innerpage/lib/embed/sweetAlert2.min.js"></script>
</head>
<body>
  <div class="securityGroup_btn">
    <button type="button" class="layui-btn purple" data-toggle="modal" data-target="#myModal"><?php echo $_LANG['zjmf_client_nat_acl_new']; ?></button>
  </div>

  <div class="container">

    <!-- 新建NAT转发模态框 -->

    <div class="modal fade" id="myModal">

      <div class="modal-dialog">

        <div class="modal-content">

          <div class="modal-header">

            <span class="modal-title"><?php echo $_LANG['zjmf_client_nat_acl_new']; ?></span>

            <button type="button" class="close" data-dismiss="modal">&times;</button>

          </div>



          <!-- 模态框主体 -->

          <div class="modal-body">

            <div class="modal_limit">

              <div class="modal_main">

                <form>
                <div class="form-group">
                  <label for="portRange">
                    <span style="color:#f00">*</span><?php echo $_LANG['zjmf_client_nat_acl_name']; ?></label>
                    <input required name="name" type="input" class="form-control" placeholder="<?php echo $_LANG['zjmf_client_nat_acl_placeholder']; ?>">
                </div>
                <div class="form-group">
                  <label for="portRange"><?php echo $_LANG['zjmf_client_nat_web_out_port']; ?></label>
                    <input required name="ext_port" type="input" class="form-control" placeholder="<?php echo $_LANG['zjmf_client_nat_acl_out_port_placeholder']; ?>">
                </div>
                <div class="form-group">
                  <label for="portRange">
                    <span style="color:#f00">*</span><?php echo $_LANG['zjmf_client_nat_web_in_port']; ?></label>
                    <input required name="int_port" type="input" class="form-control"  placeholder="<?php echo $_LANG['zjmf_client_nat_web_in_port_input']; ?>(1-65535)">
                </div>
                <div class="form-group">
                  <label for="protocol"><span style="color:#f00">*</span><?php echo $_LANG['zjmf_client_nat_web_agree']; ?></label>  
                  <div class="selectItem">
                        <div class="protocol">
                          <div class="filter-text">
                            <input class="filter-title" type="text" readonly placeholder="<?php echo $_LANG['zjmf_client_nat_web_agree']; ?>" />
                            <i class="icon icon-filter-arrow"></i>
                          </div>
                          <select name="protocol">
							<?php foreach($protocol as $k=>$v){ ?>
                            <option value="<?php echo $k; ?>"><?php echo $v; ?></option>
							<?php } ?>
                          </select>

                        </div>

                  </div>
                </div>
                </form>

              </div>

              <div class="footer">

                <button type="button" class="btn confirm-btn createSecurityGroup" data-dismiss="modal" style="margin-left:10px"><?php echo $_LANG['zjmf_client_nat_web_confirm']; ?></button>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>
  </div>



  <table class="layui-table">

    <thead>
	  	
      <tr>
        <th style="width:200px"><?php echo $_LANG['zjmf_client_nat_acl_name_placeholder']; ?></th>
        <th><?php echo $_LANG['zjmf_client_nat_acl_port']; ?></th>
        <th><?php echo $_LANG['zjmf_client_nat_web_in_port']; ?></th>          
        <th style="width:65px"><?php echo $_LANG['zjmf_client_nat_web_agree']; ?></th>
        <th style="width:100px"><?php echo $_LANG['zjmf_client_nat_web_operation']; ?></th>

      </tr>

    </thead>

    <tbody>
		<?php foreach($nat_acl as $v){ ?>
		<tr>
        <td><?php echo $v['name']; ?></td>
        <td><?php echo $nat_host_ip.":".$v['ext_port']; ?></td>
        <td><?php echo $v['int_port']; ?></td>
        <td><?php echo $protocol[$v['protocol']]; ?></td>
			<td >
				<button type="button" class="btn btn-link deleteGroup redtxt" data-id="<?php echo $v['id']; ?>"><?php echo $_LANG['zjmf_client_nat_web_del']; ?></button>
			</td>
		</tr>
		<?php } ?>
    </tbody>

  </table>

  <div style="display: none" id="loading-circle">

    <div class="loading_limit">

      <div class="loading_inner">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

      </div>

    </div>

  </div>

  <script src="modules/servers/zjmfcloud/templates/server_innerpage/lib/embed/layui.js"></script>

  <script src="modules/servers/zjmfcloud/templates/server_innerpage/lib/embed/selectFilter.js"></script>

  <script>

  	function getUrlParam(name) {

		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象

		var r = window.location.search.substr(1).match(reg);  //匹配目标参数

		if (r != null) return decodeURI(r[2]); return null; //返回参数值

	}

    // 初始化下拉选择

    $('.direction').selectFilter({

      callBack: function (val) {

        console.log(val + '是返回的值')

      }

    });

    $('.protocol').selectFilter({

      callBack: function (val) {

        console.log(val + '是返回的值')

      }

    });

    $('.directionOther').selectFilter({

      callBack: function (val) {

        console.log(val + '是返回的值')

      }

    });

    $('.strategy').selectFilter({

      callBack: function (val) {

        console.log(val + '是返回的值')

      }

    });

    $('.authorizationType').selectFilter({

      callBack: function (val) {

        console.log(val + '是返回的值')

      }

    }); 


    // NAT转发行内 删除按钮

    $('.deleteGroup').on('click', function () {

      if($(this).data('disabled') == 'true'){

          return;

      }

      delete_group_btn = $(this)

      var id = $(this).data("id")

      Swal.fire({

        position: 'top',

        title: "<?php echo $_LANG['zjmf_client_nat_acl_del_info']; ?>",

        type: 'question',

        showCancelButton: true,

        confirmButtonColor: '#6e9aff',

        cancelButtonColor: '#d33',

        confirmButtonText: "<?php echo $_LANG['zjmf_client_nat_web_del_confirm']; ?>",

        cancelButtonText: "<?php echo $_LANG['zjmf_layer_cancel']; ?>"

      }).then((result) => {

        if (result.value) {

          delete_group_btn.html($('#loading-circle').html());

          delete_group_btn.data('disabled', 'true')

          ajax({

              type:"post",

			  url:"clientarea.php?action=productdetails&id="+getUrlParam('id')+"&ac=nat",

              data:{"func":"delNatAcl","NatId":id},

              success:function(data){

                  if(data.status==200){

                      Swal.fire({

                        position: 'top',

                        title: "<?php echo $_LANG['zjmf_check_security_delete_success']; ?>",

                        type: 'success',

                        confirmButtonColor: '#6e9aff',

                      }).then((isConfirm) => window.location.reload());

                  }else{

                      delete_group_btn.html("<?php echo $_LANG['zjmf_client_nat_web_del']; ?>");

                      delete_group_btn.data('disabled', 'false')

                      Swal.fire("<?php echo $_LANG['zjmf_check_security_delete_error']; ?>", data.msg, "error");

                  }

              }

          })

        }

      })

    });

    // 关闭模态框

    function closeAddModal() {

      const IP = document.getElementById("IP");

      const portRange = document.getElementById("portRange");

      const description = document.getElementById("description");



      IP.classList.remove("is-valid");

      IP.classList.remove("is-invalid");



      portRange.classList.remove("is-valid");

      portRange.classList.remove("is-invalid");



      IP.value = ''

      portRange.value = ''

      description.value = ''

    }



    function addId(_this){

      $("#addModal").find("input[name='SecurityGroupId']").val(_this.data("id"))

    }

    $('.createSecurityGroup').on('click', function () {

      if(!$(this).data('submit')){

        $(this).html($('#loading-circle').html());

        $(this).data('submit', 'submit')

        ajax({

            type:"post",

			url:"clientarea.php?action=productdetails&id="+getUrlParam('id')+"&ac=nat",

            data:$("#myModal").find("form").serialize() + "&func=createNatAcl",

            success:function(data){

                $(".createSecurityGroup").html("<?php echo $_LANG['zjmf_layer_confirm']; ?>")

                $(".createSecurityGroup").data('submit','')

                if(data.status==200){

                    $("#myModal").modal('hide')

                    Swal.fire({

                      position: 'top',

                      title: "<?php echo $_LANG['zjmf_check_security_success']; ?>",

                      type: 'success',

                      confirmButtonColor: '#6e9aff',

                    }).then((isConfirm) => window.location.reload());

                }else{

                    Swal.fire("<?php echo $_LANG['zjmf_check_security_error']; ?>", data.msg, "error");

                }

            },

            error:function(){

              $(".createSecurityGroup").html("<?php echo $_LANG['zjmf_layer_confirm']; ?>")

              $(".createSecurityGroup").data('submit','')

            }

        })

      }

    });
  function ajax(options){

      //创建一个ajax对象

      var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");

      //数据的处理 {a:1,b:2} a=1&b=2;

      if(typeof(options.data)!='string'){

          var str = "";

          for(var key in options.data){

              str+="&"+key+"="+options.data[key];

          }

          str = str.slice(1)

      }else{

          var str = options.data;

      }

      console.log(str);

      options.dataType=options.dataType||'json';

      if(options.type == "get"){

          var url = options.url+"?"+str;

          xhr.open("get",url);

          xhr.setRequestHeader("Authorization","JWT eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyaW5mbyI6eyJpZCI6MjM0LCJ1c2VybmFtZSI6Ilx1NGUwZFx1ODk4MVx1NjRjZFx1NGY1Y1x1OGZkOVx1NGUyYVx1OGQyNlx1NjIzNyJ9LCJpc3MiOiJ3d3cuaWRjU21hcnQuY29tIiwiYXVkIjoid3d3LmlkY1NtYXJ0LmNvbSIsImlwIjoiMjIyLjE4Mi41Ny4yMjMiLCJpYXQiOjE2MDM3MDg0ODMsIm5iZiI6MTYwMzcwODQ4MywiZXhwIjoxNjAzNzE1NjgzfQ.wfNwLHkBb_lMA7CQgOTcbfhxeEAZJ02a7RRWWENiOVs");

          xhr.send();

      }else if(options.type == "post"){

          xhr.open("post",options.url);

          xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

          xhr.setRequestHeader("Authorization","JWT eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyaW5mbyI6eyJpZCI6MjM0LCJ1c2VybmFtZSI6Ilx1NGUwZFx1ODk4MVx1NjRjZFx1NGY1Y1x1OGZkOVx1NGUyYVx1OGQyNlx1NjIzNyJ9LCJpc3MiOiJ3d3cuaWRjU21hcnQuY29tIiwiYXVkIjoid3d3LmlkY1NtYXJ0LmNvbSIsImlwIjoiMjIyLjE4Mi41Ny4yMjMiLCJpYXQiOjE2MDM3MDg0ODMsIm5iZiI6MTYwMzcwODQ4MywiZXhwIjoxNjAzNzE1NjgzfQ.wfNwLHkBb_lMA7CQgOTcbfhxeEAZJ02a7RRWWENiOVs");

          xhr.send(str)

      }

      //监听

      xhr.onreadystatechange = function(){

          //当请求成功的时候

          if(xhr.readyState == 4 && xhr.status == 200){

              var d = xhr.responseText;

              d = JSON.parse(d);

              //将请求的数据传递给成功回调函数

              options.success&&options.success(d,xhr.responseXML)

          }else if(xhr.status != 200){

              //当失败的时候将服务器的状态传递给失败的回调函数

              options.error&&options.error(xhr.status);

          }

      }

  }

  </script>

</body>



</html>