<script setup lang="ts">
/**
 * 管理员账号密码表单（content 分包内复用）。
 * 提交逻辑由父页处理；此处只做受控输入与 loading 按钮。
 */
import { reactive, watch } from 'vue'

const props = withDefaults(defineProps<{
  loading?: boolean
  username?: string
  password?: string
  /** 提交按钮文案 */
  submitLabel?: string
}>(), {
  loading: false,
  username: '',
  password: '',
  submitLabel: '登录',
})

const emit = defineEmits<{
  submit: [payload: { username: string, password: string }]
  'update:username': [v: string]
  'update:password': [v: string]
}>()

const form = reactive({
  username: props.username,
  password: props.password,
})

watch(() => props.username, (v) => { form.username = v })
watch(() => props.password, (v) => { form.password = v })

/** 同步账号到父组件（v-model） */
const onUserInput = (v: string) => {
  form.username = v
  emit('update:username', v)
}

/** 同步密码到父组件 */
const onPassInput = (v: string) => {
  form.password = v
  emit('update:password', v)
}

/** 点击登录：把当前表单抛给父页发请求 */
const onSubmit = () => {
  emit('submit', { username: form.username, password: form.password })
}
</script>

<template>
  <view class="staff-login-form">
    <wd-form :model="form">
      <wd-input
        :model-value="form.username"
        label="账号"
        placeholder="用户名"
        clearable
        @update:model-value="onUserInput"
      />
      <wd-input
        :model-value="form.password"
        label="密码"
        placeholder="密码"
        show-password
        clearable
        @update:model-value="onPassInput"
      />
    </wd-form>
    <wd-button
      block
      type="primary"
      :loading="loading"
      custom-style="margin-top:24px;background:#d4b383;border-color:#d4b383;color:#171717;"
      @click="onSubmit"
    >
      {{ submitLabel }}
    </wd-button>
  </view>
</template>

<style scoped lang="scss">
.staff-login-form {
  width: 100%;
}
</style>
