<!-- components/LoginModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import {
  NModal,
  NCard,
  NForm,
  NFormItem,
  NInput,
  NButton,
  createDiscreteApi
} from 'naive-ui'

// 使用 createDiscreteApi 替代 useMessage
const { message } = createDiscreteApi(['message'])
const userStore = useUserStore()
const visible = ref(false)
const loading = ref(false)


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

const rules = {
  username: {
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  }
}

// 打开登录框
function showModal() {
  visible.value = true
}

// 关闭登录框
function hideModal() {
  visible.value = false
  formModel.value = {
    username: '',
    password: ''
  }
}

// 处理登录
async function handleLogin() {
  if (!formRef.value) return

  try {
    loading.value = true
    await formRef.value.validate()
    
    // 这里替换为你的实际登录 API 调用
    // const res = await login(formModel.value)
    
    // 模拟登录成功
    userStore.login('fake-token')
    message.success('登录成功')
    hideModal()
    
  } catch (err) {
    console.error(err)
  } finally {
    loading.value = false
  }
}

// 暴露方法给父组件
defineExpose({
  showModal
})
</script>

<template>
  <NModal
    v-model:show="visible"
    preset="card"
    style="width: 400px"
    :maskClosable="false"
    title="登录"
  >
    <NForm
      ref="formRef"
      :model="formModel"
      :rules="rules"
    >
      <NFormItem label="用户名" path="username">
        <NInput
          v-model:value="formModel.username"
          placeholder="请输入用户名"
        />
      </NFormItem>
      <NFormItem label="密码" path="password">
        <NInput
          v-model:value="formModel.password"
          type="password"
          placeholder="请输入密码"
          @keyup.enter="handleLogin"
        />
      </NFormItem>
    </NForm>
    
    <template #footer>
      <div class="flex justify-end gap-2">
        <NButton @click="hideModal">取消</NButton>
        <NButton
          type="primary"
          :loading="loading"
          @click="handleLogin"
        >
          登录
        </NButton>
      </div>
    </template>
  </NModal>
</template>