{$layout}
{$template "menu"}

<div style="display:flex;align-items:baseline;gap:0.8em;margin-bottom:0.5em">
	<h3 style="margin:0">ClickHouse 配置</h3>
	<span v-if="connStatus === 'connected'" class="ui label green tiny" style="vertical-align:baseline">
		<i class="icon circle" style="margin-right:0.25em"></i>已连接
	</span>
	<span v-else-if="connStatus === 'disconnected'" class="ui label red tiny" style="vertical-align:baseline"
		:title="connError">
		<i class="icon circle" style="margin-right:0.25em"></i>已断开
	</span>
	<span v-else class="ui label grey tiny" style="vertical-align:baseline">
		<i class="icon circle outline" style="margin-right:0.25em"></i>未配置
	</span>
</div>
<p class="comment">配置后，需要在网站列表-日志策略中创建"文件+ClickHouse"的策略，才能将访问日志绕过api组件直接由边缘节点发送给ClickHouse。</p>

<form method="post" class="ui form" @submit.prevent="onSubmit">
	<csrf-token></csrf-token>
	<table class="ui table definition selectable">
		<tr>
			<td class="title">连接地址（Host）</td>
			<td>
				<input type="text" name="host" maxlength="200" ref="focus"
					placeholder="如 127.0.0.1 或 clickhouse.example.com" v-model="form.host" />
				<p class="comment">ClickHouse 服务器地址。</p>
			</td>
		</tr>
		<tr>
			<td>协议（Scheme）</td>
			<td>
				<select name="scheme" class="ui dropdown auto-width" v-model="form.scheme">
					<option value="http">HTTP</option>
					<option value="https">HTTPS</option>
				</select>
				<p class="comment">默认 HTTPS；当前后台固定跳过证书校验。</p>
			</td>
		</tr>
		<tr>
			<td>端口（Port）</td>
			<td>
				<input type="number" name="port" min="1" max="65535" style="width:6em" v-model.number="form.port" />
				<p class="comment">接口端口默认 8443（HTTPS）；请与 ClickHouse 实际开放端口保持一致。</p>
			</td>
		</tr>
		<tr>
			<td>用户名（User）</td>
			<td>
				<input type="text" name="user" maxlength="100" v-model="form.user" />
			</td>
		</tr>
		<tr>
			<td>密码（Password）</td>
			<td>
				<input type="password" name="password" maxlength="200" placeholder="不修改请留空" v-model="form.password" />
				<p class="comment">留空则不修改已保存的密码。</p>
			</td>
		</tr>
		<tr>
			<td>数据库名（Database）</td>
			<td>
				<input type="text" name="database" maxlength="100" placeholder="default" v-model="form.database" />
				<p class="comment">logs_ingest 表所在库，默认 default。</p>
			</td>
		</tr>
	</table>
	<div style="display:flex; align-items:center; gap:0.5em; margin-top:1em">
		<submit-btn></submit-btn>
		<button type="button" class="ui button basic blue" @click="testConnection" :disabled="isTesting">
			<i :class="isTesting ? 'icon spinner loading' : 'icon plug'"></i> 测试连接
		</button>
		<span v-if="testResult"
			:style="{color: testOk ? '#21ba45' : '#db2828', fontWeight:'bold'}">{{testResult}}</span>
	</div>
</form>