<!--个人资料详情页面-->
<template>
  <view class="personal-info-container">
    <!-- 自定义导航栏 -->
    <uni-nav-bar
      :statusBar="true"
      backgroundColor="#181A20"
      color="#fff"
      title="个人资料"
      :leftIcon="true"
      @clickLeft="goBack"
    />
    
    <!-- 页面内容 -->
    <view class="content-wrapper">
      <scroll-view scroll-y class="scroll-container">
        
        <!-- 头像区域 -->
        <view class="avatar-section">
          <view class="avatar-container" @click="handleAvatarUpload">
            <image 
              :src="formData.head_img || $util.img('/static/icon-img/tou.png')" 
              mode="aspectFill"
              class="avatar-image"
            />
            <view class="avatar-overlay">
              <uni-icons type="camera" size="24" color="#fff"></uni-icons>
              <text class="avatar-text">点击更换头像</text>
            </view>
          </view>
        </view>

        <!-- 基本信息 -->
        <view class="info-section">
          <view class="section-title">基本信息</view>
          <view class="form-content">
            
            <!-- 姓名 -->
            <view class="form-item">
              <text class="form-label">姓名</text>
              <input 
                v-model="formData.name"
                class="form-input"
                placeholder="请输入姓名"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 员工编号（只读） -->
            <view class="form-item">
              <text class="form-label">员工编号</text>
              <input 
                v-model="formData.employee_number"
                class="form-input readonly"
                placeholder="暂无编号"
                disabled
              />
            </view>
            
            <!-- 性别 -->
            <view class="form-item">
              <text class="form-label">性别</text>
              <picker 
                v-if="isEditing"
                mode="selector" 
                :range="genderOptions" 
                range-key="label"
                :value="genderIndex"
                @change="handleGenderChange"
                class="form-picker"
              >
                <view class="picker-content">
                  {{ genderOptions[genderIndex]?.label || '请选择性别' }}
                  <uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
                </view>
              </picker>
              <input 
                v-else
                :value="genderOptions[genderIndex]?.label || '未设置'"
                class="form-input readonly"
                disabled
              />
            </view>
            
            <!-- 生日 -->
            <view class="form-item">
              <text class="form-label">生日</text>
              <picker 
                v-if="isEditing"
                mode="date" 
                :value="formData.birthday"
                @change="handleDateChange('birthday', $event)"
                class="form-picker"
              >
                <view class="picker-content">
                  {{ formData.birthday || '请选择生日' }}
                  <uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
                </view>
              </picker>
              <input 
                v-else
                :value="formData.birthday || '未设置'"
                class="form-input readonly"
                disabled
              />
            </view>
            
            <!-- 手机号 -->
            <view class="form-item">
              <text class="form-label">手机号</text>
              <input 
                v-model="formData.phone"
                class="form-input"
                placeholder="请输入手机号"
                type="number"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 邮箱 -->
            <view class="form-item">
              <text class="form-label">邮箱</text>
              <input 
                v-model="formData.email"
                class="form-input"
                placeholder="请输入邮箱"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 微信号 -->
            <view class="form-item">
              <text class="form-label">微信号</text>
              <input 
                v-model="formData.wx"
                class="form-input"
                placeholder="请输入微信号"
                :disabled="!isEditing"
              />
            </view>
            
          </view>
        </view>

        <!-- 联系信息 -->
        <view class="info-section">
          <view class="section-title">联系信息</view>
          <view class="form-content">
            
            <!-- 家庭住址 -->
            <view class="form-item">
              <text class="form-label">家庭住址</text>
              <textarea 
                v-model="formData.address"
                class="form-textarea"
                placeholder="请输入家庭住址"
                :disabled="!isEditing"
                maxlength="200"
              />
            </view>
            
            <!-- 祖籍 -->
            <view class="form-item">
              <text class="form-label">祖籍</text>
              <input 
                v-model="formData.native_place"
                class="form-input"
                placeholder="请输入祖籍"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 应急联系人电话 -->
            <view class="form-item">
              <text class="form-label">应急联系人电话</text>
              <input 
                v-model="formData.emergency_contact_phone"
                class="form-input"
                placeholder="请输入应急联系人电话"
                type="number"
                :disabled="!isEditing"
              />
            </view>
            
          </view>
        </view>

        <!-- 教育背景 -->
        <view class="info-section">
          <view class="section-title">教育背景</view>
          <view class="form-content">
            
            <!-- 学历 -->
            <view class="form-item">
              <text class="form-label">学历</text>
              <picker 
                v-if="isEditing"
                mode="selector" 
                :range="educationOptions" 
                range-key="label"
                :value="educationIndex"
                @change="handleEducationChange"
                class="form-picker"
              >
                <view class="picker-content">
                  {{ educationOptions[educationIndex]?.label || '请选择学历' }}
                  <uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
                </view>
              </picker>
              <input 
                v-else
                :value="educationOptions[educationIndex]?.label || '未设置'"
                class="form-input readonly"
                disabled
              />
            </view>
            
            <!-- 个人简介 -->
            <view class="form-item">
              <text class="form-label">个人简介</text>
              <textarea 
                v-model="formData.profile"
                class="form-textarea"
                placeholder="请输入个人简介"
                :disabled="!isEditing"
                maxlength="500"
              />
            </view>
            
          </view>
        </view>

        <!-- 身份证件 -->
        <view class="info-section">
          <view class="section-title">身份证件</view>
          <view class="form-content">
            
            <!-- 身份证正面 -->
            <view class="form-item">
              <text class="form-label">身份证正面</text>
              <view class="image-upload-container">
                <view 
                  class="image-upload-item"
                  @click="handleIdCardUpload('front')"
                  :class="{ 'disabled': !isEditing }"
                >
                  <image 
                    v-if="formData.id_card_front"
                    :src="$util.img(formData.id_card_front)"
                    mode="aspectFill"
                    class="uploaded-image"
                  />
                  <view v-else class="upload-placeholder">
                    <uni-icons type="camera" size="32" color="#666"></uni-icons>
                    <text>点击上传身份证正面</text>
                  </view>
                </view>
              </view>
            </view>
            
            <!-- 身份证反面 -->
            <view class="form-item">
              <text class="form-label">身份证反面</text>
              <view class="image-upload-container">
                <view 
                  class="image-upload-item"
                  @click="handleIdCardUpload('back')"
                  :class="{ 'disabled': !isEditing }"
                >
                  <image 
                    v-if="formData.id_card_back"
                    :src="$util.img(formData.id_card_back)"
                    mode="aspectFill"
                    class="uploaded-image"
                  />
                  <view v-else class="upload-placeholder">
                    <uni-icons type="camera" size="32" color="#666"></uni-icons>
                    <text>点击上传身份证反面</text>
                  </view>
                </view>
              </view>
            </view>
            
          </view>
        </view>

        <!-- 详细信息 -->
        <view class="info-section" v-if="personnelInfo">
          <view class="section-title">详细信息</view>
          <view class="form-content">
            
            <!-- 花名 -->
            <view class="form-item">
              <text class="form-label">花名</text>
              <input 
                v-model="personnelInfo.name"
                class="form-input"
                placeholder="请输入花名"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 门店 -->
            <view class="form-item">
              <text class="form-label">门店</text>
              <input 
                v-model="personnelInfo.store"
                class="form-input"
                placeholder="请输入门店"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 民族 -->
            <view class="form-item">
              <text class="form-label">民族</text>
              <input 
                v-model="personnelInfo.ethnicity"
                class="form-input"
                placeholder="请输入民族"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 司龄（只读） -->
            <view class="form-item">
              <text class="form-label">司龄</text>
              <input 
                v-model="personnelInfo.tenure"
                class="form-input readonly"
                placeholder="自动计算"
                disabled
              />
            </view>
            
            <!-- 转正时间 -->
            <view class="form-item">
              <text class="form-label">转正时间</text>
              <picker 
                v-if="isEditing"
                mode="date" 
                :value="personnelInfo.regular_date"
                @change="handleDateChange('regular_date', $event)"
                class="form-picker"
              >
                <view class="picker-content">
                  {{ personnelInfo.regular_date || '请选择转正时间' }}
                  <uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
                </view>
              </picker>
              <input 
                v-else
                :value="personnelInfo.regular_date || '未设置'"
                class="form-input readonly"
                disabled
              />
            </view>
            
            <!-- 是否转正 -->
            <view class="form-item">
              <text class="form-label">是否转正</text>
              <picker 
                v-if="isEditing"
                mode="selector" 
                :range="regularOptions" 
                range-key="label"
                :value="regularIndex"
                @change="handleRegularChange"
                class="form-picker"
              >
                <view class="picker-content">
                  {{ regularOptions[regularIndex]?.label || '请选择是否转正' }}
                  <uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
                </view>
              </picker>
              <input 
                v-else
                :value="regularOptions[regularIndex]?.label || '未设置'"
                class="form-input readonly"
                disabled
              />
            </view>
            
            <!-- 政治面貌 -->
            <view class="form-item">
              <text class="form-label">政治面貌</text>
              <input 
                v-model="personnelInfo.politics"
                class="form-input"
                placeholder="请输入政治面貌"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 毕业院校 -->
            <view class="form-item">
              <text class="form-label">毕业院校</text>
              <input 
                v-model="personnelInfo.university"
                class="form-input"
                placeholder="请输入毕业院校"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 专业 -->
            <view class="form-item">
              <text class="form-label">专业</text>
              <input 
                v-model="personnelInfo.major"
                class="form-input"
                placeholder="请输入专业"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 毕业时间 -->
            <view class="form-item">
              <text class="form-label">毕业时间</text>
              <picker 
                v-if="isEditing"
                mode="date" 
                :value="personnelInfo.graduation_date"
                @change="handleDateChange('graduation_date', $event)"
                class="form-picker"
              >
                <view class="picker-content">
                  {{ personnelInfo.graduation_date || '请选择毕业时间' }}
                  <uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
                </view>
              </picker>
              <input 
                v-else
                :value="personnelInfo.graduation_date || '未设置'"
                class="form-input readonly"
                disabled
              />
            </view>
            
            <!-- 户籍所在地 -->
            <view class="form-item">
              <text class="form-label">户籍所在地</text>
              <input 
                v-model="personnelInfo.household_place"
                class="form-input"
                placeholder="请输入户籍所在地"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 户籍类型 -->
            <view class="form-item">
              <text class="form-label">户籍类型</text>
              <picker 
                v-if="isEditing"
                mode="selector" 
                :range="householdTypeOptions" 
                range-key="label"
                :value="householdTypeIndex"
                @change="handleHouseholdTypeChange"
                class="form-picker"
              >
                <view class="picker-content">
                  {{ householdTypeOptions[householdTypeIndex]?.label || '请选择户籍类型' }}
                  <uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
                </view>
              </picker>
              <input 
                v-else
                :value="householdTypeOptions[householdTypeIndex]?.label || '未设置'"
                class="form-input readonly"
                disabled
              />
            </view>
            
            <!-- 户籍地址 -->
            <view class="form-item">
              <text class="form-label">户籍地址</text>
              <textarea 
                v-model="personnelInfo.household_address"
                class="form-textarea"
                placeholder="请输入户籍地址"
                :disabled="!isEditing"
                maxlength="200"
              />
            </view>
            
            <!-- 现居地址 -->
            <view class="form-item">
              <text class="form-label">现居地址</text>
              <textarea 
                v-model="personnelInfo.current_address"
                class="form-textarea"
                placeholder="请输入现居地址"
                :disabled="!isEditing"
                maxlength="200"
              />
            </view>
            
            <!-- 紧急联系人 -->
            <view class="form-item">
              <text class="form-label">紧急联系人</text>
              <input 
                v-model="personnelInfo.emergency_contact"
                class="form-input"
                placeholder="请输入紧急联系人姓名"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 紧急联系人电话 -->
            <view class="form-item">
              <text class="form-label">紧急联系人电话</text>
              <input 
                v-model="personnelInfo.emergency_phone"
                class="form-input"
                placeholder="请输入紧急联系人电话"
                type="number"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 婚姻状况 -->
            <view class="form-item">
              <text class="form-label">婚姻状况</text>
              <picker 
                v-if="isEditing"
                mode="selector" 
                :range="maritalOptions" 
                range-key="label"
                :value="maritalIndex"
                @change="handleMaritalChange"
                class="form-picker"
              >
                <view class="picker-content">
                  {{ maritalOptions[maritalIndex]?.label || '请选择婚姻状况' }}
                  <uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
                </view>
              </picker>
              <input 
                v-else
                :value="maritalOptions[maritalIndex]?.label || '未设置'"
                class="form-input readonly"
                disabled
              />
            </view>
            
            <!-- 银行卡号 -->
            <view class="form-item">
              <text class="form-label">银行卡号</text>
              <input 
                v-model="personnelInfo.bank_card"
                class="form-input"
                placeholder="请输入银行卡号"
                type="number"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 开户行 -->
            <view class="form-item">
              <text class="form-label">开户行</text>
              <input 
                v-model="personnelInfo.bank_name"
                class="form-input"
                placeholder="请输入开户行"
                :disabled="!isEditing"
              />
            </view>
            
            <!-- 合同到期时间 -->
            <view class="form-item">
              <text class="form-label">合同到期时间</text>
              <picker 
                v-if="isEditing"
                mode="date" 
                :value="personnelInfo.contract_expire"
                @change="handleDateChange('contract_expire', $event)"
                class="form-picker"
              >
                <view class="picker-content">
                  {{ personnelInfo.contract_expire || '请选择合同到期时间' }}
                  <uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
                </view>
              </picker>
              <input 
                v-else
                :value="personnelInfo.contract_expire || '未设置'"
                class="form-input readonly"
                disabled
              />
            </view>
            
            <!-- 是否复聘 -->
            <view class="form-item">
              <text class="form-label">是否复聘</text>
              <picker 
                v-if="isEditing"
                mode="selector" 
                :range="rehiredOptions" 
                range-key="label"
                :value="rehiredIndex"
                @change="handleRehiredChange"
                class="form-picker"
              >
                <view class="picker-content">
                  {{ rehiredOptions[rehiredIndex]?.label || '请选择是否复聘' }}
                  <uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
                </view>
              </picker>
              <input 
                v-else
                :value="rehiredOptions[rehiredIndex]?.label || '未设置'"
                class="form-input readonly"
                disabled
              />
            </view>
            
            <!-- 备注 -->
            <view class="form-item">
              <text class="form-label">备注</text>
              <textarea 
                v-model="personnelInfo.remark"
                class="form-textarea"
                placeholder="请输入备注信息"
                :disabled="!isEditing"
                maxlength="500"
              />
            </view>
            
          </view>
        </view>

      </scroll-view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <view v-if="!isEditing" class="action-btn edit-btn" @click="startEdit">
        编辑资料
      </view>
      <template v-else>
        <view class="action-btn cancel-btn" @click="cancelEdit">
          取消
        </view>
        <view class="action-btn save-btn" @click="saveData">
          保存
        </view>
      </template>
    </view>

  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js'

export default {
  name: 'PersonalInfo',
  data() {
    return {
      isEditing: false,
      loading: false,
      
      // 基本信息数据
      formData: {
        id: null,
        name: '',
        head_img: '',
        gender: 0,
        birthday: '',
        phone: '',
        email: '',
        wx: '',
        address: '',
        native_place: '',
        education: '',
        profile: '',
        emergency_contact_phone: '',
        id_card_front: '',
        id_card_back: '',
        employee_number: ''
      },
      
      // 详细信息数据
      personnelInfo: null,
      
      // 备份数据（用于取消编辑时恢复）
      originalData: {},
      originalPersonnelInfo: {},
      
      // 选择器选项
      genderOptions: [
        { label: '未设置', value: 0 },
        { label: '男', value: 1 },
        { label: '女', value: 2 }
      ],
      
      educationOptions: [
        { label: '未设置', value: '' },
        { label: '小学', value: '小学' },
        { label: '初中', value: '初中' },
        { label: '高中', value: '高中' },
        { label: '中专', value: '中专' },
        { label: '大专', value: '大专' },
        { label: '本科', value: '本科' },
        { label: '硕士', value: '硕士' },
        { label: '博士', value: '博士' }
      ],
      
      regularOptions: [
        { label: '未设置', value: '' },
        { label: '是', value: '是' },
        { label: '否', value: '否' }
      ],
      
      householdTypeOptions: [
        { label: '未设置', value: '' },
        { label: '城镇户口', value: '城镇户口' },
        { label: '农村户口', value: '农村户口' }
      ],
      
      maritalOptions: [
        { label: '未设置', value: '' },
        { label: '未婚', value: '未婚' },
        { label: '已婚', value: '已婚' },
        { label: '离异', value: '离异' },
        { label: '丧偶', value: '丧偶' }
      ],
      
      rehiredOptions: [
        { label: '未设置', value: '' },
        { label: '是', value: '是' },
        { label: '否', value: '否' }
      ]
    }
  },
  
  computed: {
    // 性别选择器当前索引
    genderIndex() {
      return this.genderOptions.findIndex(item => item.value === this.formData.gender) || 0
    },
    
    // 学历选择器当前索引
    educationIndex() {
      return this.educationOptions.findIndex(item => item.value === this.formData.education) || 0
    },
    
    // 是否转正选择器当前索引
    regularIndex() {
      return this.regularOptions.findIndex(item => item.value === this.personnelInfo?.is_regular) || 0
    },
    
    // 户籍类型选择器当前索引
    householdTypeIndex() {
      return this.householdTypeOptions.findIndex(item => item.value === this.personnelInfo?.household_type) || 0
    },
    
    // 婚姻状况选择器当前索引
    maritalIndex() {
      return this.maritalOptions.findIndex(item => item.value === this.personnelInfo?.marital_status) || 0
    },
    
    // 是否复聘选择器当前索引
    rehiredIndex() {
      return this.rehiredOptions.findIndex(item => item.value === this.personnelInfo?.is_rehired) || 0
    }
  },
  
  onLoad() {
    this.loadData()
  },
  
  methods: {
    // 返回上一页
    goBack() {
      if (this.isEditing) {
        uni.showModal({
          title: '提示',
          content: '正在编辑中，确定要返回吗？未保存的修改将丢失。',
          success: (res) => {
            if (res.confirm) {
              uni.navigateBack()
            }
          }
        })
      } else {
        uni.navigateBack()
      }
    },
    
    // 加载数据
    async loadData() {
      try {
        uni.showLoading({ title: '加载中...' })
        
        // 从本地存储获取用户ID
        const userInfo = uni.getStorageSync('userInfo')
        if (!userInfo || !userInfo.id) {
          uni.showToast({ title: '用户信息异常', icon: 'none' })
          return
        }
        
        // 获取基本信息
        const personnelRes = await apiRoute.getPersonnelInfo({ id: userInfo.id })
        if (personnelRes.code === 1 && personnelRes.data) {
          this.formData = {
            ...this.formData,
            ...personnelRes.data
          }
        }
        
        // 获取详细信息
        const infoRes = await apiRoute.getPersonnelDetailInfo({ person_id: userInfo.id })
        if (infoRes.code === 1 && infoRes.data) {
          this.personnelInfo = infoRes.data
        } else {
          // 如果没有详细信息，创建默认对象
          this.personnelInfo = {
            person_id: userInfo.id,
            name: '',
            store: '',
            ethnicity: '',
            age: null,
            tenure: '',
            regular_date: '',
            is_regular: '',
            politics: '',
            university: '',
            major: '',
            graduation_date: '',
            household_place: '',
            household_type: '',
            household_address: '',
            current_address: '',
            emergency_contact: '',
            emergency_phone: '',
            marital_status: '',
            bank_card: '',
            bank_name: '',
            contract_expire: '',
            is_rehired: '',
            remark: ''
          }
        }
        
      } catch (error) {
        console.error('加载个人资料失败:', error)
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 开始编辑
    startEdit() {
      this.isEditing = true
      // 备份原始数据
      this.originalData = JSON.parse(JSON.stringify(this.formData))
      this.originalPersonnelInfo = JSON.parse(JSON.stringify(this.personnelInfo))
    },
    
    // 取消编辑
    cancelEdit() {
      uni.showModal({
        title: '提示',
        content: '确定要取消编辑吗？未保存的修改将丢失。',
        success: (res) => {
          if (res.confirm) {
            // 恢复原始数据
            this.formData = JSON.parse(JSON.stringify(this.originalData))
            this.personnelInfo = JSON.parse(JSON.stringify(this.originalPersonnelInfo))
            this.isEditing = false
          }
        }
      })
    },
    
    // 保存数据
    async saveData() {
      try {
        // 表单验证
        if (!this.formData.name.trim()) {
          uni.showToast({ title: '请输入姓名', icon: 'none' })
          return
        }
        
        uni.showLoading({ title: '保存中...' })
        
        // 保存基本信息
        const personnelRes = await apiRoute.updatePersonnelInfo(this.formData)
        if (personnelRes.code !== 1) {
          throw new Error(personnelRes.msg || '保存基本信息失败')
        }
        
        // 保存详细信息
        if (this.personnelInfo) {
          const infoRes = await apiRoute.updatePersonnelDetailInfo(this.personnelInfo)
          if (infoRes.code !== 1) {
            throw new Error(infoRes.msg || '保存详细信息失败')
          }
        }
        
        uni.showToast({ title: '保存成功', icon: 'success' })
        this.isEditing = false
        
        // 更新本地用户信息
        const userInfo = uni.getStorageSync('userInfo') || {}
        Object.assign(userInfo, {
          name: this.formData.name,
          avatar: this.formData.head_img,
          phone: this.formData.phone
        })
        uni.setStorageSync('userInfo', userInfo)
        
      } catch (error) {
        console.error('保存个人资料失败:', error)
        uni.showToast({ title: error.message || '保存失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 处理头像上传
    handleAvatarUpload() {
      if (!this.isEditing) return
      
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.uploadImage(res.tempFilePaths[0], (fileData) => {
            this.formData.head_img = fileData.url
            uni.showToast({ title: '头像上传成功', icon: 'success' })
          })
        }
      })
    },
    
    // 处理身份证上传
    handleIdCardUpload(type) {
      if (!this.isEditing) return
      
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.uploadImage(res.tempFilePaths[0], (fileData) => {
            if (type === 'front') {
              this.formData.id_card_front = fileData.url
            } else {
              this.formData.id_card_back = fileData.url
            }
            uni.showToast({ title: '身份证上传成功', icon: 'success' })
          })
        }
      })
    },
    
    // 上传图片通用方法
    uploadImage(filePath, successCallback) {
      this.$util.uploadFile(
        filePath,
        successCallback,
        (error) => {
          console.error('图片上传失败:', error)
          uni.showToast({ title: '图片上传失败', icon: 'none' })
        }
      )
    },
    
    // 处理性别变化
    handleGenderChange(e) {
      this.formData.gender = this.genderOptions[e.detail.value].value
    },
    
    // 处理学历变化
    handleEducationChange(e) {
      this.formData.education = this.educationOptions[e.detail.value].value
    },
    
    // 处理是否转正变化
    handleRegularChange(e) {
      this.personnelInfo.is_regular = this.regularOptions[e.detail.value].value
    },
    
    // 处理户籍类型变化
    handleHouseholdTypeChange(e) {
      this.personnelInfo.household_type = this.householdTypeOptions[e.detail.value].value
    },
    
    // 处理婚姻状况变化
    handleMaritalChange(e) {
      this.personnelInfo.marital_status = this.maritalOptions[e.detail.value].value
    },
    
    // 处理是否复聘变化
    handleRehiredChange(e) {
      this.personnelInfo.is_rehired = this.rehiredOptions[e.detail.value].value
    },
    
    // 处理日期变化
    handleDateChange(field, e) {
      const date = e.detail.value
      if (this.personnelInfo && ['regular_date', 'graduation_date', 'contract_expire'].includes(field)) {
        this.personnelInfo[field] = date
      } else {
        this.formData[field] = date
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.personal-info-container {
  background-color: #181A20;
  min-height: 100vh;
  color: #fff;
}

.content-wrapper {
  height: calc(100vh - 44px - 120rpx); // 减去导航栏和底部按钮高度
}

.scroll-container {
  height: 100%;
  padding: 0 30rpx 40rpx;
}

/* 头像区域 */
.avatar-section {
  display: flex;
  justify-content: center;
  padding: 60rpx 0;
}

.avatar-container {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 4rpx solid #29d3b4;
}

.avatar-image {
  width: 100%;
  height: 100%;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.avatar-container:active .avatar-overlay {
  opacity: 1;
}

.avatar-text {
  font-size: 20rpx;
  color: #fff;
  margin-top: 8rpx;
}

/* 信息区域 */
.info-section {
  margin-bottom: 60rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #29d3b4;
  margin-bottom: 30rpx;
  padding-bottom: 15rpx;
  border-bottom: 2rpx solid #29d3b4;
}

.form-content {
  background-color: #292929;
  border-radius: 20rpx;
  padding: 30rpx;
}

.form-item {
  margin-bottom: 40rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #999;
  margin-bottom: 15rpx;
}

.form-input, .form-textarea {
  width: 100%;
  background-color: #3a3a3a;
  border: 2rpx solid #444;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #fff;
  box-sizing: border-box;
  
  &:focus {
    border-color: #29d3b4;
    outline: none;
  }
  
  &.readonly {
    background-color: #2a2a2a;
    color: #666;
    border-color: #333;
  }
  
  &:disabled {
    background-color: #2a2a2a;
    color: #666;
    border-color: #333;
  }
}

.form-textarea {
  min-height: 120rpx;
  resize: none;
}

/* 选择器样式 */
.form-picker {
  width: 100%;
}

.picker-content {
  background-color: #3a3a3a;
  border: 2rpx solid #444;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 图片上传样式 */
.image-upload-container {
  margin-top: 15rpx;
}

.image-upload-item {
  width: 200rpx;
  height: 120rpx;
  border: 2rpx dashed #666;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3a3a3a;
  transition: all 0.3s ease;
  
  &:active:not(.disabled) {
    border-color: #29d3b4;
    background-color: rgba(41, 211, 180, 0.1);
  }
  
  &.disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}

.uploaded-image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
  
  text {
    font-size: 20rpx;
    margin-top: 8rpx;
  }
}

/* 底部操作按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #181A20;
  padding: 30rpx;
  border-top: 2rpx solid #333;
  display: flex;
  gap: 20rpx;
  z-index: 100;
}

.action-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: bold;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
  }
}

.edit-btn {
  background-color: #29d3b4;
  color: #fff;
}

.cancel-btn {
  background-color: #666;
  color: #fff;
}

.save-btn {
  background-color: #29d3b4;
  color: #fff;
}
</style>