<template>
  <a-modal v-model:visible="visible" title="添加飞行员" @ok="handleClickConfirm" @cancel="onClickCancel">
    <a-form ref="formRef" :colon="false" :model="formModel">
      <a-form-item label="用户名称" name="username" :rules="[{ required: true, message: '用户名称不能为空', whitespace: true }]">
        <a-input v-model:value="formModel.username" placeholder="请输入用户名称" />
      </a-form-item>
      <a-form-item label="用户密码" name="password" :rules="[{ required: true, message: '用户密码不能为空', whitespace: true }]">
        <a-input-password v-model:value="formModel.password" placeholder="请输入用户密码" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';

interface Props {
  visible: boolean,
  onClickConfirm: (data: any) => Promise<any>,
  onClickCancel: () => void,
};

const props = withDefaults(defineProps<Props>(), {

});

const formRef = ref();

const formModel = reactive({
  username: '',
  password: '',
})

// 点击确定
const handleClickConfirm = () => {
  formRef.value?.validateFields().then(async (values: any) => {
    await props.onClickConfirm(values);
  }).catch((error: any) => {
    console.error(error);
  });
}
</script>

<style lang="scss" scoped></style>