<template>
  <div class="overlay-body">
    <div class="form-grid">
      <label>
        主机
        <input v-model.trim="form.host" placeholder="例如 192.168.1.10" />
      </label>
      <label>
        端口
        <input v-model.number="form.port" type="number" min="1" max="65535" />
      </label>
      <label>
        用户名
        <input v-model.trim="form.username" placeholder="root / ubuntu" />
      </label>
      <label>
        认证方式
        <select v-model="form.authType">
          <option value="password">密码</option>
          <option value="key">私钥</option>
        </select>
      </label>
      <label v-if="form.authType === 'password'">
        密码
        <input v-model="form.password" type="password" placeholder="仅用于本次连接" />
      </label>
      <label v-else>
        私钥
        <textarea v-model="form.privateKey" rows="4" placeholder="粘贴 OpenSSH 私钥"></textarea>
      </label>
      <label v-if="form.authType === 'key'">
        私钥口令
        <input v-model="form.passphrase" type="password" placeholder="可留空" />
      </label>
    </div>
    <div class="form-actions">
      <button class="btn-primary" @click="createSession">连接</button>
      <button class="btn-secondary" @click="resetForm">清空</button>
    </div>
    <p v-if="formError" class="form-error">{{ formError }}</p>
    <div class="tips">
      <span>{{ wsUrl }}</span>
    </div>
  </div>
</template>

<script setup>
import { useSessions } from "../../composables/useSessions";
const { form, formError, wsUrl, createSession, resetForm } = useSessions();
</script>
