{% extends 'base.html' %}

{% block title %}ZFSAFE{% endblock %}

<!-- 页面样式块 -->
{% block style %}
        .btn-blue {
            background-color: #007bff;
            color: white;
        }
        .btn-blue:hover {
            background-color: #0056b3;
        }
{% endblock %}

<!-- 页面内容块 -->
{% block content %}
<div class="container d-flex flex-column" >

    <!-- 系统信息区域 -->
    <div class="container mt-4">
        <div class="row  justify-content-center align-items-center">
            <div class="col-md-3 text-end"><label class="col-form-label form-label">系统版本号：</label></div>
            <div class="col-md-9"><p class="form-control-plaintext" id="system_version">1.0.0.1</p></div>
        </div>
        <div class="row  justify-content-center align-items-center">
            <div class="col-md-3 text-end"><label class="col-form-label form-label">升级包：</label></div>
            <div class="col-md-6"><input type="file" class="form-control" id="upgrade-system"></div>
            <div class="col-md-3"><button class="btn btn-blue" id="upsystem">升级</button></div>
        </div>
        <div class="row  justify-content-center align-items-center">
            <div class="col-md-3 text-end"><label class="col-form-label form-label">设备ID：</label></div>
            <div class="col-md-9"><p class="form-control-plaintext" id="dev_ID">1.0.0.1</p></div>
        </div>
        <div class="row  justify-content-center align-items-center">
            <div class="col-md-3 text-end"><label class="col-form-label form-label">设备外网IP：</label></div>
            <div class="col-md-6"><input type="text" id="dev_IP" style="width:100%"></div>
            <div class="col-md-3"><button class="btn btn-blue"  id="updateIP">保存</button></div>
        </div>
    </div>
  </div>

</div>
{% endblock %}

<!-- 页面脚本块 -->
{% block script %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        get_system_info()
    });
    document.getElementById("upsystem").addEventListener("click",()=>upgrade_system())
    document.getElementById("updateIP").addEventListener("click",()=>update_ip())

    //系统升级
    async function upgrade_system(){
        alert("点击了系统升级按钮");
    }

    //获取系统信息
    async function get_system_info(){
        try {
          const res = await fetch("/api/system/getinfo");
          if (!res.ok) {
            const errorData = await res.json();
            throw new Error(errorData.error || `HTTP错误 ${res.status}`);
          }
          const data = await res.json();
          version = data.version;
          dev_ip = data.local_ip;
          document.getElementById("system_version").textContent = version;
          document.getElementById("dev_IP").value = dev_ip;
        } catch (error) {
          console.error("获取系统信息出错：", error);
        }
    }

    //更新外网IP
    async function update_ip(){
        const local_ip = document.getElementById("dev_IP").value;
        try {
          const res = await fetch("/api/system/updateip", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({local_ip}),
          });
          if (!res.ok) {
            const errorData = await res.json();
            throw new Error(errorData.error || `HTTP错误 ${res.status}`);
          }
          const data = await res.json();
          // 数据获取成功后，清除加载提示
          let bsuccess = data.bsuccess;
          let error = data.error;
          if(bsuccess){
              alert("修改IP地址成功");
          }else {
              alert("修改IP地址失败："+error);
          }
        } catch (error) {
          console.error("更新IP地址出错:", error);
        }
    }

</script>
{% endblock %}