<template>
	<!-- 就诊人/微信用户摘要单元格，点击打开患者视角详情 -->
	<view class="up-cell" @click.stop="handleOpen">
		<view class="up-row">
			<image class="avatar" :src="userAvatar" mode="aspectFill" />
			<view class="text">
				<text class="lbl">微信用户</text>
				<text class="val">{{ userNickname }}</text>
			</view>
		</view>
		<view class="up-row">
			<view class="avatar placeholder" />
			<view class="text">
				<text class="lbl">就诊人</text>
				<text class="val link">{{ patientName }}</text>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 列表内紧凑展示微信用户 + 就诊人，点击抛出 open 事件供父级打开详情抽屉
 */
export default {
	name: 'UserPatientCell',
	props: {
		/** 订单行或用户管理行：需含 user / user_patient / up_id / patient */
		row: { type: Object, default: () => ({}) },
	},
	emits: ['open'],
	computed: {
		user() {
			return this.row.user || {};
		},
		patient() {
			return this.row.user_patient || this.row.userPatient || this.row.patient || {};
		},
		upId() {
			if (typeof this.patient === 'object' && this.patient) {
				return Number(this.patient.id || this.row.up_id || 0);
			}
			return Number(this.row.up_id || 0);
		},
		userNickname() {
			return this.user.nickname || '—';
		},
		userAvatar() {
			return this.user.avatarurl || '/static/image/default-avatar.png';
		},
		patientName() {
			if (typeof this.patient === 'string') return this.patient || '—';
			return (this.patient && this.patient.name) || this.row.patient || '—';
		},
	},
	methods: {
		handleOpen() {
			if (!this.upId) {
				uni.showToast({ title: '缺少就诊人信息', icon: 'none' });
				return;
			}
			this.$emit('open', { upId: this.upId, patientName: this.patientName });
		},
	},
};
</script>

<style lang="scss" scoped>
.up-cell {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}
.up-row {
	display: flex;
	align-items: center;
	gap: 12rpx;
}
.avatar {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	background: #f3f4f6;
	flex-shrink: 0;
}
.avatar.placeholder {
	background: #e5e7eb;
}
.text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.lbl {
	font-size: 20rpx;
	color: #9ca3af;
}
.val {
	font-size: 24rpx;
	color: #374151;
}
.val.link {
	color: #6acdbb;
}
</style>
