<template>
	<view class="person-page">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="个人资料"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="140rpx"
			:border="false"
			backgroundColor="#eeeeee"
		></uni-nav-bar>

		<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="form.avatar" mode="aspectFill" class="avatar" />
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 姓名 -->
			<view class="row">
				<view class="label"><text>姓名</text><text class="req">*</text></view>
				<view class="value">{{ form.name }}</view>
			</view>

			<!-- 性别 -->
			<view class="row" @click="onPickGender">
				<view class="label"><text>性别</text><text class="req">*</text></view>
				<view class="value with-arrow">
					<text>{{ form.gender }}</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.birthday || '' }}</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="onEditEmail">
				<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="onPickHospital">
				<view class="label"><text>医院</text><text class="req">*</text></view>
				<view class="value with-arrow">
					<text>{{ form.hospital }}</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.department }}</text>
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 科室电话 -->
			<view class="row" @click="onEditDeptPhone">
				<view class="label"><text>科室电话</text><text class="req">*</text></view>
				<view class="value with-arrow">
					<text>{{ form.departmentPhone }}</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.title }}</text>
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 执业医师证编号 -->
			<view class="row" @click="onEditLicenseNo">
				<view class="label"><text>执业医师证编号</text><text class="req">*</text></view>
				<view class="value with-arrow">
					<text>{{ form.licenseNo }}</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="form.licenseImg" 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">
					<text>{{ form.specialty }}</text>
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>

			<!-- 个人简介 -->
			<view class="row" @click="onEditIntro">
				<view class="label"><text>个人简介</text></view>
				<view class="value with-arrow">
					<uni-icons type="right" size="18" color="#bbb" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from "@dcloudio/uni-app";

	const form = ref({
		avatar: '/static/big_background_my.png',
		name: '邱建东',
		gender: '男',
		birthday: '',
		mobile: '17600668628',
		email: '',
		hospital: '北京博爱医院',
		department: '肝病科',
		departmentPhone: '1234567890',
		title: '主任中医师',
		licenseNo: '12345678',
		licenseImg: '/static/big_background_my.png',
		specialty: '肝炎、肝硬化'
	});

	const goBack = () => uni.navigateBack();

	// 通用打开裁剪器
	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 onChooseAvatar = () => {
		openCropper((path) => {
			form.value.avatar = path;
		});
	};

	const onChooseLicenseImg = () => {
		openCropper((path) => {
			form.value.licenseImg = path;
		}, { destWidth: 1000, rectWidth: 500 });
	};

	const onPickGender = () => {};
	const onPickBirthday = () => {};
	const onEditPhone = () => {};
	const onEditEmail = () => {};
	const onPickHospital = () => {};
	const onPickDept = () => {};
	const onEditDeptPhone = () => {};
	const onPickTitle = () => {};
	const onEditLicenseNo = () => {};
	const onEditSpecialty = () => {};
	const onEditIntro = () => {};

	onShow(() => {
		// 可在此处拉取并回填个人资料
	});
</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;
	}
	.with-arrow text {
		margin-right: 14rpx;
	}
	.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;
	}
</style>
