<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配置页面</title>
  <style>
    body{
      margin: 0;
    }
    li {
      list-style-type: none;
    }
    @media screen and (orientation: portrait) {
    .login {
      width: 100vw;
      height: 100vh;
      background-image: url("/static/img/phoneBgc.jpg");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .register {
      background-image: url("/static/img/registerBgc.jpg") !important;
      padding-top: 15vh;
    }

      .enterprise-name, .devId, .devIp, .sync  {
        width: 50vw;
        height: 5vh;
        border-radius: 2vw;
        background-color: transparent;
        font-size: 3vw;
        padding-left: 2vw;
        border: 1px solid #000;
        margin-bottom: 2vh;
      }

    .register_inputBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 5vh;
      position: relative;
    }
    .register_loginButton {
      width: 40vw;
      height: 5vh;
      background-color: rgb(101, 161, 255);
      border-radius: 10vw;
      display: flex;
      justify-content: center;
      align-items: center;
      color:#fff;
      font-size: 4vw;
      margin: 2vh 0  0 30vw;
    }


      #div-a-login{
        margin-top: 3vh;
        text-align: center;
      }
  }
@media screen and (orientation: landscape) {
  input:focus {
      border: 0.1vw solid #000;
      outline: none; /* 可选，用于去除默认的外边框样式 */
  }
  .login {
      width: 100vw;
      height: 100vh;
      background-image: url("/static/img/phoneBgc_pc.jpg");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;
    }
    .register {
      background-image: url("/static/img/registerBgc_pc.jpg") !important;
    }


    .register_inputBox {
      width: 100vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      padding-top: 42vh;
    }
    .enterprise-name, .devId, .devIp,.sync {
      width: 37vh;
      height: 6vh;
      border-radius: 2vh;
      background-color: transparent;
      font-size: 3vh;
      border: 0.1vw solid #000;
      padding-left: 1vw ;
      margin-bottom: 2vh;
    }

    .register_loginButton {
      width: 8vw;
      height: 2vw;
      background-color: rgb(101, 161, 255);
      border-radius: 1vw;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 3vh;
      position: absolute;
      left: 46vw;
      top: 65vh;
    }

    .hand:hover{
       cursor: pointer;
    }


  #div-a-login{
    margin-top: 10vh;
    text-align: center;
    font-size: 3vh;
  }
  }


  </style>
</head>
<body>
  <!-- 注册页面 -->
  <div class="register login">

    <div class="register_inputBox">
      <input class="enterprise-name" name="enterpriseName" value="{{.config.EnterpriseName}}" type="text" placeholder="租户名">
      <input class="devId" name="devId" type="text" value="{{.config.DevId}}" placeholder="对应数字人设备号">
      <input class="devIp" name="devIp" value="{{.config.DevIp}}" type="text" placeholder="数字人ip">
      <select class="sync" name="sync" >
        <option value="1" {{if eq .config.Sync 1}}selected{{end}}>同步</option>
        <option value="0" {{if eq .config.Sync 0}}selected{{end}}>不同步</option>
      </select>
    </div>
    <div class="register_loginButton hand">保存配置</div>
    <div id="div-a-login"><a id="a-login" href="/">去登录</a></div>
  </div>
  <script src="/static/js/jquery.min.js"></script>
  <script src="/static/js/msg-box.js"></script>
  <script>
    $(function(){

      $(".register_loginButton").on("click",function() {

        var enterpriseName = $(".enterprise-name").val();
        var devId = $(".devId").val();
        var devIp = $(".devIp").val();
        //ip4正则字符串
        const regex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
        if (devIp !== "" && !regex.test(devIp)){
          $.MsgBox.Alert("提示", "ip填写错误，请检查");
          return;
        }

        var settings = {
          "url": "/updateConfig",
          "method": "POST",
          "timeout": 0,
          "headers": {
            "Content-Type": "application/json"
          },
          "data": JSON.stringify({
            "devIp": devIp,
            "devId": devId,
            "enterpriseName": enterpriseName,
            "sync": Number($(".sync").val())
          }),
        };

        $.ajax(settings).done(function (response) {
          $.MsgBox.AlertWithCallback( "提示",response.message, function(){
              window.location.reload()
          })
        });

      })

    })

  </script>
</body>
</html>