<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Pragma" content="no-cache"/>
  <meta http-equiv="Cache-Control" content="no-cache"/>
  <meta http-equiv="Expires" content="0"/>

  <title><?php echo $_LANG['zjmf_client_backup_snap'] ; ?></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/03SnapshotBackup.css">
  <link rel="stylesheet" href="modules/servers/zjmfcloud/templates/server_innerpage/css/embed/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>
  <!-- start：快照 -->
  <?php if($snap_num >= 0){ ?>  
  <div class="snapShot_btn">
    <button type="button" class="layui-btn purple" data-toggle="modal" data-target="#addModal"><?php echo $_LANG['zjmf_client_snap_create'] ; ?></button>
  </div>
  <?php } ?>
  <div class="container">
    <!-- 创建快照模态框 -->
    <div class="modal fade" id="addModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <span class="modal-title"><?php echo $_LANG['zjmf_client_snap_create'] ; ?></span>
            <button type="button" class="close" data-dismiss="modal" onclick="resetShotForm()">&times;</button>
          </div>

          <!-- 模态框主体 -->
          <div class="modal-body">
            <div class="modal_limit">
              <div class="modal_main">
                <form>
                  <div class="form-group">
                    <label for="disk"><?php echo $_LANG['zjmf_client_snap_disk_select'] ; ?></label>
                    <div class="selectItem">
                      <div class="disk-box">
                        <div class="filter-text">
                          <input class="filter-title" type="text" readonly placeholder="<?php echo $_LANG['zjmf_client_security_rules_select'] ; ?>" id="shotDisk" />
                          <i class="icon icon-filter-arrow"></i>
                        </div>
                        <select name="disk_id">
                          <?php foreach($disk as $v){ ?>	
                          <option value="<?php echo $v['disk_id']; ?>"><?php echo $v['name']; ?></option>
                          <?php } ?>
                        </select>
                      </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="description"><?php echo $_LANG['zjmf_client_snap_disk_desc'] ; ?></label>
                    <input type="input" name="remarks" class="form-control" id="shotRemark">
                  </div>
                </form>
              </div>
              <div class="footer">
				<button type="button" class="btn confirm-btn createSnap" style="margin-left:10px"><?php echo $_LANG['zjmf_client_nat_web_confirm'] ; ?></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 创建备份模态框 -->
    <div class="modal fade" id="addBackupModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <span class="modal-title"><?php echo $_LANG['zjmf_client_backup_create'] ; ?></span>
            <button type="button" class="close" data-dismiss="modal" onclick="resetBackupForm()">&times;</button>
          </div>

          <!-- 模态框主体 -->
          <div class="modal-body">
            <div class="modal_limit">
              <div class="modal_main">
                <form>
                  <div class="form-group">
                    <label for="disk"><?php echo $_LANG['zjmf_client_snap_disk_select'] ; ?></label>
                    <div class="selectItem">
                      <div class="disk-box-backup">
                        <div class="filter-text">
                          <input class="filter-title" type="text" readonly placeholder="<?php echo $_LANG['zjmf_client_security_rules_select'] ; ?>" id="backupDisk" />
                          <i class="icon icon-filter-arrow"></i>
                        </div>
                        <select name="disk_id">
						  <?php foreach($disk as $v){ ?>	
                          <option value="<?php echo $v['disk_id']; ?>"><?php echo $v['name']; ?></option>
                          <?php } ?>
                        </select>
                      </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="description"><?php echo $_LANG['zjmf_client_snap_disk_desc'] ; ?></label>
                    <input type="input"  name="remarks" class="form-control" id="backupRemark">
                  </div>
                </form>
              </div>
              <div class="footer">
                <button type="button" class="btn confirm-btn createBackup" style="margin-left:10px"><?php echo $_LANG['zjmf_client_nat_web_confirm'] ; ?></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php if($snap_num >= 0){ ?>
  <table class="layui-table" id="snap_table">
    <thead>
      <tr>
        <th><?php echo $_LANG['zjmf_client_snap_disk'] ; ?></th>
        <th><?php echo $_LANG['zjmf_client_security_description'] ; ?></th>
        <th style="width:185px"><?php echo $_LANG['zjmf_client_backup_create_time'] ; ?></th>
        <th style="width:145px"><?php echo $_LANG['zjmf_client_nat_web_operation'] ; ?></th>
      </tr>
    </thead>
    <tbody>
		<?php foreach($snapshots as $v){ if($v['type']=="snap"){ ?>
      <tr>
        <td><?php echo $v['disk_name']; ?></td>
        <td><?php echo $v['remarks']; ?></td>
        <td style="text-align: center;"><?php echo $v['create_time']; ?></td>
        <td style="text-align: center;">
          <?php if($v['status'] == 0){ ?>
            <!-- 创建中 -->
            <span><?php echo $_LANG['snap_backup_creating']; ?></span>
          <?php }else{ ?>
            <button type="button" class="btn btn-link restore" data-id="<?php echo $v['id']; ?>"><?php echo $_LANG['zjmf_client_snap_restore'] ; ?></button>
            <button type="button" class="btn btn-link deleteSnapshot" data-id="<?php echo $v['id']; ?>"><?php echo $_LANG['zjmf_client_nat_web_del'] ; ?></button>
          <?php } ?>
        </td>
      </tr>
		<?php }} ?>
    </tbody>
  </table>
  <?php } ?>

  <!-- start：备份 -->
  <?php if($backup_num >= 0){ ?>
  <div class="backup_btn">
    <button type="button" class="layui-btn purple" data-toggle="modal" data-target="#addBackupModal"><?php echo $_LANG['zjmf_client_backup_create'] ; ?></button>
  </div>

  <table class="layui-table" id="backup_table">
    <thead>
      <tr>
        <th><?php echo $_LANG['zjmf_client_snap_disk'] ; ?></th>
        <th><?php echo $_LANG['zjmf_client_security_description'] ; ?></th>
        <th style="width:185px"><?php echo $_LANG['zjmf_client_backup_create_time'] ; ?></th>
        <th style="width:145px"><?php echo $_LANG['zjmf_client_nat_web_operation'] ; ?></th>
      </tr>
    </thead>
    <tbody>
		<?php foreach($snapshots as $v){ if($v['type']=="backup"){  ?>
      <tr>
        <td><?php echo $v['disk_name']; ?></td>
        <td><?php echo $v['remarks']; ?></td>
        <td style="text-align: center;"><?php echo $v['create_time']; ?></td>
        <td style="text-align: center;">
          <?php if($v['status'] == 0){ ?>
            <!-- 创建中 -->
            <span><?php echo $_LANG['snap_backup_creating']; ?></span>
          <?php }else{ ?>
            <button type="button" class="btn btn-link restoreBackup" data-id="<?php echo $v['id']; ?>"><?php echo $_LANG['zjmf_client_snap_restore'] ; ?></button>
            <button type="button" class="btn btn-link deleteBackup" data-id="<?php echo $v['id']; ?>"><?php echo $_LANG['zjmf_client_nat_web_del'] ; ?></button>
          <?php } ?>
        </td>
      </tr>
		<?php }} ?>
    </tbody>
  </table>
  <?php } ?>
  <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>   
  </div>
  <script src="modules/servers/zjmfcloud/templates/server_innerpage/lib/embed/selectFilter.js"></script>
  <script>
  //获取url中的参数
	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; //返回参数值
	}
    function resetShotForm() {
      const shotRemark = document.querySelector('#shotRemark')
      const shotDisk = document.querySelector('#shotDisk')
      shotRemark.value = ''
      shotDisk.value = ''
    }

    function resetBackupForm() {
      const backupDisk = document.querySelector('#backupDisk')
      const backupRemark = document.querySelector('#backupRemark')
      backupDisk.value = ''
      backupRemark.value = ''
    }

    // 初始化下拉选择
    $('.disk-box').selectFilter({
      callBack: function (val) {
        console.log(val + '是返回的值')
      }
    });
    $('.disk-box-backup').selectFilter({
      callBack: function (val) {
        console.log(val + '是返回的值')
      }
    });

    // 快照表格行内 恢复按钮
    $(document).on('click', '.restore', function () {
	  if($(this).data('disabled') == 'true'){
          return;
      }
      restore_snap_btn = $(this)
      var id = $(this).data("id");
      Swal.fire({
        position: 'top',
        title: "<?php echo $_LANG['zjmf_client_snap_restore_this']; ?>",
        type: 'question',
        showCancelButton: true,
        confirmButtonColor: '#6e9aff',
        cancelButtonColor: '#d33',
        confirmButtonText: "<?php echo $_LANG['zjmf_client_snap_confirm']; ?>",
        cancelButtonText: "<?php echo $_LANG['zjmf_layer_cancel']; ?>"
      }).then((result) => {
		if (result.value) {
          restore_snap_btn.html($('#loading-circle').html());
          restore_snap_btn.data('disabled', 'true');
          ajax({
              type:"post",
              url:"clientarea.php?action=productdetails&id="+getUrlParam('id')+"&ac=snapshots",
              data:{"func":"restore","snapshots_id":id},
              success:function(data){
                if(data.status==200){
                  Swal.fire({
                    position: 'top',
                    title: "<?php echo $_LANG['zjmf_client_snap_restore_sussess']; ?>",
                    type: 'success',
                    confirmButtonColor: '#6e9aff',
                  }).then((isConfirm) => window.location.reload());
                }else{
                  restore_snap_btn.html("<?php echo $_LANG['zjmf_client_snap_restore']; ?>")
                  restore_snap_btn.data('disabled', 'false')
                  Swal.fire("<?php echo $_LANG['zjmf_client_snap_restore_error']; ?>", data.msg, "error");
                }
                  
              }
          })
        }
      })
    });

    // 快照表格行内 删除按钮
    $(document).on('click', '.deleteSnapshot', function () {
      if($(this).data('disabled') == 'true'){
          return;
      }
      delete_snap_btn = $(this)
      var id = $(this).data("id");
      Swal.fire({
        position: 'top',
        title: "<?php echo $_LANG['zjmf_client_snap_del']; ?>",
        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_snap_btn.html($('#loading-circle').html());
          delete_snap_btn.data('disabled', 'true');
          ajax({
              type:"post",
              url:"clientarea.php?action=productdetails&id="+getUrlParam('id')+"&ac=snapshots",
              data:{"func":"deleteSnap","snapshots_id":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_snap_btn.html("<?php echo $_LANG['zjmf_client_nat_web_del']; ?>")
                  delete_snap_btn.data('disabled', 'false')
                  Swal.fire("<?php echo $_LANG['zjmf_check_security_delete_error']; ?>", data.msg, "error");
                }
                  
              }
          })
        }
      })
    });
    // 备份表格行内 恢复按钮
    $(document).on('click', '.restoreBackup', function () {
      if($(this).data('disabled') == 'true'){
          return;
      }
      restore_backup_btn = $(this)
      var id = $(this).data("id");
      Swal.fire({
        position: 'top',
        title: "<?php echo $_LANG['zjmf_client_backup_restore_this']; ?>",
        type: 'question',
        showCancelButton: true,
        confirmButtonColor: '#6e9aff',
        cancelButtonColor: '#d33',
		confirmButtonText: "<?php echo $_LANG['zjmf_client_snap_confirm']; ?>",
        cancelButtonText: "<?php echo $_LANG['zjmf_layer_cancel']; ?>"
      }).then((result) => {
        if (result.value) {
          restore_backup_btn.html($('#loading-circle').html());
          restore_backup_btn.data('disabled', 'true');
          ajax({
              type:"post",
			  url:"clientarea.php?action=productdetails&id="+getUrlParam('id')+"&ac=snapshots",
              data:{"func":"restoreBackup","snapshots_id":id},
              success:function(data){
                if(data.status==200){
                  Swal.fire({
                    position: 'top',
                    title: "<?php echo $_LANG['zjmf_client_snap_restore_sussess']; ?>",
                    type: 'success',
                    confirmButtonColor: '#6e9aff',
                  }).then((isConfirm) => window.location.reload());
                }else{
                  restore_backup_btn.html("<?php echo $_LANG['zjmf_client_snap_restore']; ?>")
                  restore_backup_btn.data('disabled', 'false')
                  Swal.fire("<?php echo $_LANG['zjmf_client_snap_restore_error']; ?>", data.msg, "error");
                }
                
              }
          })
        }
      })
    });

    // 备份表格行内 删除按钮
    $(document).on('click', '.deleteBackup', function () {
      if($(this).data('disabled') == 'true'){
          return;
      }
      delete_backup_btn = $(this)
      var id = $(this).data("id");
      Swal.fire({
        position: 'top',
        title: "<?php echo $_LANG['zjmf_client_backup_del']; ?>",
        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_backup_btn.html($('#loading-circle').html());
          delete_backup_btn.data('disabled', 'true');
          ajax({
              type:"post",
			  url:"clientarea.php?action=productdetails&id="+getUrlParam('id')+"&ac=snapshots",
              data:{"func":"deleteBackup","snapshots_id":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_backup_btn.html("<?php echo $_LANG['zjmf_client_nat_web_del']; ?>")
                  delete_backup_btn.data('disabled', 'false')
                  Swal.fire("<?php echo $_LANG['zjmf_check_security_delete_error']; ?>", data.msg, "error");
                }
                  
              }
          })
        }
      })
    });

    $('.createSnap').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=snapshots",
            data:$("#addModal").find("form").serialize() + "&func=createSnap",
            success:function(data){
                $(".createSnap").html("<?php echo $_LANG['zjmf_client_nat_web_confirm']; ?>")
                $(".createSnap").data('submit','')
                if(data.status==200){
                    $("#addModal").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(){
              $(".createSnap").html("<?php echo $_LANG['zjmf_client_nat_web_confirm']; ?>")
              $(".createSnap").data('submit','')
            }
        })
      }
    });

    $('.createBackup').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=snapshots",
            data:$("#addBackupModal").find("form").serialize() + "&func=createBackup",
            success:function(data){
                $(".createBackup").html("<?php echo $_LANG['zjmf_client_nat_web_confirm']; ?>")
                $(".createBackup").data('submit','')
                if(data.status==200){
                    $("#addBackupModal").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(){
              $(".createBackup").html("<?php echo $_LANG['zjmf_client_nat_web_confirm']; ?>")
              $(".createBackup").data('submit','')
            }
        })
      }
    });

    get_snap_backup_list();

    var get_snap_backup_list_interval = null;
    function get_snap_backup_list(){
      ajax({
          type:"post",
          url:"clientarea.php?action=productdetails&id="+getUrlParam('id')+"&ac=snapshots",
          data:"func=listSnapBackup",
          success:function(data){
              var backup_content = '';
              var snap_content = '';
              var snap_create = false;
              var backup_create = false;
              if(data.status==200){
                for(let i=0; i<data.data.length; i++){
                  if(data.data[i].type == 'backup'){
                    if(data.data[i].status == 0){
                      backup_create = true;
                    }
                    backup_content += '<tr><td>'+ data.data[i].disk_name + '</td>'
                              + '<td>' + data.data[i].remarks + '</td>'
                              + '<td style="text-align: center;">' + data.data[i].create_time + '</td>'
                              + '<td style="text-align: center;">'
                              + '<button type="button" class="btn btn-link restoreBackup" data-id="'+ data.data[i].id +'"><?php echo $_LANG['zjmf_client_snap_restore'] ; ?></button>'
                              + '<button type="button" class="btn btn-link deleteBackup" data-id="'+ data.data[i].id +'"><?php echo $_LANG['zjmf_client_nat_web_del'] ; ?></button>'
                              + '</td></tr>';
                  }else{
                    if(data.data[i].status == 0){
                      snap_create = true;
                    }
                    snap_content += '<tr><td>'+ data.data[i].disk_name + '</td>'
                              + '<td>' + data.data[i].remarks + '</td>'
                              + '<td style="text-align: center;">' + data.data[i].create_time + '</td>'
                              + '<td style="text-align: center;">'
                              + '<button type="button" class="btn btn-link restore" data-id="'+ data.data[i].id +'"><?php echo $_LANG['zjmf_client_snap_restore'] ; ?></button>'
                              + '<button type="button" class="btn btn-link deleteSnapshot" data-id="'+ data.data[i].id +'"><?php echo $_LANG['zjmf_client_nat_web_del'] ; ?></button>'
                              + '</td></tr>';
                  }
                }
                if(backup_create || snap_create){
                  if(!get_snap_backup_list_interval){
                    get_snap_backup_list_interval = setInterval(get_snap_backup_list, 60000);
                  }
                  if(!backup_create){
                    $('#backup_table tbody').html(backup_content);
                  }
                  if(!snap_create){
                    $('#snap_table tbody').html(snap_content);
                  }
                }else{
                  $('#snap_table tbody').html(snap_content);
                  $('#backup_table tbody').html(backup_content);
                  if(get_snap_backup_list_interval){
                    clearInterval(get_snap_backup_list_interval)
                  }
                }
              }
          },
          error:function(){}
      })
    }

    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;
        }
        options.dataType=options.dataType||'json';
        if(options.type == "get"){
            var url = options.url+"?"+str;
            xhr.open("get",url);
            xhr.setRequestHeader("Authorization","JWT eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyaW5mbyI6eyJpZCI6MjM0LCJ1c2VybmFtZSI6Ilx1NGUwZFx1ODk4MVx1NjRjZFx1NGY1Y1x1OGZkOVx1NGUyYVx1OGQyNlx1NjIzNyJ9LCJpc3MiOiJ3d3cuaWRjU21hcnQuY29tIiwiYXVkIjoid3d3LmlkY1NtYXJ0LmNvbSIsImlwIjoiMjIyLjE4Mi41Ny4yMjMiLCJpYXQiOjE2MDM2OTczNTksIm5iZiI6MTYwMzY5NzM1OSwiZXhwIjoxNjAzNzA0NTU5fQ.e27Ke_2CtLM57b5OU8pGokV7Aha13M_H17ibNrBA-gA");
            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.eyJ1c2VyaW5mbyI6eyJpZCI6MjM0LCJ1c2VybmFtZSI6Ilx1NGUwZFx1ODk4MVx1NjRjZFx1NGY1Y1x1OGZkOVx1NGUyYVx1OGQyNlx1NjIzNyJ9LCJpc3MiOiJ3d3cuaWRjU21hcnQuY29tIiwiYXVkIjoid3d3LmlkY1NtYXJ0LmNvbSIsImlwIjoiMjIyLjE4Mi41Ny4yMjMiLCJpYXQiOjE2MDM2OTczNTksIm5iZiI6MTYwMzY5NzM1OSwiZXhwIjoxNjAzNzA0NTU5fQ.e27Ke_2CtLM57b5OU8pGokV7Aha13M_H17ibNrBA-gA");
            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>