<!--个人资料详情页面-->
<template>
  <view class="personal-info-container">
    <!-- 自定义导航栏 -->
    <view class="nav-bar">
      <view class="nav-content">
        <view class="nav-left" @click="goBack">
          <text class="back-icon">←</text>
        </view>
        <view class="nav-title">个人资料</view>
        <view class="nav-right">
          <text class="save-btn" @click="saveProfile" v-if="isEditing">保存</text>
          <text class="edit-btn" @click="toggleEdit" v-else>编辑</text>
        </view>
      </view>
    </view>

    <!-- 页面内容 -->
    <view class="content-wrapper">
      <scroll-view scroll-y class="scroll-container">

        <!-- 头像区域 -->
        <view class="avatar-section">
          <view class="avatar-container" @click="handleAvatarUpload" v-if="isEditing">
            <image
              :src="formData.head_img || '/static/icon-img/tou.png'"
              mode="aspectFill"
              class="avatar-image"
            />
            <view class="avatar-overlay">
              <text class="camera-icon">📷</text>
              <text class="avatar-text">点击更换头像</text>
            </view>
          </view>
          <view class="avatar-display" v-else>
            <image
              :src="formData.head_img || '/static/icon-img/tou.png'"
              mode="aspectFill"
              class="avatar-image"
            />
          </view>
        </view>

        <!-- 基本信息 -->
        <view class="info-section">
          <view class="section-title">基本信息</view>

          <!-- 姓名 -->
          <view class="form-item">
            <text class="label">姓名</text>
            <input
              v-if="isEditing"
              v-model="formData.name"
              placeholder="请输入姓名"
              class="input-field"
            />
            <text v-else class="value">{{ formData.name || '未填写' }}</text>
          </view>

          <!-- 性别 -->
          <view class="form-item">
            <text class="label">性别</text>
            <picker
              v-if="isEditing"
              :range="genderOptions"
              range-key="name"
              :value="getPickerIndex(genderOptions, formData.gender)"
              @change="onGenderChange"
              class="picker-field"
            >
              <view class="picker-display">
                {{ getDisplayText(genderOptions, formData.gender) || '请选择性别' }}
              </view>
            </picker>
            <text v-else class="value">{{ getDisplayText(genderOptions, formData.gender) || '未填写' }}</text>
          </view>

          <!-- 生日 -->
          <view class="form-item">
            <text class="label">生日</text>
            <picker
              v-if="isEditing"
              mode="date"
              :value="formData.birthday"
              @change="onBirthdayChange"
              class="picker-field"
            >
              <view class="picker-display">
                {{ formData.birthday || '请选择生日' }}
              </view>
            </picker>
            <text v-else class="value">{{ formData.birthday || '未填写' }}</text>
          </view>

          <!-- 电话 -->
          <view class="form-item">
            <text class="label">电话</text>
            <input
              v-if="isEditing"
              v-model="formData.phone"
              placeholder="请输入电话号码"
              type="number"
              class="input-field"
            />
            <text v-else class="value">{{ formData.phone || '未填写' }}</text>
          </view>

          <!-- 邮箱 -->
          <view class="form-item">
            <text class="label">邮箱</text>
            <input
              v-if="isEditing"
              v-model="formData.email"
              placeholder="请输入邮箱地址"
              type="email"
              class="input-field"
            />
            <text v-else class="value">{{ formData.email || '未填写' }}</text>
          </view>

          <!-- 微信号 -->
          <view class="form-item">
            <text class="label">微信号</text>
            <input
              v-if="isEditing"
              v-model="formData.wx"
              placeholder="请输入微信号"
              class="input-field"
            />
            <text v-else class="value">{{ formData.wx || '未填写' }}</text>
          </view>

          <!-- 学历 -->
          <view class="form-item">
            <text class="label">学历</text>
            <picker
              v-if="isEditing"
              :range="educationOptions"
              range-key="name"
              :value="getPickerIndex(educationOptions, formData.education)"
              @change="onEducationChange"
              class="picker-field"
            >
              <view class="picker-display">
                {{ getDisplayText(educationOptions, formData.education) || '请选择学历' }}
              </view>
            </picker>
            <text v-else class="value">{{ getDisplayText(educationOptions, formData.education) || '未填写' }}</text>
          </view>

          <!-- 家庭住址 -->
          <view class="form-item">
            <text class="label">家庭住址</text>
            <textarea
              v-if="isEditing"
              v-model="formData.address"
              placeholder="请输入家庭住址"
              class="textarea-field"
              auto-height
            />
            <text v-else class="value">{{ formData.address || '未填写' }}</text>
          </view>

          <!-- 祖籍 -->
          <view class="form-item">
            <text class="label">祖籍</text>
            <input
              v-if="isEditing"
              v-model="formData.native_place"
              placeholder="请输入祖籍"
              class="input-field"
            />
            <text v-else class="value">{{ formData.native_place || '未填写' }}</text>
          </view>

          <!-- 个人简介 -->
          <view class="form-item">
            <text class="label">个人简介</text>
            <textarea
              v-if="isEditing"
              v-model="formData.profile"
              placeholder="请输入个人简介"
              class="textarea-field"
              auto-height
            />
            <text v-else class="value">{{ formData.profile || '未填写' }}</text>
          </view>

          <!-- 应急联系人电话 -->
          <view class="form-item">
            <text class="label">应急联系人电话</text>
            <input
              v-if="isEditing"
              v-model="formData.emergency_contact_phone"
              placeholder="请输入应急联系人电话"
              type="number"
              class="input-field"
            />
            <text v-else class="value">{{ formData.emergency_contact_phone || '未填写' }}</text>
          </view>
        </view>

        <!-- 身份证信息 -->
        <view class="info-section">
          <view class="section-title">身份证信息</view>

          <!-- 身份证正面 -->
          <view class="form-item">
            <text class="label">身份证正面</text>
            <view class="id-card-container">
              <view class="id-card-upload" @click="uploadIdCardFront" v-if="isEditing">
                <image
                  v-if="formData.id_card_front"
                  :src="formData.id_card_front"
                  mode="aspectFit"
                  class="id-card-image"
                />
                <view v-else class="upload-placeholder">
                  <text class="upload-icon">📷</text>
                  <text class="upload-text">点击上传身份证正面</text>
                </view>
              </view>
              <view v-else class="id-card-display">
                <image
                  v-if="formData.id_card_front"
                  :src="formData.id_card_front"
                  mode="aspectFit"
                  class="id-card-image"
                  @click="previewImage(formData.id_card_front)"
                />
                <text v-else class="value">未上传</text>
              </view>
            </view>
          </view>

          <!-- 身份证反面 -->
          <view class="form-item">
            <text class="label">身份证反面</text>
            <view class="id-card-container">
              <view class="id-card-upload" @click="uploadIdCardBack" v-if="isEditing">
                <image
                  v-if="formData.id_card_back"
                  :src="formData.id_card_back"
                  mode="aspectFit"
                  class="id-card-image"
                />
                <view v-else class="upload-placeholder">
                  <text class="upload-icon">📷</text>
                  <text class="upload-text">点击上传身份证反面</text>
                </view>
              </view>
              <view v-else class="id-card-display">
                <image
                  v-if="formData.id_card_back"
                  :src="formData.id_card_back"
                  mode="aspectFit"
                  class="id-card-image"
                  @click="previewImage(formData.id_card_back)"
                />
                <text v-else class="value">未上传</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 详细信息 -->
        <view class="info-section">
          <view class="section-title">详细信息</view>

          <!-- 花名 -->
          <view class="form-item">
            <text class="label">花名</text>
            <input
              v-if="isEditing"
              v-model="formData.info.name"
              placeholder="请输入花名"
              class="input-field"
            />
            <text v-else class="value">{{ formData.info.name || '未填写' }}</text>
          </view>

          <!-- 门店 -->
          <view class="form-item">
            <text class="label">门店</text>
            <input
              v-if="isEditing"
              v-model="formData.info.store"
              placeholder="请输入门店"
              class="input-field"
            />
            <text v-else class="value">{{ formData.info.store || '未填写' }}</text>
          </view>

          <!-- 民族 -->
          <view class="form-item">
            <text class="label">民族</text>
            <picker
              v-if="isEditing"
              :range="ethnicityOptions"
              range-key="name"
              :value="getPickerIndex(ethnicityOptions, formData.info.ethnicity)"
              @change="onEthnicityChange"
              class="picker-field"
            >
              <view class="picker-display">
                {{ getDisplayText(ethnicityOptions, formData.info.ethnicity) || '请选择民族' }}
              </view>
            </picker>
            <text v-else class="value">{{ getDisplayText(ethnicityOptions, formData.info.ethnicity) || '未填写' }}</text>
          </view>

          <!-- 年龄 -->
          <view class="form-item">
            <text class="label">年龄</text>
            <input
              v-if="isEditing"
              v-model="formData.info.age"
              placeholder="请输入年龄"
              type="number"
              class="input-field"
            />
            <text v-else class="value">{{ formData.info.age || '未填写' }}</text>
          </view>

          <!-- 司龄 -->
          <view class="form-item">
            <text class="label">司龄</text>
            <text class="value readonly">{{ formData.info.tenure || '未计算' }}</text>
          </view>

          <!-- 转正时间 -->
          <view class="form-item">
            <text class="label">转正时间</text>
            <text class="value readonly">{{ formData.info.regular_date || '未填写' }}</text>
          </view>

          <!-- 是否转正 -->
          <view class="form-item">
            <text class="label">是否转正</text>
            <text class="value readonly">{{ getDisplayText(booleanOptions, formData.info.is_regular) || '未填写' }}</text>
          </view>

          <!-- 政治面貌 -->
          <view class="form-item">
            <text class="label">政治面貌</text>
            <picker
              v-if="isEditing"
              :range="politicsOptions"
              range-key="name"
              :value="getPickerIndex(politicsOptions, formData.info.politics)"
              @change="onPoliticsChange"
              class="picker-field"
            >
              <view class="picker-display">
                {{ getDisplayText(politicsOptions, formData.info.politics) || '请选择政治面貌' }}
              </view>
            </picker>
            <text v-else class="value">{{ getDisplayText(politicsOptions, formData.info.politics) || '未填写' }}</text>
          </view>

          <!-- 毕业院校 -->
          <view class="form-item">
            <text class="label">毕业院校</text>
            <input
              v-if="isEditing"
              v-model="formData.info.university"
              placeholder="请输入毕业院校"
              class="input-field"
            />
            <text v-else class="value">{{ formData.info.university || '未填写' }}</text>
          </view>

          <!-- 专业 -->
          <view class="form-item">
            <text class="label">专业</text>
            <input
              v-if="isEditing"
              v-model="formData.info.major"
              placeholder="请输入专业"
              class="input-field"
            />
            <text v-else class="value">{{ formData.info.major || '未填写' }}</text>
          </view>

          <!-- 毕业时间 -->
          <view class="form-item">
            <text class="label">毕业时间</text>
            <picker
              v-if="isEditing"
              mode="date"
              :value="formData.info.graduation_date"
              @change="onGraduationDateChange"
              class="picker-field"
            >
              <view class="picker-display">
                {{ formData.info.graduation_date || '请选择毕业时间' }}
              </view>
            </picker>
            <text v-else class="value">{{ formData.info.graduation_date || '未填写' }}</text>
          </view>

          <!-- 婚姻状况 -->
          <view class="form-item">
            <text class="label">婚姻状况</text>
            <picker
              v-if="isEditing"
              :range="maritalStatusOptions"
              range-key="name"
              :value="getPickerIndex(maritalStatusOptions, formData.info.marital_status)"
              @change="onMaritalStatusChange"
              class="picker-field"
            >
              <view class="picker-display">
                {{ getDisplayText(maritalStatusOptions, formData.info.marital_status) || '请选择婚姻状况' }}
              </view>
            </picker>
            <text v-else class="value">{{ getDisplayText(maritalStatusOptions, formData.info.marital_status) || '未填写' }}</text>
          </view>

          <!-- 银行卡号 -->
          <view class="form-item">
            <text class="label">银行卡号</text>
            <input
              v-if="isEditing"
              v-model="formData.info.bank_card"
              placeholder="请输入银行卡号"
              type="number"
              class="input-field"
            />
            <text v-else class="value">{{ formData.info.bank_card || '未填写' }}</text>
          </view>

          <!-- 开户行 -->
          <view class="form-item">
            <text class="label">开户行</text>
            <input
              v-if="isEditing"
              v-model="formData.info.bank_name"
              placeholder="请输入开户行"
              class="input-field"
            />
            <text v-else class="value">{{ formData.info.bank_name || '未填写' }}</text>
          </view>

          <!-- 备注 -->
          <view class="form-item">
            <text class="label">备注</text>
            <textarea
              v-if="isEditing"
              v-model="formData.info.remark"
              placeholder="请输入备注信息"
              class="textarea-field"
              auto-height
            />
            <text v-else class="value">{{ formData.info.remark || '未填写' }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getDict, uploadFile } from '@/common/util.js'
import apiRoute from '@/api/apiRoute.js'

export default {
  name: 'PersonalInfo',
  data() {
    return {
      isEditing: false,
      loading: false,
      formData: {
        head_img: '',
        name: '',
        gender: '',
        birthday: '',
        phone: '',
        email: '',
        wx: '',
        education: '',
        address: '',
        native_place: '',
        profile: '',
        emergency_contact_phone: '',
        id_card_front: '',
        id_card_back: '',
        // 只读字段
        employee_number: '',
        status: '',
        account_type: '',
        join_time: '',
        // personnel_info 表字段
        info: {
          name: '',
          store: '',
          ethnicity: '',
          age: '',
          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: ''
        }
      },
      // 字典数据
      genderOptions: [],
      educationOptions: [],
      statusOptions: [],
      ethnicityOptions: [],
      politicsOptions: [],
      maritalStatusOptions: [],
      householdTypeOptions: [],
      booleanOptions: []
    }
  },
  async onLoad() {
    await this.loadDictData()
    await this.loadUserProfile()
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 切换编辑模式
    toggleEdit() {
      this.isEditing = !this.isEditing
    },

    // 加载字典数据
    async loadDictData() {
      try {
        this.genderOptions = await getDict('gender')
        this.educationOptions = await getDict('education')
        this.statusOptions = await getDict('personnel_status')
        this.booleanOptions = await getDict('global_true_or_false')

        // 暂时使用本地数据，避免字典服务问题
        this.ethnicityOptions = [
          {name: "汉族", value: "han"},
          {name: "蒙古族", value: "menggu"},
          {name: "回族", value: "hui"},
          {name: "藏族", value: "zang"},
          {name: "其他", value: "other"}
        ]

        this.politicsOptions = [
          {name: "中共党员", value: "party_member"},
          {name: "中共预备党员", value: "probationary_member"},
          {name: "共青团员", value: "league_member"},
          {name: "民主党派", value: "democratic_party"},
          {name: "无党派人士", value: "non_partisan"},
          {name: "群众", value: "masses"}
        ]

        this.maritalStatusOptions = [
          {name: "未婚", value: "single"},
          {name: "已婚", value: "married"},
          {name: "离异", value: "divorced"},
          {name: "丧偶", value: "widowed"}
        ]

        this.householdTypeOptions = [
          {name: "城镇户口", value: "urban"},
          {name: "农村户口", value: "rural"},
          {name: "集体户口", value: "collective"}
        ]
      } catch (error) {
        console.error('加载字典数据失败:', error)
        uni.showToast({
          title: '加载数据失败',
          icon: 'none'
        })
      }
    },

    // 加载用户资料
    async loadUserProfile() {
      try {
        this.loading = true
        const res = await apiRoute.getPersonnelInfo({})

        if (res.code === 1) {
          // 确保 info 对象存在
          const data = res.data || {}
          this.formData = {
            ...this.formData,
            ...data,
            info: {
              ...this.formData.info,
              ...(data.info || {})
            }
          }
        } else {
          uni.showToast({
            title: res.msg || '获取用户信息失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    // 保存个人资料
    async saveProfile() {
      try {
        // 验证必填字段
        if (!this.formData.name) {
          uni.showToast({
            title: '请输入姓名',
            icon: 'none'
          })
          return
        }

        if (!this.formData.phone) {
          uni.showToast({
            title: '请输入电话号码',
            icon: 'none'
          })
          return
        }

        this.loading = true

        const updateData = {
          head_img: this.formData.head_img,
          name: this.formData.name,
          gender: this.formData.gender,
          birthday: this.formData.birthday,
          phone: this.formData.phone,
          email: this.formData.email,
          wx: this.formData.wx,
          education: this.formData.education,
          address: this.formData.address,
          native_place: this.formData.native_place,
          profile: this.formData.profile,
          emergency_contact_phone: this.formData.emergency_contact_phone,
          id_card_front: this.formData.id_card_front,
          id_card_back: this.formData.id_card_back,
          info: {
            name: this.formData.info.name,
            store: this.formData.info.store,
            ethnicity: this.formData.info.ethnicity,
            age: this.formData.info.age,
            politics: this.formData.info.politics,
            university: this.formData.info.university,
            major: this.formData.info.major,
            graduation_date: this.formData.info.graduation_date,
            household_place: this.formData.info.household_place,
            household_type: this.formData.info.household_type,
            household_address: this.formData.info.household_address,
            current_address: this.formData.info.current_address,
            emergency_contact: this.formData.info.emergency_contact,
            emergency_phone: this.formData.info.emergency_phone,
            marital_status: this.formData.info.marital_status,
            bank_card: this.formData.info.bank_card,
            bank_name: this.formData.info.bank_name,
            contract_expire: this.formData.info.contract_expire,
            is_rehired: this.formData.info.is_rehired,
            remark: this.formData.info.remark
          }
        }

        const res = await apiRoute.editPersonnelInfo(updateData)

        if (res.code === 1) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
          this.isEditing = false
        } else {
          uni.showToast({
            title: res.msg || '保存失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('保存失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    // 处理头像上传
    handleAvatarUpload() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.uploadAvatar(res.tempFilePaths[0])
        }
      })
    },

    // 上传头像
    uploadAvatar(filePath) {
      uni.showLoading({
        title: '上传头像中...'
      })

      uploadFile(
        filePath,
        (fileData) => {
          // 上传成功回调
          this.formData.head_img = fileData.url
          uni.showToast({
            title: '头像上传成功',
            icon: 'success'
          })
          uni.hideLoading()
        },
        (error) => {
          // 上传失败回调
          console.error('上传头像失败:', error)
          uni.hideLoading()
        }
      )
    },

    // 性别选择变化
    onGenderChange(e) {
      const index = e.detail.value
      this.formData.gender = this.genderOptions[index].value
    },

    // 学历选择变化
    onEducationChange(e) {
      const index = e.detail.value
      this.formData.education = this.educationOptions[index].value
    },

    // 生日选择变化
    onBirthdayChange(e) {
      this.formData.birthday = e.detail.value
    },

    // 获取picker的索引
    getPickerIndex(options, value) {
      const index = options.findIndex(item => item.value == value)
      return index >= 0 ? index : 0
    },

    // 获取显示文本
    getDisplayText(options, value) {
      const item = options.find(item => item.value == value)
      return item ? item.name : ''
    },

    // 上传身份证正面
    uploadIdCardFront() {
      this.uploadIdCard('front')
    },

    // 上传身份证反面
    uploadIdCardBack() {
      this.uploadIdCard('back')
    },

    // 上传身份证
    uploadIdCard(type) {
      console.log('点击身份证上传:', type)
      
      // 检查编辑模式
      if (!this.isEditing) {
        uni.showToast({
          title: '请先点击编辑按钮',
          icon: 'none'
        })
        return
      }

      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          console.log('选择图片成功:', res)
          if (res.tempFilePaths && res.tempFilePaths.length > 0) {
            this.uploadIdCardFile(res.tempFilePaths[0], type)
          } else {
            uni.showToast({
              title: '未选择图片',
              icon: 'none'
            })
          }
        },
        fail: (err) => {
          console.error('选择图片失败:', err)
          uni.showToast({
            title: '选择图片失败: ' + (err.errMsg || '未知错误'),
            icon: 'none'
          })
        }
      })
    },

    // 上传身份证文件
    uploadIdCardFile(filePath, type) {
      const title = type === 'front' ? '身份证正面' : '身份证反面'
      
      console.log(`开始上传${title}:`, filePath)

      uni.showLoading({
        title: `上传${title}中...`,
        mask: true
      })

      uploadFile(
        filePath,
        (fileData) => {
          // 上传成功回调
          console.log(`${title}上传成功:`, fileData)
          
          if (type === 'front') {
            this.formData.id_card_front = fileData.url
          } else if (type === 'back') {
            this.formData.id_card_back = fileData.url
          }

          uni.showToast({
            title: `${title}上传成功`,
            icon: 'success'
          })
          uni.hideLoading()
        },
        (error) => {
          // 上传失败回调
          console.error(`上传${title}失败:`, error)
          uni.hideLoading()
          
          // 显示具体的错误信息
          const errorMsg = error?.msg || error?.errMsg || '上传失败'
          uni.showToast({
            title: `${title}${errorMsg}`,
            icon: 'none',
            duration: 3000
          })
        }
      )
    },

    // 预览图片
    previewImage(url) {
      uni.previewImage({
        urls: [url],
        current: url
      })
    },

    // 民族选择变化
    onEthnicityChange(e) {
      const index = e.detail.value
      this.formData.info.ethnicity = this.ethnicityOptions[index].value
    },

    // 政治面貌选择变化
    onPoliticsChange(e) {
      const index = e.detail.value
      this.formData.info.politics = this.politicsOptions[index].value
    },

    // 转正时间选择变化
    onRegularDateChange(e) {
      this.formData.info.regular_date = e.detail.value
    },

    // 是否转正选择变化
    onIsRegularChange(e) {
      const index = e.detail.value
      this.formData.info.is_regular = this.booleanOptions[index].value
    },

    // 毕业时间选择变化
    onGraduationDateChange(e) {
      this.formData.info.graduation_date = e.detail.value
    },

    // 婚姻状况选择变化
    onMaritalStatusChange(e) {
      const index = e.detail.value
      this.formData.info.marital_status = this.maritalStatusOptions[index].value
    }
  }
}
</script>

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

.nav-bar {
  background-color: #181A20;
  padding-top: var(--status-bar-height);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.nav-content {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

.nav-left {
  width: 60px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.back-icon {
  font-size: 20px;
  color: #fff;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.nav-right {
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.edit-btn, .save-btn {
  color: #29d3b4;
  font-size: 14px;
  padding: 5px 10px;
}

.content-wrapper {
  padding-top: calc(var(--status-bar-height) + 44px);
  min-height: 100vh;
}

.scroll-container {
  height: calc(100vh - var(--status-bar-height) - 44px);
}

// 头像区域
.avatar-section {
  display: flex;
  justify-content: center;
  padding: 30px 0;
  background: linear-gradient(135deg, #29d3b4 0%, #1e9a7a 100%);
  margin-bottom: 20px;
}

.avatar-container {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.avatar-display {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.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;
}

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

.camera-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.avatar-text {
  font-size: 12px;
  color: #fff;
  text-align: center;
}

// 信息区域
.info-section {
  background-color: #242731;
  border-radius: 12px;
  margin: 0 15px 20px;
  overflow: hidden;
}

.section-title {
  padding: 15px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #29d3b4;
  border-bottom: 1px solid #3a3d4a;
}

.form-item {
  display: flex;
  align-items: flex-start;
  padding: 15px 20px;
  border-bottom: 1px solid #3a3d4a;
  min-height: 50px;
}

.form-item:last-child {
  border-bottom: none;
}

.label {
  width: 100px;
  font-size: 14px;
  color: #a0a3bd;
  line-height: 40px;
  flex-shrink: 0;
}

.input-field {
  flex: 1;
  height: 40px;
  background-color: #3a3d4a;
  border: 1px solid #4a4d5a;
  border-radius: 6px;
  padding: 0 12px;
  color: #fff;
  font-size: 14px;
}

.textarea-field {
  flex: 1;
  min-height: 80px;
  background-color: #3a3d4a;
  border: 1px solid #4a4d5a;
  border-radius: 6px;
  padding: 12px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.picker-field {
  flex: 1;
}

.picker-display {
  height: 40px;
  background-color: #3a3d4a;
  border: 1px solid #4a4d5a;
  border-radius: 6px;
  padding: 0 12px;
  color: #fff;
  font-size: 14px;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.picker-display::after {
  content: '>';
  color: #a0a3bd;
  transform: rotate(90deg);
  font-size: 12px;
}

.value {
  flex: 1;
  font-size: 14px;
  color: #fff;
  line-height: 40px;
  word-break: break-all;
}

.value.readonly {
  color: #a0a3bd;
}

// 身份证相关样式
.id-card-container {
  flex: 1;
}

.id-card-upload, .id-card-display {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #4a4d5a;
  background-color: #3a3d4a;
}

.id-card-upload {
  cursor: pointer;
  transition: all 0.3s ease;
}

.id-card-upload:hover {
  border-color: #29d3b4;
  background-color: #464a5a;
}

.id-card-upload:active {
  transform: scale(0.98);
  background-color: #2a2e3a;
}

.id-card-image {
  width: 100%;
  height: 100%;
}

.upload-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #a0a3bd;
}

.upload-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.upload-text {
  font-size: 12px;
}

.id-card-display {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
