<template>
  <div class="space-y-6">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <div class="border-b border-gray-200 pb-4 mb-6">
        <div class="flex items-center justify-between">
          <h2 class="text-xl font-semibold text-gray-800 flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
            </svg>
            新增用户
          </h2>
        </div>
      </div>

      <!-- 新增用户表单 -->
      <div class="max-w-lg">
        <el-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          label-width="80px"
          label-position="left"
        >
          <el-form-item label="用户名" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="请输入用户名"
              clearable
            />
          </el-form-item>
          <el-form-item label="工号" prop="jobNumber">
            <el-input
              v-model="formData.jobNumber"
              placeholder="请输入工号"
              clearable
            />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="formData.phone"
              placeholder="请输入手机号"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="handleSubmit"
              :loading="submitting"
            >
              <el-icon><Check /></el-icon>
              提交
            </el-button>
            <el-button @click="handleReset">
              <el-icon><RefreshLeft /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    </div>
</template>

<script setup>
defineOptions({
  name: 'Tools'
})

import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Check, RefreshLeft, Refresh } from '@element-plus/icons-vue'
import { saveUser } from '@/api/user'

// 表单相关
const formRef = ref(null)
const submitting = ref(false)
const formData = reactive({
  name: '',
  jobNumber: '',
  phone: ''
})

// 表单校验规则
const rules = {
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  jobNumber: [
    { required: true, message: '请输入工号', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
}


// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        const response = await saveUser(formData)
        if (response.success) {
          ElMessage.success(response.message || '新增用户成功')
          handleReset()
          await loadUserList()
        } else {
          ElMessage.error(response.message || '新增用户失败')
        }
      } catch (error) {
        console.error('新增用户失败:', error)
        ElMessage.error('新增用户失败')
      } finally {
        submitting.value = false
      }
    }
  })
}

// 重置表单
const handleReset = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

</script>

<style scoped>
</style>
