<!--
@description: 购买页管理员账号和密码配置区块。
@source: king-design-rag-server/template/buy/SecurityConfig.vue
-->
<script setup lang="ts">
import { computed, ref } from 'vue';
import {
  Card,
  FormItem,
  Icon,
  Input,
  Tooltip,
} from '@king-design/vue';

const adminAccount = ref('admin');
const password = ref('');
const confirmPassword = ref('');
const passwordError = computed(() => {
  if (!password.value) return '';
  if (password.value.length < 8) return '密码至少需要 8 个字符';
  if (confirmPassword.value && confirmPassword.value !== password.value) {
    return '两次输入的密码不一致';
  }
  return '';
});
</script>

<template>
  <Card title="安全配置">
    <div class="config-content">
      <FormItem label="管理员账户" :value="adminAccount">
        <Input v-model="adminAccount" placeholder="请输入管理员账户" />
      </FormItem>

      <FormItem label="管理员密码" :value="password">
        <div class="field-row">
          <Input
            v-model="password"
            type="password"
            show-password
            placeholder="请输入管理员密码"
          />
          <Tooltip content="密码长度为 8-30 个字符，并满足产品密码复杂度要求">
            <Icon class="k-icon-info-circle-o" aria-label="密码规则" />
          </Tooltip>
        </div>
      </FormItem>

      <FormItem label="确认密码" :value="confirmPassword">
        <Input
          v-model="confirmPassword"
          type="password"
          show-password
          placeholder="请再次输入管理员密码"
        />
        <p v-if="passwordError" class="field-error" role="alert">
          {{ passwordError }}
        </p>
      </FormItem>
    </div>
  </Card>
</template>

<style scoped>
.config-content {
  margin-left: 60px;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-error {
  margin: 4px 0 0;
  color: #d93026;
}
</style>
