<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  export let apiBase: string;

  const dispatch = createEventDispatcher<{ serverChange: { apiBase: string } }>();
  let server = apiBase;

  function saveServer() {
    const normalized = normalizeServer(server);
    server = normalized;
    dispatch('serverChange', { apiBase: normalized });
  }

  function normalizeServer(value: string) {
    const trimmed = value.trim();
    if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
      return trimmed;
    }
    return `http://${trimmed}`;
  }
</script>

<form aria-label="服务器登录" class="server-login" on:submit|preventDefault={saveServer}>
  <label for="server-address">服务器 IP 或域名</label>
  <input id="server-address" name="server" bind:value={server} placeholder="http://localhost:8080" />
  <button type="submit">保存服务器</button>
</form>
