<template>
  <div>

    <el-text class="mx-1" type="primary" style="margin-left: 30px; margin-top: 20px;">名称</el-text>
    <el-input v-model="name" style="width: 240px; margin-left: 50px; margin-top: 20px;" placeholder="请输入名称" />

    <el-text class="mx-1" type="primary" style="margin-left: 30px; margin-top: 20px;">账号</el-text>
    <el-input v-model="account" style="width: 240px; margin-left: 50px; margin-top: 20px;" placeholder="请输入账号" />

    <el-text class="mx-1" type="primary" style="margin-left: 30px; margin-top: 20px;">密码</el-text>
    <el-input v-model="password" style="width: 240px; margin-left: 50px; margin-top: 20px;" placeholder="请输入密码" />

    <el-text class="mx-1" type="primary" style="margin-left: 30px; margin-top: 20px;">性别</el-text>
    <el-input v-model="gender" style="width: 240px; margin-left: 50px; margin-top: 20px;" placeholder="请输入性别" />

    <el-text class="mx-1" type="primary" style="margin-left: 30px; margin-top: 20px;">电话号码</el-text>
    <el-input v-model="phone" style="width: 240px; margin-left: 50px; margin-top: 20px;" placeholder="请输入电话号码" />

    <el-text class="mx-1" type="primary" style="margin-left: 30px; margin-top: 20px;">邮箱</el-text>
    <el-input v-model="email" style="width: 240px; margin-left: 50px; margin-top: 20px;" placeholder="请输入邮箱" />

    <el-text class="mx-1" type="primary" style="margin-left: 30px; margin-top: 20px;">组织</el-text>
    <el-input v-model="organization" style="width: 240px; margin-left: 50px; margin-top: 20px;" placeholder="请输入组织" />



    <el-button plain @click="open">注册</el-button>
<!--    style="padding: 20px; width: 90px; margin-left: 20px; margin-top: 20px;"-->
    <router-view></router-view>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { useRouter } from 'vue-router';
import authenticationService from "../services/authenticationService.js";

const name = ref<string>('');
const password = ref<string>('');
const gender = ref<string>('');
const phone = ref<string>('');
const email = ref<string>('');
const organization = ref<string>('');
const account = ref<String>('');


const router = useRouter();


const open = () => {
  const user = {
    account: account.value,
    password: password.value,
    name: name.value,
    organization: organization.value,
    email: email.value,
    gender: gender.value,
    phone: phone.value,
  };
  authenticationService.register(user).then(res => {
    alert(res);
  });
  ElMessageBox.alert('注册成功', '提示', {
    confirmButtonText: 'OK',
    callback: (action: Action) => {
      ElMessage({
        type: 'info',
        message: `action: ${action}`,
      });
      // 跳转到 /login 页面
      router.push('/login');
    },
  });
};

</script>

<style scoped>
</style>
