<template>
  <div class="personal-info-container">
    <PageTitle title="个人信息" />
    
    <el-form ref="formRef" :model="formData" :rules="rules" label-position="top" class="info-form">
      <div class="form-row">
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="formData.userId" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入" />
          <div class="form-tip">手机号码用于登录账号、重置密码或其他安全认证 <el-button type="danger" link>更换手机号</el-button></div>
        </el-form-item>
      </div>

      <div class="form-row">
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="formData.realName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="办公电话" prop="officePhone">
          <el-input v-model="formData.officePhone" placeholder="请输入" />
        </el-form-item>
      </div>

      <div class="form-row">
        <el-form-item label="性别" prop="gender">
          <el-select v-model="formData.gender" placeholder="请选择" style="width: 100%">
            <el-option label="男" value="male" />
            <el-option label="女" value="female" />
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="formData.role" placeholder="请输入" />
        </el-form-item>
      </div>

      <div class="form-row">
        <el-form-item label="生日" prop="birthday">
          <el-date-picker v-model="formData.birthday" type="date" placeholder="请选择日期" style="width: 100%" />
        </el-form-item>
        <el-form-item label="微信号" prop="wechat">
          <el-input v-model="formData.wechat" placeholder="请输入" />
        </el-form-item>
      </div>

      <div class="form-row">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="所属部门" prop="department">
          <el-select v-model="formData.department" placeholder="请选择" style="width: 100%">
            <el-option label="技术部" value="tech" />
            <el-option label="销售部" value="sales" />
            <el-option label="财务部" value="finance" />
          </el-select>
        </el-form-item>
      </div>

      <div class="form-row single">
        <el-form-item label="所属部门" prop="subDepartment">
          <el-select v-model="formData.subDepartment" placeholder="请选择" style="width: 100%">
            <el-option label="研发组" value="dev" />
            <el-option label="测试组" value="test" />
          </el-select>
        </el-form-item>
      </div>

      <div class="form-row single">
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="formData.address" placeholder="请输入" maxlength="50" show-word-limit />
        </el-form-item>
      </div>

      <div class="form-row single">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入" maxlength="50" show-word-limit />
        </el-form-item>
      </div>

      <div class="form-actions">
        <el-button type="danger" @click="handleSave">保存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { PageTitle } from '@/components'

const formRef = ref()

const formData = reactive({
  userId: '',
  phone: '',
  realName: '',
  officePhone: '',
  gender: '',
  role: '',
  birthday: '',
  wechat: '',
  email: '',
  department: '',
  subDepartment: '',
  address: '',
  remark: ''
})

const rules = {
  realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }]
}

const handleSave = async () => {
  const valid = await formRef.value?.validate()
  if (!valid) return
  ElMessage.success('保存成功')
}
</script>

<style scoped lang="scss">
.personal-info-container {
  padding: 20px;
  background: #fff;
  min-height: 100%;
}

.info-form {
  max-width: 900px;

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;

    &.single {
      grid-template-columns: 1fr;
    }
  }

  .form-tip {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
  }

  :deep(.el-form-item__label) {
    font-size: 14px;
    color: #333;
    padding-bottom: 8px;
  }

  :deep(.el-input__wrapper),
  :deep(.el-select__wrapper),
  :deep(.el-textarea__inner) {
    background: #f5f5f5;
    box-shadow: none;
    border: none;
  }

  .form-actions {
    margin-top: 30px;
    text-align: center;
  }
}
</style>
