<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '我的资料',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-50 pb-20">
    <!-- 头像区域 -->
    <view class="mx-4 mt-4">
      <view class="avatar-section">
        <image class="avatar" :src="userInfo.avatar || defaultAvatar" mode="aspectFill" />
        <view class="info">
          <view class="name">{{ userInfo.nickName || '未设置昵称' }}</view>
          <view class="id">ID: {{ userInfo.id }}</view>
          <view class="location">{{ userInfo.workArea || '未设置工作地区' }}</view>
        </view>
      </view>
    </view>

    <!-- 资料编辑表单 -->
    <view class="mx-4">
      <!-- 基本信息 -->
      <view class="card">
        <text class="card-title">基本信息</text>
        <view class="form-item">
          <text class="label">昵称</text>
          <input v-model="userInfo.nickName" class="value" placeholder="请输入昵称" />
        </view>
        <view class="form-item">
          <text class="label">生日</text>
          <picker mode="date" :value="userInfo.birthday" @change="onBirthdayChange" class="value">
            <text>{{ userInfo.birthday || '请选择生日' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">身高(cm)</text>
          <input v-model="userInfo.height" type="number" class="value" placeholder="请输入身高" />
        </view>
        <view class="form-item">
          <text class="label">体重(kg)</text>
          <input v-model="userInfo.weight" type="number" class="value" placeholder="请输入体重" />
        </view>
        <view class="form-item">
          <text class="label">婚姻状况</text>
          <picker
            :range="maritalStatusOptions"
            :value="maritalStatusIndex"
            @change="onMaritalStatusChange"
            class="value"
          >
            <text>{{ maritalStatusOptions[maritalStatusIndex] || '请选择婚姻状况' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">血型</text>
          <input v-model="userInfo.bloodType" class="value" placeholder="请输入血型" />
        </view>
        <view class="form-item">
          <text class="label">民族</text>
          <input v-model="userInfo.nation" class="value" placeholder="请输入民族" />
        </view>
      </view>

      <!-- 工作信息 -->
      <view class="card">
        <text class="card-title">工作信息</text>
        <view class="form-item">
          <text class="label">工作省份</text>
          <picker
            :range="provinces"
            :value="provinceIndex"
            @change="onProvinceChange"
            class="value"
          >
            <text>{{ userInfo.workProvinceName || '请选择省份' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">工作城市</text>
          <picker
            :range="getCurrentCities()"
            :value="cityIndex"
            @change="onCityChange"
            class="value"
          >
            <text>{{ userInfo.workCityName || '请选择城市' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">工作区县</text>
          <picker
            :range="getCurrentDistricts()"
            :value="districtIndex"
            @change="onDistrictChange"
            class="value"
          >
            <text>{{ userInfo.workCountryName || '请选择区县' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">工作地址</text>
          <input v-model="userInfo.workArea" class="value" placeholder="请输入工作地址" />
        </view>
        <view class="form-item">
          <text class="label">工作单位</text>
          <input v-model="userInfo.workUnit" class="value" placeholder="请输入工作单位" />
        </view>
        <view class="form-item">
          <text class="label">单位类型</text>
          <picker
            :range="companyTypeOptions"
            :value="companyTypeIndex"
            @change="onCompanyTypeChange"
            class="value"
          >
            <text>{{ companyTypeOptions[companyTypeIndex] || '请选择单位类型' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">工作行业</text>
          <input v-model="userInfo.workIndustry" class="value" placeholder="请输入工作行业" />
        </view>
        <view class="form-item">
          <text class="label">职业</text>
          <input v-model="userInfo.profession" class="value" placeholder="请输入职业" />
        </view>
        <view class="form-item">
          <text class="label">月收入</text>
          <picker
            :range="incomeOptions"
            :value="incomeIndex"
            @change="onIncomeChange"
            class="value"
          >
            <text>{{ incomeOptions[incomeIndex] || '请选择月收入' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">学历</text>
          <picker
            :range="educationOptions"
            :value="educationIndex"
            @change="onEducationChange"
            class="value"
          >
            <text>{{ educationOptions[educationIndex] || '请选择学历' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">毕业院校</text>
          <input v-model="userInfo.graduationSchool" class="value" placeholder="请输入毕业院校" />
        </view>
      </view>

      <!-- 住房资产 -->
      <view class="card">
        <text class="card-title">住房资产</text>
        <view class="form-item">
          <text class="label">住房状况</text>
          <picker
            :range="housingStatusOptions"
            :value="housingStatusIndex"
            @change="onHousingStatusChange"
            class="value"
          >
            <text>{{ housingStatusOptions[housingStatusIndex] || '请选择住房状况' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">购车情况</text>
          <picker
            :range="carOwnershipOptions"
            :value="carOwnershipIndex"
            @change="onCarOwnershipChange"
            class="value"
          >
            <text>{{ carOwnershipOptions[carOwnershipIndex] || '请选择购车情况' }}</text>
          </picker>
        </view>
      </view>

      <!-- 家庭背景 -->
      <view class="card">
        <text class="card-title">家庭背景</text>
        <view class="form-item">
          <text class="label">父母状况</text>
          <picker
            :range="parentsStatusOptions"
            :value="parentsStatusIndex"
            @change="onParentsStatusChange"
            class="value"
          >
            <text>{{ parentsStatusOptions[parentsStatusIndex] || '请选择父母状况' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">兄弟姐妹</text>
          <picker
            :range="siblingsOptions"
            :value="siblingsIndex"
            @change="onSiblingsChange"
            class="value"
          >
            <text>{{ siblingsOptions[siblingsIndex] || '请选择兄弟姐妹' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">与父母同住</text>
          <picker
            :range="liveWithParentsOptions"
            :value="liveWithParentsIndex"
            @change="onLiveWithParentsChange"
            class="value"
          >
            <text>
              {{ liveWithParentsOptions[liveWithParentsIndex] || '请选择是否与父母同住' }}
            </text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">婚娶形式</text>
          <picker
            :range="marriageFormOptions"
            :value="marriageFormIndex"
            @change="onMarriageFormChange"
            class="value"
          >
            <text>{{ marriageFormOptions[marriageFormIndex] || '请选择婚娶形式' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">子女情况</text>
          <picker
            :range="childrenStatusOptions"
            :value="childrenStatusIndex"
            @change="onChildrenStatusChange"
            class="value"
          >
            <text>{{ childrenStatusOptions[childrenStatusIndex] || '请选择子女情况' }}</text>
          </picker>
        </view>
      </view>

      <!-- 生活习惯 -->
      <view class="card">
        <text class="card-title">生活习惯</text>
        <view class="form-item">
          <text class="label">作息习惯</text>
          <picker
            :range="sleepHabitsOptions"
            :value="sleepHabitsIndex"
            @change="onSleepHabitsChange"
            class="value"
          >
            <text>{{ sleepHabitsOptions[sleepHabitsIndex] || '请选择作息习惯' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">锻炼习惯</text>
          <picker
            :range="exerciseHabitsOptions"
            :value="exerciseHabitsIndex"
            @change="onExerciseHabitsChange"
            class="value"
          >
            <text>{{ exerciseHabitsOptions[exerciseHabitsIndex] || '请选择锻炼习惯' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">是否吸烟</text>
          <switch
            :checked="userInfo.smoke === 1"
            @change="(e) => (userInfo.smoke = e.detail.value ? 1 : 0)"
          />
        </view>
        <view class="form-item">
          <text class="label">是否饮酒</text>
          <switch
            :checked="userInfo.drink === 1"
            @change="(e) => (userInfo.drink = e.detail.value ? 1 : 0)"
          />
        </view>
        <view class="form-item">
          <text class="label">兴趣爱好</text>
          <input v-model="userInfo.hobbies" class="value" placeholder="请输入兴趣爱好" />
        </view>
      </view>

      <!-- 择偶要求 -->
      <view class="card">
        <text class="card-title">择偶要求</text>
        <view class="form-item">
          <text class="label">期望结婚时间</text>
          <picker
            :range="expectedMarriageTimeOptions"
            :value="expectedMarriageTimeIndex"
            @change="onExpectedMarriageTimeChange"
            class="value"
          >
            <text>
              {{ expectedMarriageTimeOptions[expectedMarriageTimeIndex] || '请选择期望结婚时间' }}
            </text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">婚况要求</text>
          <checkbox-group @change="onPartnerMaritalStatusChange">
            <label v-for="(item, index) in partnerMaritalStatusOptions" :key="index">
              <checkbox
                :value="item.value"
                :checked="selectedPartnerMaritalStatus.includes(item.value)"
              />
              <text>{{ item.label }}</text>
            </label>
          </checkbox-group>
        </view>
        <view class="form-item">
          <text class="label">年龄范围</text>
          <input v-model="userInfo.ageRange" class="value" placeholder="请输入年龄范围" />
        </view>
        <view class="form-item">
          <text class="label">身高范围</text>
          <input v-model="userInfo.heightRange" class="value" placeholder="请输入身高范围" />
        </view>
        <view class="form-item">
          <text class="label">最低学历</text>
          <picker
            :range="educationOptions"
            :value="Number(userInfo.minEducation) - 1"
            @change="(e) => (userInfo.minEducation = String(Number(e.detail.value) + 1))"
            class="value"
          >
            <text>
              {{ educationOptions[Number(userInfo.minEducation) - 1] || '请选择最低学历' }}
            </text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">最低收入</text>
          <picker
            :range="incomeOptions"
            :value="Number(userInfo.minIncome) - 1"
            @change="(e) => (userInfo.minIncome = String(Number(e.detail.value) + 1))"
            class="value"
          >
            <text>{{ incomeOptions[Number(userInfo.minIncome) - 1] || '请选择最低收入' }}</text>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">工作地区要求</text>
          <input
            v-model="userInfo.partnerWorkArea"
            class="value"
            placeholder="请输入工作地区要求"
          />
        </view>
        <view class="form-item">
          <text class="label">其他要求</text>
          <input v-model="userInfo.otherRequirements" class="value" placeholder="请输入其他要求" />
        </view>
      </view>

      <!-- 联系方式 -->
      <view class="card">
        <text class="card-title">联系方式</text>
        <view class="form-item">
          <text class="label">手机号</text>
          <input v-model="userInfo.phone" type="number" class="value" placeholder="请输入手机号" />
        </view>
        <view class="form-item">
          <text class="label">微信号</text>
          <input v-model="userInfo.wechat" class="value" placeholder="请输入微信号" />
        </view>
        <view class="form-item">
          <text class="label">QQ</text>
          <input v-model="userInfo.qq" type="number" class="value" placeholder="请输入QQ号" />
        </view>
        <view class="form-item">
          <text class="label">邮箱</text>
          <input v-model="userInfo.email" class="value" placeholder="请输入邮箱" />
        </view>
      </view>

      <!-- 自我介绍 -->
      <view class="card">
        <text class="card-title">自我介绍</text>
        <textarea v-model="userInfo.selfIntroduction" placeholder="请输入自我介绍" />
      </view>
    </view>

    <!-- 保存按钮 -->
    <button class="save-button" @click="saveUserInfo">保存修改</button>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { UserInfo } from '@/service/login/type'
import { useUserStore } from '@/store'
import { provinces, cities, districts } from '@/utils/area-data'

const userStore = useUserStore()

const defaultAvatar = '/static/images/default-avatar.png'
const userInfo = ref<UserInfo>({} as UserInfo)

// 婚姻状况选项
const maritalStatusOptions = ['未婚', '离异', '丧偶']
const maritalStatusIndex = ref(0)

// 月收入选项
const incomeOptions = [
  '3000以下',
  '3000~5000',
  '5000~8000',
  '8000~10000',
  '10000~20000',
  '20000以上',
]
const incomeIndex = ref(0)

// 学历选项
const educationOptions = ['初中', '高中', '大专', '本科', '硕士', '博士']
const educationIndex = ref(0)

// 住房状况选项
const housingStatusOptions = [
  '已购房(有贷款)',
  '已购房(无贷款)',
  '有能力购房',
  '无房',
  '无房希望对方解决',
  '无房希望双方解决',
  '与父母同住',
  '独自租房',
  '与人合租',
  '住单位房',
]
const housingStatusIndex = ref(0)

// 购车情况选项
const carOwnershipOptions = [
  '无车',
  '已购车(经济型)',
  '已购车(中档型)',
  '已购车(豪华型)',
  '单位用车',
  '需要时购置',
]
const carOwnershipIndex = ref(0)

// 期望结婚时间选项
const expectedMarriageTimeOptions = ['随时', '半年内', '一年内', '两年内', '三年内']
const expectedMarriageTimeIndex = ref(0)

// 父母状况选项
const parentsStatusOptions = ['父母均建在', '只有母亲建在', '只有父亲建在', '父母均以离世']
const parentsStatusIndex = ref(0)

// 兄弟姐妹选项
const siblingsOptions = ['独生子女', '2个', '3个', '4个', '5个']
const siblingsIndex = ref(0)

// 与父母同住选项
const liveWithParentsOptions = ['愿意', '不愿意', '视具体情况而定', '尊重伴侣意见']
const liveWithParentsIndex = ref(0)

// 婚娶形式选项
const marriageFormOptions = ['嫁娶', '两顾', '上门']
const marriageFormIndex = ref(0)

// 子女情况选项
const childrenStatusOptions = ['未育', '子女归自己', '子女归对方']
const childrenStatusIndex = ref(0)

// 修改择偶婚况选项为数字代码
const partnerMaritalStatusOptions = [
  { label: '未婚', value: '1' },
  { label: '离异', value: '2' },
  { label: '丧偶', value: '3' },
]
const selectedPartnerMaritalStatus = ref<string[]>([])

// 作息习惯选项
const sleepHabitsOptions = [
  '早睡早起很规律',
  '经常夜猫子',
  '总是早起鸟',
  '偶尔懒散一下',
  '没有规律',
]
const sleepHabitsIndex = ref(0)

// 锻炼习惯选项
const exerciseHabitsOptions = [
  '每天锻炼',
  '每周至少一次',
  '每月几次',
  '没时间锻炼',
  '集中时间锻炼',
  '不喜欢锻炼',
]
const exerciseHabitsIndex = ref(0)

// 单位类型选项
const companyTypeOptions = [
  '政府机关',
  '事业单位',
  '外资企业',
  '合资企业',
  '国营企业',
  '私营企业',
  '自有公司',
  '其他',
]
const companyTypeIndex = ref(0)

// 省市区选择器
const provinceIndex = ref(0)
const cityIndex = ref(0)
const districtIndex = ref(0)

// 当前选中的省市区数据
const currentProvince = ref('')
const currentCity = ref('')
const currentDistrict = ref('')

// 获取当前省份的城市列表
const getCurrentCities = () => {
  if (!currentProvince.value) return []
  return cities[currentProvince.value] || []
}

// 获取当前城市的区县列表
const getCurrentDistricts = () => {
  if (!currentProvince.value || !currentCity.value) return []
  return districts[`${currentProvince.value}-${currentCity.value}`] || []
}

// 省份选择变化
const onProvinceChange = (e: any) => {
  const index = e.detail.value
  provinceIndex.value = index
  currentProvince.value = provinces[index]
  cityIndex.value = 0
  districtIndex.value = 0
  currentCity.value = getCurrentCities()[0] || ''
  currentDistrict.value = getCurrentDistricts()[0] || ''

  // 更新用户信息
  userInfo.value.workProvinceName = currentProvince.value
  userInfo.value.workCityName = currentCity.value
  userInfo.value.workCountryName = currentDistrict.value
}

// 城市选择变化
const onCityChange = (e: any) => {
  const index = e.detail.value
  cityIndex.value = index
  currentCity.value = getCurrentCities()[index]
  districtIndex.value = 0
  currentDistrict.value = getCurrentDistricts()[0] || ''

  // 更新用户信息
  userInfo.value.workCityName = currentCity.value
  userInfo.value.workCountryName = currentDistrict.value
}

// 区县选择变化
const onDistrictChange = (e: any) => {
  const index = e.detail.value
  districtIndex.value = index
  currentDistrict.value = getCurrentDistricts()[index]

  // 更新用户信息
  userInfo.value.workCountryName = currentDistrict.value
}

// 在获取用户信息时设置省市区索引
const setAreaIndexes = () => {
  // 设置省份索引
  const provinceIdx = provinces.findIndex((p) => p === userInfo.value.workProvinceName)
  if (provinceIdx !== -1) {
    provinceIndex.value = provinceIdx
    currentProvince.value = provinces[provinceIdx]

    // 设置城市索引
    const cityList = getCurrentCities()
    const cityIdx = cityList.findIndex((c) => c === userInfo.value.workCityName)
    if (cityIdx !== -1) {
      cityIndex.value = cityIdx
      currentCity.value = cityList[cityIdx]

      // 设置区县索引
      const districtList = getCurrentDistricts()
      const districtIdx = districtList.findIndex((d) => d === userInfo.value.workCountryName)
      if (districtIdx !== -1) {
        districtIndex.value = districtIdx
        currentDistrict.value = districtList[districtIdx]
      }
    }
  }
}

// 获取用户信息
const getUserInfo = async () => {
  try {
    const res = await userStore.setUserInfo()
    if (res.code === 200) {
      userInfo.value = res.data
      // 确保nickName字段存在
      if (!userInfo.value.nickName && userInfo.value.nickname) {
        userInfo.value.nickName = userInfo.value.nickname
      }
      // 设置各个选项的索引
      maritalStatusIndex.value = Number(userInfo.value.maritalStatus) - 1
      incomeIndex.value = Number(userInfo.value.monthlyIncome) - 1
      educationIndex.value = Number(userInfo.value.education) - 1
      housingStatusIndex.value = Number(userInfo.value.housingStatus) - 1
      carOwnershipIndex.value = Number(userInfo.value.carOwnership) - 1
      expectedMarriageTimeIndex.value = Number(userInfo.value.expectedMarriageTime) - 1
      parentsStatusIndex.value = Number(userInfo.value.parentsStatus) - 1
      siblingsIndex.value = Number(userInfo.value.siblings) - 1
      liveWithParentsIndex.value = Number(userInfo.value.liveWithParents) - 1
      marriageFormIndex.value = Number(userInfo.value.marriageForm) - 1
      childrenStatusIndex.value = Number(userInfo.value.childrenStatus) - 1
      sleepHabitsIndex.value = Number(userInfo.value.sleepHabits) - 1
      exerciseHabitsIndex.value = Number(userInfo.value.exerciseHabits) - 1
      companyTypeIndex.value = Number(userInfo.value.companyType) - 1

      // 设置省市区索引
      setAreaIndexes()

      // 确保minEducation和minIncome是字符串类型
      if (typeof userInfo.value.minEducation !== 'string') {
        userInfo.value.minEducation = String(userInfo.value.minEducation || '1')
      }
      if (typeof userInfo.value.minIncome !== 'string') {
        userInfo.value.minIncome = String(userInfo.value.minIncome || '1')
      }

      // 确保smoke和drink是数字类型
      if (typeof userInfo.value.smoke !== 'number') {
        userInfo.value.smoke = Number(userInfo.value.smoke || 0)
      }
      if (typeof userInfo.value.drink !== 'number') {
        userInfo.value.drink = Number(userInfo.value.drink || 0)
      }

      // 设置多选值
      if (typeof userInfo.value.partnerMaritalStatus === 'string') {
        selectedPartnerMaritalStatus.value = userInfo.value.partnerMaritalStatus
          ? userInfo.value.partnerMaritalStatus.split(',')
          : []
      }
    }
  } catch (error) {
    uni.showToast({
      title: '获取用户信息失败',
      icon: 'none',
    })
  }
}

// 保存用户信息
const saveUserInfo = async () => {
  try {
    // 处理多选值
    userInfo.value.partnerMaritalStatus = selectedPartnerMaritalStatus.value.join(',')

    const res = await userStore.updateUserInfo(userInfo.value)
    if (res.code === 200) {
      uni.showToast({
        title: '保存成功',
        icon: 'success',
      })
      // 返回上一页
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  } catch (error) {
    console.error('保存用户信息失败:', error)
    uni.showToast({
      title: '保存失败',
      icon: 'none',
    })
  }
}

// 各种选择器的change事件处理函数
const onMaritalStatusChange = (e: any) => {
  maritalStatusIndex.value = e.detail.value
  userInfo.value.maritalStatus = String(Number(e.detail.value) + 1)
}

const onHousingStatusChange = (e: any) => {
  housingStatusIndex.value = e.detail.value
  userInfo.value.housingStatus = String(Number(e.detail.value) + 1)
}

const onCarOwnershipChange = (e: any) => {
  carOwnershipIndex.value = e.detail.value
  userInfo.value.carOwnership = String(Number(e.detail.value) + 1)
}

const onExpectedMarriageTimeChange = (e: any) => {
  expectedMarriageTimeIndex.value = e.detail.value
  userInfo.value.expectedMarriageTime = String(Number(e.detail.value) + 1)
}

const onParentsStatusChange = (e: any) => {
  parentsStatusIndex.value = e.detail.value
  userInfo.value.parentsStatus = String(Number(e.detail.value) + 1)
}

const onSiblingsChange = (e: any) => {
  siblingsIndex.value = e.detail.value
  userInfo.value.siblings = String(Number(e.detail.value) + 1)
}

const onLiveWithParentsChange = (e: any) => {
  liveWithParentsIndex.value = e.detail.value
  userInfo.value.liveWithParents = String(Number(e.detail.value) + 1)
}

const onMarriageFormChange = (e: any) => {
  marriageFormIndex.value = e.detail.value
  userInfo.value.marriageForm = String(Number(e.detail.value) + 1)
}

const onChildrenStatusChange = (e: any) => {
  childrenStatusIndex.value = e.detail.value
  userInfo.value.childrenStatus = String(Number(e.detail.value) + 1)
}

const onSleepHabitsChange = (e: any) => {
  sleepHabitsIndex.value = e.detail.value
  userInfo.value.sleepHabits = String(Number(e.detail.value) + 1)
}

const onExerciseHabitsChange = (e: any) => {
  exerciseHabitsIndex.value = e.detail.value
  userInfo.value.exerciseHabits = String(Number(e.detail.value) + 1)
}

const onCompanyTypeChange = (e: any) => {
  companyTypeIndex.value = e.detail.value
  userInfo.value.companyType = String(Number(e.detail.value) + 1)
}

// 多选处理函数
const onPartnerMaritalStatusChange = (e: any) => {
  selectedPartnerMaritalStatus.value = e.detail.value
}

// 生日选择器变化
const onBirthdayChange = (e: any) => {
  userInfo.value.birthday = e.detail.value
}

// 收入选择器变化
const onIncomeChange = (e: any) => {
  incomeIndex.value = e.detail.value
  userInfo.value.monthlyIncome = String(Number(e.detail.value) + 1)
}

// 学历选择器变化
const onEducationChange = (e: any) => {
  educationIndex.value = e.detail.value
  userInfo.value.education = String(Number(e.detail.value) + 1)
}

onMounted(() => {
  getUserInfo()
})
</script>

<style lang="scss" scoped>
// 输入框样式
input {
  min-width: 200rpx;
  text-align: right;
  padding: 4rpx 0;
}

// 选择器样式
picker {
  min-width: 200rpx;
  text-align: right;
  padding: 4rpx 0;
}

// 多选框组样式
checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  padding: 16rpx 0;

  label {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;

    checkbox {
      transform: scale(0.8);
      margin-right: 4rpx;
    }

    text {
      font-size: 24rpx;
      color: #666;
    }
  }
}

// 开关样式
switch {
  transform: scale(0.8);
}

// 表单项样式
.form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 1px solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  .label {
    color: #666;
    font-size: 28rpx;
  }

  .value {
    color: #333;
    font-size: 28rpx;
    text-align: right;
    flex: 1;
    margin-left: 24rpx;
  }
}

// 文本域样式
textarea {
  width: 100%;
  height: 200rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  padding: 24rpx;
  font-size: 28rpx;
  color: #333;
  margin-top: 16rpx;
}

// 保存按钮样式
.save-button {
  position: fixed;
  bottom: 48rpx;
  left: 48rpx;
  right: 48rpx;
  height: 88rpx;
  background: linear-gradient(to right, #3b82f6, #6366f1);
  color: white;
  border-radius: 44rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);

  &:active {
    transform: scale(0.98);
  }
}

// 卡片样式
.card {
  background-color: white;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 32rpx;
  }
}

// 头像区域样式
.avatar-section {
  display: flex;
  align-items: center;
  padding: 32rpx;
  background-color: white;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    border: 4rpx solid #f5f5f5;
  }

  .info {
    margin-left: 24rpx;
    flex: 1;

    .name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;
    }

    .id {
      font-size: 24rpx;
      color: #999;
    }

    .location {
      font-size: 26rpx;
      color: #666;
      margin-top: 8rpx;
    }
  }
}
</style>
