<script lang="tsx" setup>
import { useMessage } from 'naive-ui'

const loading = ref(true)

setTimeout(() => {
  loading.value = false
}, 700)

const rules = {
  username: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ]
}

const handleLogin = () => {
  formRef.value?.validate((errors: any) => {
    if (!errors) {
      // 模拟登录逻辑
      message.error('账号或密码有误！')
      // 这里可以跳转或调用接口
    } else {
      message.error('请填写完整信息！')
    }
  })
}

const message = useMessage()

const formRef = ref()
const form = ref({
  username: '',
  password: ''
})


</script>

<template>
  <LayoutCenterPanel
    :loading="loading"
  >
    <!-- 内容区域 -->
    <div
      flex="~ col"
      h-full
    >
      <div
        flex="1 ~ col"
        min-h-0
        class="login-black"
      >
        <div class="login-wrapper">
          <n-card
            title="登录"
            class="login-card"
            bordered
          >
            <n-form
              ref="formRef"
              :model="form"
              :rules="rules"
              label-placement="top"
            >
              <n-form-item
                label="账号"
                path="username"
              >
                <n-input
                  v-model:value="form.username"
                  placeholder="请输入账号"
                />
              </n-form-item>
              <n-form-item
                label="密码"
                path="password"
              >
                <n-input
                  v-model:value="form.password"
                  type="password"
                  placeholder="请输入密码"
                />
              </n-form-item>
              <n-form-item>
                <n-button
                  type="primary"
                  block
                  @click="handleLogin"
                >
                  登录
                </n-button>
              </n-form-item>
            </n-form>
          </n-card>
        </div>
      </div>
    </div>
  </LayoutCenterPanel>
</template>

<style lang="scss">
  .login-wrapper {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f7fa;
  }

  .login-card {
    width: 320px;
  }
</style>
