<template>
  <div class="container">
    <el-card class="form-container" shadow="hover">
      <el-row>
        <el-col :span="6">
          <el-text class="mx-1" type="primary">用户名称</el-text>
        </el-col>
        <el-col :span="18">
          <el-input v-model="name" placeholder="请输入名称" />
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <el-text class="mx-1" type="primary">用户账号</el-text>
        </el-col>
        <el-col :span="18">
          <el-input v-model="account" placeholder="请输入账号" />
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <el-text class="mx-1" type="primary">用户密码</el-text>
        </el-col>
        <el-col :span="18">
          <el-input v-model="password" placeholder="请输入密码" />
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <el-text class="mx-1" type="primary">手机号码</el-text>
        </el-col>
        <el-col :span="18">
          <el-input v-model="phone" placeholder="请输入手机号码" />
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <el-text class="mx-1" type="primary">邮箱</el-text>
        </el-col>
        <el-col :span="18">
          <el-input v-model="email" placeholder="请输入邮箱" />
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <el-text class="mx-1" type="primary">用户性别</el-text>
        </el-col>
        <el-col :span="18">
          <el-input v-model="gender" placeholder="请输入性别" />
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <el-text class="mx-1" type="primary">组织</el-text>
        </el-col>
        <el-col :span="18">
          <el-input v-model="organization" placeholder="请输入组织" />
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :offset="6" :span="18">
          <el-button type="primary" @click="addFinished">确认新增</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import userService from "../../services/userService.js";

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

const addFinished = () => {
  const user = {
    account: account.value,
    name: name.value,
    organization: organization.value,
    password: password.value,
    email: email.value,
    gender: gender.value,
    phone: phone.value,
  };
  userService.addUser(user);
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5; /* 设置背景色为浅色 */
}

.form-container {
  background-color: #333; /* 深色背景 */
  color: white; /* 确保文本颜色与深色背景有对比 */
  padding: 20px;
  border-radius: 10px;
  width: 400px;
}

.el-text {
  color: white; /* 确保文本颜色与深色背景有对比 */
}

.el-input {
  width: 100%;
}
</style>
