<template>
  <a-modal
    v-model:visible="modalVisible"
    :title="isEdit ? '编辑用户' : '新增用户'"
    :width="800"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="账号" field="account">
            <a-input v-model="formData.account" placeholder="请输入账号" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="姓名" field="name">
            <a-input v-model="formData.name" placeholder="请输入姓名" />
          </a-form-item>
        </a-col>
      </a-row>
      
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="手机号" field="mobile">
            <a-input v-model="formData.mobile" placeholder="请输入手机号" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="邮箱" field="email">
            <a-input v-model="formData.email" placeholder="请输入邮箱" />
          </a-form-item>
        </a-col>
      </a-row>
      
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="性别" field="gender">
            <a-select v-model="formData.gender" placeholder="请选择性别">
              <a-option value="1">男</a-option>
              <a-option value="2">女</a-option>
              <a-option value="0">未知</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="员工编码" field="userCode">
            <a-input v-model="formData.userCode" placeholder="请输入员工编码" />
          </a-form-item>
        </a-col>
      </a-row>
      
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="在职状态" field="userStatus">
            <a-select v-model="formData.userStatus" placeholder="请选择在职状态">
              <a-option value="ENABLED">在职</a-option>
              <a-option value="DISABLED">离职</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="员工性质" field="userType">
            <a-select v-model="formData.userType" placeholder="请选择员工性质">
              <a-option value="FULL_TIME">正式员工</a-option>
              <a-option value="PART_TIME">兼职员工</a-option>
              <a-option value="INTERN">实习生</a-option>
              <a-option value="CONTRACTOR">外包员工</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="入职日期" field="hiredate">
            <a-date-picker v-model="formData.hiredate" placeholder="请选择入职日期" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="出生日期" field="birthdate">
            <a-date-picker v-model="formData.birthdate" placeholder="请选择出生日期" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>
      
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="学历" field="education">
            <a-input v-model="formData.education" placeholder="请输入学历" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="专业" field="majorField">
            <a-input v-model="formData.majorField" placeholder="请输入专业" />
          </a-form-item>
        </a-col>
      </a-row>
      
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="工作方向" field="workField">
            <a-input v-model="formData.workField" placeholder="请输入工作方向" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="身份证" field="identityCard">
            <a-input v-model="formData.identityCard" placeholder="请输入身份证号" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { Message } from '@arco-design/web-vue'
import { addUserNew, updateUserNew } from '@/apis/system/user-new'

interface Props {
  visible: boolean
  userData?: any
  isEdit: boolean
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  userData: null,
  isEdit: false
})

const emit = defineEmits<{
  'update:visible': [visible: boolean]
  success: []
}>()

const modalVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

const formRef = ref()
const formData = ref({
  account: '',
  name: '',
  mobile: '',
  email: '',
  gender: '',
  userCode: '',
  userStatus: 'ENABLED',
  userType: 'FULL_TIME',
  hiredate: '',
  birthdate: '',
  education: '',
  majorField: '',
  workField: '',
  identityCard: '',
  deptId: '',
  avatar: ''
})

const rules = {
  account: [{ required: true, message: '请输入账号' }],
  name: [{ required: true, message: '请输入姓名' }],
  mobile: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址' }
  ]
}

// 监听用户数据变化
watch(() => props.userData, (newData) => {
  if (newData && props.isEdit) {
    Object.assign(formData.value, newData)
  }
}, { immediate: true })

// 监听弹窗显示状态
watch(() => props.visible, (visible) => {
  if (visible && !props.isEdit) {
    // 新增时重置表单
    resetForm()
  }
})

const resetForm = () => {
  Object.assign(formData.value, {
    account: '',
    name: '',
    mobile: '',
    email: '',
    gender: '',
    userCode: '',
    userStatus: 'ENABLED',
    userType: 'FULL_TIME',
    hiredate: '',
    birthdate: '',
    education: '',
    majorField: '',
    workField: '',
    identityCard: '',
    deptId: '',
    avatar: ''
  })
  formRef.value?.clearValidate()
}

const handleSubmit = async () => {
  try {
    const valid = await formRef.value?.validate()
    if (!valid) {
      return false
    }

    const submitData = { ...formData.value }
    
    if (props.isEdit) {
      await updateUserNew(props.userData.userId, submitData)
      Message.success('更新成功')
    } else {
      await addUserNew(submitData)
      Message.success('创建成功')
    }
    
    emit('success')
    modalVisible.value = false
    return true
  } catch (error) {
    console.error('提交失败:', error)
    Message.error('操作失败')
    return false
  }
}

const handleCancel = () => {
  modalVisible.value = false
}
</script>

<style scoped lang="scss">
.a-modal {
  .a-form-item {
    margin-bottom: 16px;
  }
}
</style> 