<template>
	<view class="person-page">
		<!-- 顶部导航栏 -->
		<navBar title="个人资料" />

		<scroll-view class="content" scroll-y>
			<!-- 基本资料分组 -->
			<view class="section-header">基本资料</view>

			<!-- 头像 -->
			<view class="row" @click="onChooseAvatar">
				<view class="label"><text>头像</text><text class="req">*</text></view>
				<view class="value value-avatar">
					<image :src="docUrl+form.photo" mode="aspectFill" class="avatar" />
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 姓名 -->
			<view class="row" @click="onEdit('name',form.realName)">
				<view class="label"><text>姓名</text><text class="req">*</text></view>
				<view class="value with-arrow">
					<text>{{ form.realName }}</text>
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 性别 -->
			<view class="row" @click="onPickGender">
				<view class="label"><text>性别</text><text class="req">*</text></view>
				<view class="value with-arrow">
					<text>{{ getGenderText(form.sex) }}</text>
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 出生日期 -->
			<view class="row" @click="onPickBirthday">
				<view class="label"><text>出生日期</text></view>
				<view class="value with-arrow">
					<text>{{ form.birthDate || '' }}</text>
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 手机号码 -->
			<view class="row" @click="onEditPhone">
				<view class="label"><text>手机号</text><text class="req">*</text></view>
				<view class="value with-arrow">
					<text>{{ form.mobile }}</text>
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 邮箱 -->
			<view class="row" @click="onEdit('email',form.email)">
				<view class="label"><text>邮箱</text></view>
				<view class="value with-arrow">
					<text>{{ form.email || '' }}</text>
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 专业资料分组 -->
			<view class="section-header">专业资料</view>

			<!-- 医院地址 -->
			<view class="row" @click="openAreaPicker">
				<view class="label"><text>医院</text><text class="req">*</text></view>
				<view class="value with-arrow">
					<text v-if="!regionText" class="placeholder">请选择医院</text>
					<text v-else>{{ regionText }}</text>
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 科室 -->
			<view class="row" @click="onPickDept">
				<view class="label"><text>科室</text><text class="req">*</text></view>
				<view class="value with-arrow">
					<text>{{ form.officeName }}</text>
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 科室电话 -->
			<view class="row" @click="onEdit('officePhone',form.officePhone)">
				<view class="label"><text>科室电话</text><text class="req">*</text></view>
				<view class="value with-arrow">
					<text>{{ form.officePhone }}</text>
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 职称 -->
			<view class="row" @click="onPickTitle">
				<view class="label"><text>职称</text></view>
				<view class="value with-arrow">
					<text>{{ form.positionName }}</text>
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 执业医师证编号 -->
			<view class="row" @click="onEdit('certificate',form.certificate)">
				<view class="label"><text>执业医师证编号</text><text class="req">*</text></view>
				<view class="value with-arrow">
					<text>{{ form.certificate }}</text>
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 执业医师证照片/胸牌 -->
			<view class="row" @click="onChooseLicenseImg">
				<view class="label"><text>执业医师证图片或胸牌</text><text class="req">*</text></view>
				<view class="value value-license">
					<image :src="docUrl+form.certificateImg" mode="aspectFill" class="license-thumb" />
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 专长 -->
			<view class="row" @click="onEditSpecialty">
				<view class="label"><text>专长</text></view>
				<view class="value with-arrow intro">
					<text>{{ getSpecialtyText() }}</text>
					
				</view>
				<uni-icons type="right" size="18" color="#bbb" />
			</view>

			<!-- 个人简介 -->
			<view class="row" @click="onEdit('intro',form.intro)">
				<view class="label"><text>个人简介</text></view>
				<view class="value with-arrow intro">
					<text>{{ form.intro || '暂无简介' }}</text>
					
				</view>
				<uni-icons type="right" size="18" color="#bbb" />
			</view>
		</scroll-view>

		<!-- 省市区选择器 -->
		<view v-if="showAreaPicker" class="picker-mask" @click="closeAreaPicker"></view>
		<view v-if="showAreaPicker" class="picker-panel">
			<view class="picker-header">
				<text class="picker-btn" @click="closeAreaPicker">取消</text>
				<text class="picker-title">选择地区</text>
				<text class="picker-btn ok" @click="confirmArea">确定</text>
			</view>
			<picker-view v-if="provinces.length && cities.length && areas.length" class="picker-view" :indicator-style="indicatorStyle" :value="pickerIndex" @change="onAreaChange">
				<picker-view-column>
					<view v-for="(p,pi) in provinces" :key="pi" class="picker-item">{{ p.name }}</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(c,ci) in cities" :key="ci" class="picker-item">{{ c.name }}</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(a,ai) in areas" :key="ai" class="picker-item">{{ a.name }}</view>
				</picker-view-column>
			</picker-view>
			<view v-else class="picker-empty">地区数据加载中...</view>
		</view>

		<!-- 日期选择器 -->
		<view v-if="showDatePicker" class="picker-mask" @click="closeDatePicker"></view>
		<view v-if="showDatePicker" class="picker-panel">
			<view class="picker-header">
				<text class="picker-btn" @click="closeDatePicker">取消</text>
				<text class="picker-title">选择出生日期</text>
				<text class="picker-btn ok" @click="confirmDate">确定</text>
			</view>
			<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="datePickerIndex" @change="onDateChange">
				<picker-view-column>
					<view v-for="(year, index) in years" :key="index" class="picker-item">{{ year }}年</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(month, index) in months" :key="index" class="picker-item">{{ month }}月</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(day, index) in days" :key="index" class="picker-item">{{ day }}日</view>
				</picker-view-column>
			</picker-view>
		</view>

		<!-- 科室选择器 -->
		<view v-if="showDeptPicker" class="picker-mask" @click="closeDeptPicker"></view>
		<view v-if="showDeptPicker" class="picker-panel">
			<view class="picker-header">
				<text class="picker-btn" @click="closeDeptPicker">取消</text>
				<text class="picker-title">选择科室</text>
				<text class="picker-btn ok" @click="confirmDept">确定</text>
			</view>
			<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="deptPickerIndex" @change="onDeptChange">
				<picker-view-column>
					<view v-for="(office, index) in officeList" :key="index" class="picker-item">{{ office.name }}</view>
				</picker-view-column>
			</picker-view>
		</view>

		<!-- 职称选择器 -->
		<view v-if="showTitlePicker" class="picker-mask" @click="closeTitlePicker"></view>
		<view v-if="showTitlePicker" class="picker-panel">
			<view class="picker-header">
				<text class="picker-btn" @click="closeTitlePicker">取消</text>
				<text class="picker-title">选择职称</text>
				<text class="picker-btn ok" @click="confirmTitle">确定</text>
			</view>
			<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="titlePickerIndex" @change="onTitleChange">
				<picker-view-column>
					<view v-for="(title, index) in titleList" :key="index" class="picker-item">{{ title.name }}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
	<!-- 专长多选弹窗 -->
<view v-if="showSpecialtyPicker" class="picker-mask" @click="closeSpecialtyPicker"></view>
<view v-if="showSpecialtyPicker" class="picker-panel specialties" @click.stop>
  <view class="picker-header">
    <text class="picker-btn" @click="closeSpecialtyPicker">取消</text>
    <text class="picker-title">请选择专长</text>
    <text class="picker-btn ok" @click="confirmSpecialties">确定</text>
  </view>
  <view class="specialty-grid">
    <view
      v-for="(item,idx) in specialtyOptions"
      :key="idx"
      class="specialty-item"
      :class="{ selected: isSpecialtySelected(item), disabled: isMaxSelected && !isSpecialtySelected(item) }"
      @click.stop="toggleSpecialty(item)"
    >
      <text>{{ item }}</text>
    </view>
  </view>
  <view class="tips">最多可选择10项（{{ selectedSpecialties.length }}/10）</view>
</view>
<qf-image-cropper v-if="showCropper" :src="cropperSrc"    :width="400" :height="400" :radius="30" @crop="handleCrop"></qf-image-cropper>
<!-- 性别选择器 -->
<view v-if="showGenderPicker" class="picker-mask" @click="closeGenderPicker"></view>
<view v-if="showGenderPicker" class="picker-panel" @click.stop>
  <view class="picker-header">
    <text class="picker-btn" @click="closeGenderPicker">取消</text>
    <text class="picker-title">选择性别</text>
    <text class="picker-btn ok" @click="confirmGender">确定</text>
  </view>
  <picker-view class="picker-view" :indicator-style="indicatorStyle" :value="genderPickerIndex" @change="onGenderChange">
    <picker-view-column>
      <view v-for="(g, gi) in genderList" :key="gi" class="picker-item">{{ g }}</view>
    </picker-view-column>
  </picker-view>
</view>
</template>

<script setup>
	import { ref,computed } from 'vue';
	import { onShow,onLoad,onUnload} from "@dcloudio/uni-app";
    import api from '@/api/api';
	import areaList from '@/utils/areaList.js';
	import docUrl from '@/utils/docUrl';
	import navTo from '@/utils/navTo';
	import navBar from '@/components/navBar/navBar.vue';
	import QfImageCropper from '@/components/qf-image-cropper/qf-image-cropper.vue';
	const form = ref({
		// 基本资料字段
		photo: '',
		realName: '',
		sex: 0,
		birthDate: '',
		mobile: '',
		email: '',
		// 专业资料字段
		hospitalName: '',
		officeName: '',
		officePhone: '',
		positionName: '',
		certificate: '',
		certificateImg: '',
		intro: '',
		// 地址相关字段
		provId: 0,
		cityId: 0,
		countyId: 0,
		// 专长列表
		specialityList: []
	});

	// 地址选择相关变量
	const regionText = ref('');
	const provinces = ref([]);
	const cities = ref([]);
	const areas = ref([]);
	const pickerIndex = ref([0,0,0]);
	const showAreaPicker = ref(false);
	const indicatorStyle = `height: 80rpx;`;

	// 日期选择相关变量
	const showDatePicker = ref(false);
	const years = ref([]);
	const months = ref([]);
	const days = ref([]);
	const datePickerIndex = ref([0, 0, 0]);
	const cropperSrc = ref('');
	const showCropper = ref(false);
	// 科室选择相关变量
	const showDeptPicker = ref(false);
	
// 性别选择
const showGenderPicker = ref(false)
const genderList = ref(['男', '女'])
const genderPickerIndex = ref([0])

const onPickGender = () => {
  // 打开时根据当前值预选
  const idx = genderList.value.findIndex(g => g === getGenderText(form.value.sex))
  genderPickerIndex.value = [idx >= 0 ? idx : 0]
  showGenderPicker.value = true
}
const closeGenderPicker = () => { showGenderPicker.value = false }
const onGenderChange = (e) => { genderPickerIndex.value = e.detail.value }
const confirmGender = () => {
  const idx = genderPickerIndex.value[0] || 0
  const g = genderList.value[idx]
  // 写回 form.sex（0男/1女 或根据你项目定义）
  form.value.sex = g === '男' ? 0 : 1
  showGenderPicker.value = false
}
	const deptList = ref([
		'内科', '外科', '妇产科', '儿科', '眼科', '耳鼻喉科', '口腔科', '皮肤科',
		'神经科', '精神科', '肿瘤科', '康复科', '急诊科', '麻醉科', '病理科',
		'检验科', '影像科', '药剂科', '护理部', '肝病科', '消化科', '心内科',
		'呼吸科', '肾内科', '内分泌科', '血液科', '风湿科', '感染科', 'ICU',
		'手术室', '门诊部', '住院部', '体检中心', '其他'
	]);
	const deptPickerIndex = ref([0]);
  const onEdit = (name,value) => {
	navTo({
		url: `/pages_app/writeInfo/writeInfo?editType=${name}&value=${value}`
	});
  };
	// 职称选择相关变量
	const showTitlePicker = ref(false);
	const titleList = ref([]);
	const diseaseList = ref([]);
	const officeList = ref([]);
	const titlePickerIndex = ref([0]);
	// 专长多选
const showSpecialtyPicker = ref(false)
const specialtyOptions = ref([
  '肝炎','药物肝病','中西医结合','肝硬化','肝衰竭','乙型肝炎','肝癌介入','寄生虫病',
  '产科肝病','胆结石','小儿肝病','肝癌外科','胆囊炎','免疫肝病','脂肪肝病','胆囊息肉',
  '酒精肝病','肝癌内科','先天肝病','中医肝胆','肝移植','其他'
])
const selectedSpecialties = ref([])
const isMaxSelected = computed(() => selectedSpecialties.value.length >= 10)
	const onEditSpecialty = () => {
  selectedSpecialties.value = (form.value.specialityList || []).map(i => i.diseaseName || i)
  showSpecialtyPicker.value = true
}
	const goBack = () => uni.navigateBack();
	const closeSpecialtyPicker = () => { showSpecialtyPicker.value = false }
const isSpecialtySelected = (name) => selectedSpecialties.value.includes(name)
const toggleSpecialty = (name) => {
  const i = selectedSpecialties.value.indexOf(name)
  if (i > -1) { selectedSpecialties.value.splice(i,1); return }
  if (isMaxSelected.value) return
  selectedSpecialties.value.push(name)
}
const confirmSpecialties = () => {
  form.value.specialityList = selectedSpecialties.value.map(n => ({ diseaseName: n }))
  showSpecialtyPicker.value = false
}
	// 获取性别文本
	const getGenderText = (sex) => {
		const genderMap = { 0: '男', 1: '女' };
		return genderMap[sex] || '';
	};
	const getDiseaseList = async () => {
		const res = await api.getDiseaseList({});
		console.log('疾病列表API响应:', res);
		if (res.code === 200) {
			diseaseList.value = res.data;
		}
	};
	const getPositionList = async () => {
		const res = await api.getPositionList({});
		console.log('职称列表API响应:', res);
		if (res.code === 200 ) {
			titleList.value = res.data
		}
	};
	const getOfficeList = async () => {
		const res = await api.getOfficeList({});
		console.log('科室列表API响应:', res);
		if (res.code === 200 ) {
			officeList.value = res.data
		}
	};

	// 获取专长文本
	const getSpecialtyText = () => {
		if (!form.value.specialityList || form.value.specialityList.length === 0) {
			return '暂无专长';
		}
		return form.value.specialityList.map(item => item.diseaseName).join('、');
	};
    const getExpertByUuid = async () => {
        try {
            const res = await api.getExpertByUuid({});
            console.log('专家信息API响应:', res);
            
            if (res.code === 200 && res.data && res.data.expert) {
                const expert = res.data.expert;
                const specialityList = res.data.specialityList || [];
                
                // 直接使用API返回的字段结构
                form.value = {
                    photo: expert.photo || '',
                    realName: expert.realName || '',
                    sex: expert.sex || 0,
                    birthDate: expert.birthDate || '',
                    mobile: expert.mobile || '',
                    email: expert.email || '',
                    hospitalName: expert.hospitalName || '',
                    officeName: expert.officeName || '',
                    officePhone: expert.officePhone || '',
                    positionName: expert.positionName || '',
                    certificate: expert.certificate || '',
                    certificateImg: expert.certificateImg || '',
                    intro: expert.intro || '',
                    provId: expert.provId || 0,
                    cityId: expert.cityId || 0,
                    countyId: expert.countyId || 0,
                    specialityList: specialityList
                };
                
                // 设置地址信息（如果有省市区ID）
                if (expert.provId && expert.cityId && expert.countyId) {
                    // 这里可以根据ID设置地址，暂时先设置医院名称
                    regionText.value = expert.hospitalName || '';
                }
                
                console.log('解析后的表单数据:', form.value);
            } else {
                console.error('获取专家信息失败:', res.msg || '未知错误');
                uni.showToast({
                    title: res.msg || '获取个人信息失败',
                    icon: 'error',
                    duration: 2000
                });
            }
        } catch (error) {
            console.error('获取专家信息异常:', error);
            uni.showToast({
                title: '网络请求失败',
                icon: 'error',
                duration: 2000
            });
        }
    };
	// 通用打开裁剪器
	const openCropper = (callback, opts = {}) => {
		const { destWidth = 600, rectWidth = 300, fileType = 'jpg' } = opts;
		const url = `/uni_modules/uview-plus/components/u-avatar-cropper/u-avatar-cropper?destWidth=${destWidth}&rectWidth=${rectWidth}&fileType=${fileType}`;
		uni.navigateTo({
			url,
			success: (res) => {
				res.eventChannel.on('uAvatarCropper', (path) => {
					if (typeof callback === 'function') callback(path);
				});
			}
		});
	};
    const cropType = ref('avatar');
	const onChooseAvatar = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album'],
			success: (res) => {
				cropperSrc.value = res.tempFilePaths[0];
				showCropper.value = true;
			}
		});
	};
	const handleCrop = (e) => {
		console.log(e);
		if(cropType.value === 'avatar'){
			form.value.photo = e.tempFilePath;
		}else{
			form.value.certificateImg = e.tempFilePath;
		}
		
		showCropper.value = false;
	};

	const onChooseLicenseImg = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album'],
			success: (res) => {
				cropperSrc.value = res.tempFilePaths[0];
				cropType.value = 'license';
				showCropper.value = true;
			}
		});
	};

	// 地址选择相关函数
	const normalizeNode = (node) => ({
		code: node?.code || '',
		name: node?.label || node?.value || node?.name || '',
		children: Array.isArray(node?.children) ? node.children : []
	});

	const getAreaTree = () => {
		const raw = areaList && (areaList.default || areaList);
		return Array.isArray(raw) ? raw.map(normalizeNode) : [];
	};

	const buildData = () => {
		const tree = getAreaTree();
		provinces.value = tree.length ? tree : [{ code: '', name: '', children: [] }];
		const pIdx = Math.min(pickerIndex.value[0], Math.max(provinces.value.length - 1, 0));
		const pNode = provinces.value[pIdx];
		cities.value = (pNode?.children || []).map(normalizeNode);
		if (!cities.value.length) cities.value = [{ code: '', name: '', children: [] }];
		const cIdx = Math.min(pickerIndex.value[1], Math.max(cities.value.length - 1, 0));
		const cNode = cities.value[cIdx];
		areas.value = (cNode?.children || []).map(normalizeNode);
		if (!areas.value.length) areas.value = [{ code: '', name: '' }];
	};

	const openAreaPicker = () => {
		showAreaPicker.value = true;
		pickerIndex.value = [0,0,0];
		buildData();
	};

	const closeAreaPicker = () => { 
		showAreaPicker.value = false; 
	};

	const onAreaChange = (e) => {
		const val = (e && e.detail && e.detail.value) ? e.detail.value : [0,0,0];
		const [pi, ci, ai] = val;
		if (pi !== pickerIndex.value[0]) {
			pickerIndex.value = [pi, 0, 0];
			buildData();
			return;
		}
		if (ci !== pickerIndex.value[1]) {
			pickerIndex.value = [pi, ci, 0];
			buildData();
			return;
		}
		pickerIndex.value = [pi, ci, ai];
	};

	const confirmArea = () => {
		const p = provinces.value[pickerIndex.value[0]];
		const c = cities.value[pickerIndex.value[1]];
		const a = areas.value[pickerIndex.value[2]];
		regionText.value = [p?.name, c?.name, a?.name].filter(Boolean).join(' ');
		// 更新表单中的医院地址
		form.value.hospitalName = regionText.value;
		closeAreaPicker();
	};

	// 日期选择相关函数
	const initDatePicker = () => {
		const currentDate = new Date();
		const currentYear = currentDate.getFullYear();
		const currentMonth = currentDate.getMonth() + 1;
		const currentDay = currentDate.getDate();
		
		// 生成年份列表（从1900年到今年）
		years.value = [];
		for (let year = currentYear; year >= 1900; year--) {
			years.value.push(year);
		}
		
		// 生成月份列表
		months.value = [];
		for (let month = 1; month <= 12; month++) {
			months.value.push(month);
		}
		
		// 生成日期列表
		updateDays(currentYear, currentMonth);
		
		// 设置默认选中当前日期
		datePickerIndex.value = [0, currentMonth - 1, currentDay - 1];
	};

	const updateDays = (year, month) => {
		const daysInMonth = new Date(year, month, 0).getDate();
		days.value = [];
		for (let day = 1; day <= daysInMonth; day++) {
			days.value.push(day);
		}
	};

	const openDatePicker = () => {
		showDatePicker.value = true;
		initDatePicker();
	};

	const closeDatePicker = () => {
		showDatePicker.value = false;
	};

	const onDateChange = (e) => {
		const val = e.detail.value;
		const [yearIndex, monthIndex, dayIndex] = val;
		
		const selectedYear = years.value[yearIndex];
		const selectedMonth = months.value[monthIndex];
		
		// 更新日期列表
		updateDays(selectedYear, selectedMonth);
		
		// 检查选择的日期是否晚于今天
		const selectedDate = new Date(selectedYear, selectedMonth - 1, days.value[dayIndex] || 1);
		const today = new Date();
		today.setHours(0, 0, 0, 0);
		
		if (selectedDate > today) {
			// 如果选择的日期晚于今天，重置为今天
			const currentDate = new Date();
			const currentYear = currentDate.getFullYear();
			const currentMonth = currentDate.getMonth() + 1;
			const currentDay = currentDate.getDate();
			
			const yearIdx = years.value.findIndex(y => y === currentYear);
			const monthIdx = months.value.findIndex(m => m === currentMonth);
			const dayIdx = days.value.findIndex(d => d === currentDay);
			
			if (yearIdx !== -1 && monthIdx !== -1 && dayIdx !== -1) {
				datePickerIndex.value = [yearIdx, monthIdx, dayIdx];
			}
		} else {
			datePickerIndex.value = val;
		}
	};

	const confirmDate = () => {
		const [yearIndex, monthIndex, dayIndex] = datePickerIndex.value;
		const selectedYear = years.value[yearIndex];
		const selectedMonth = months.value[monthIndex];
		const selectedDay = days.value[dayIndex];
		
		// 格式化日期
		const formattedDate = `${selectedYear}-${String(selectedMonth).padStart(2, '0')}-${String(selectedDay).padStart(2, '0')}`;
		
		// 更新表单数据
		form.value.birthDate = formattedDate;
		
		closeDatePicker();
	};

	// 科室选择相关函数
	const openDeptPicker = () => {
		showDeptPicker.value = true;
		// 如果当前有选中的科室，设置默认选中项
		if (form.value.officeName) {
			const index = deptList.value.findIndex(dept => dept === form.value.officeName);
			if (index !== -1) {
				deptPickerIndex.value = [index];
			}
		}
	};

	const closeDeptPicker = () => {
		showDeptPicker.value = false;
	};

	const onDeptChange = (e) => {
		const val = e.detail.value;
		deptPickerIndex.value = val;
	};

	const confirmDept = () => {
		const selectedIndex = deptPickerIndex.value[0];
		const selectedDept = deptList.value[selectedIndex];
		
		// 更新表单数据
		form.value.officeName = selectedDept;
		
		closeDeptPicker();
	};

	// 职称选择相关函数
	const openTitlePicker = () => {
		showTitlePicker.value = true;
		// 如果当前有选中的职称，设置默认选中项
		if (form.value.positionName) {
			const index = titleList.value.findIndex(title => title === form.value.positionName);
			if (index !== -1) {
				titlePickerIndex.value = [index];
			}
		}
	};

	const closeTitlePicker = () => {
		showTitlePicker.value = false;
	};

	const onTitleChange = (e) => {
		const val = e.detail.value;
		titlePickerIndex.value = val;
	};

	const confirmTitle = () => {
		const selectedIndex = titlePickerIndex.value[0];
		console.log(titleList.value[selectedIndex]);
		const selectedTitle = titleList.value[selectedIndex].name;
		
		// 更新表单数据
		form.value.positionName = selectedTitle;
		
		closeTitlePicker();
	};

	const onPickBirthday = () => {
		openDatePicker();
	};
	const onEditPhone = () => {};
	const onEditEmail = () => {};
	const onPickDept = () => {
		openDeptPicker();
	};
	const onEditDeptPhone = () => {};
	const onPickTitle = () => {
		openTitlePicker();
	};
	const onEditLicenseNo = () => {};
	
	const onEditIntro = () => {};
     onLoad(() => {
		getExpertByUuid();
	});
	onShow(() => {
		// 可在此处拉取并回填个人资料
		uni.$off('writeInfoSaved')
  uni.$on('writeInfoSaved', ({ editType, content }) => {
    switch (editType) {
      case 'email':        form.value.email = content; break
      case 'name':         form.value.realName = content; break
      case 'officePhone':  form.value.officePhone = content; break
      case 'certificate':  form.value.certificate = content; break
      case 'intro':        form.value.intro = content; break
      default: break
    }
  })
		getPositionList();
		getOfficeList();
		//getDiseaseList();
	});
	onUnload(() => {
  uni.$off('writeInfoSaved')
})
</script>

<style lang="scss" scoped>
	.person-page {
		background-color: #ffffff;
		height: 100vh;
	}
	.content {
		position: fixed;
		top: calc(var(--status-bar-height) + 44px);
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}

	.section-header {
		background-color: #d9d9d9;
		color: #8B2316;
		font-size: 28rpx;
		padding: 18rpx 24rpx;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}

	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 24rpx;
		border-bottom: 1px solid #f2f2f2;
	}
	.label {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #222;
	}
	.req {
		color: #e44d3a;
		margin-left: 8rpx;
	}
	.value {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		color: #666;
		font-size: 30rpx;
	}
	.intro{
		flex: 1;
		max-width:80%;
		
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.with-arrow text {
		
		margin-right: 14rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.value-avatar {
		gap: 14rpx;
	}
	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 12rpx;
		background-color: #f5f5f5;
	}
	.value-license {
		gap: 14rpx;
	}
	.license-thumb {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		background-color: #f5f5f5;
	}

	.placeholder {
		color: #bbb;
	}

	/* 地区选择器样式 */
	.picker-mask {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0,0,0,0.4);
		z-index: 1000;
	}

	.picker-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		z-index: 1001;
	}

	.picker-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 24rpx;
		border-bottom: 1rpx solid #eee;
	}

	.picker-title {
		font-size: 30rpx;
		color: #333;
	}

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

	.picker-btn.ok {
		color: #38c1b1;
	}

	.picker-view {
		height: 480rpx;
	}

	.picker-item {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #333;
	}

	.picker-empty {
		padding: 40rpx;
		text-align: center;
		color: #999;
	}
	/* 专长弹窗 */
.picker-panel.specialties { max-height: 70vh; }
.specialty-grid {
  padding: 24rpx;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  max-height: calc(70vh - 160rpx);
  overflow-y: auto;
}
.specialty-item {
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 24rpx 10rpx;
  text-align: center;
  font-size: 26rpx;
  color: #333;
  background: #fff;
}
.specialty-item.selected {
  border-color: #8B2316;
  color: #8B2316;
  background: #fff7f5;
}
.specialty-item.disabled {
  opacity: .5;
}
.tips {
  padding: 16rpx 24rpx;
  font-size: 24rpx;
  color: #999;
}
</style>
