<template>
	<business-page-layout :title="pageTitle" :show-back="true">
		<view class="page">
			<view v-if="loading" class="empty">加载中...</view>
			<!-- 小程序端：勿把 v-else-if 与 v-for 写在同级，否则有数据也可能只显示空态 -->
			<block v-else>
				<view v-if="!patientList.length" class="empty">暂无就诊人</view>
				<view
					v-for="p in patientList"
					:key="p.up_id"
					class="card"
					@click="goDetail(p)"
				>
					<view class="card-main">
						<view class="name-row">
							<text class="pname">{{ p.name || p.patient_name || '—' }}</text>
							<!-- 小程序 :class 不支持 sexClass(p) 方法调用，用对象字面量 -->
							<text
								v-if="p.sex == 1 || p.sex == 2"
								class="sex-tag"
								:class="{ male: p.sex == 1, female: p.sex == 2 }"
							>{{ p.sex == 1 ? '男' : '女' }}</text>
						</view>
						<text class="psub">
							<template v-if="p.mobile || p.patient_mobile">{{ p.mobile || p.patient_mobile }}</template>
							<template v-else>暂无手机号</template>
						</text>
					</view>
					<text class="arrow">›</text>
				</view>
			</block>
		</view>
	</business-page-layout>
</template>

<script>
/**
 * 某微信用户下的就诊人列表页：左主信息 + 右箭头，点进入详情
 */
import BusinessPageLayout from '@/subPackages/sub_business_shared/components/business-page-layout.vue';
import { getPatientListByUser, pickProfileItems } from '@/api/userPatientProfile.js';

export default {
	components: { BusinessPageLayout },
	data() {
		return {
			userId: 0,
			nickname: '',
			patientList: [],
			loading: false,
		};
	},
	computed: {
		pageTitle() {
			return this.nickname ? `就诊人 · ${this.nickname}` : '就诊人列表';
		},
	},
	onLoad(options) {
		this.userId = Number((options && options.user_id) || 0);
		try {
			this.nickname = decodeURIComponent((options && options.nickname) || '');
		} catch (e) {
			this.nickname = (options && options.nickname) || '';
		}
		this.reload();
	},
	methods: {
		async reload() {
			if (!this.userId) {
				this.patientList = [];
				return;
			}
			this.loading = true;
			try {
				const wrap = await getPatientListByUser(this.userId);
				// 有 items 就展示，避免 ok 误判把有效数据丢掉
				this.patientList = pickProfileItems(wrap);
			} catch (e) {
				console.error('就诊人列表加载失败', e);
				this.patientList = [];
			} finally {
				this.loading = false;
			}
		},
		goDetail(p) {
			const upId = Number((p && (p.up_id || p.id)) || 0);
			if (!upId) {
				uni.showToast({ title: '缺少就诊人信息', icon: 'none' });
				return;
			}
			const name = encodeURIComponent((p && (p.name || p.patient_name)) || '');
			uni.navigateTo({
				url: `/subPackages/sub_business_shared/user-patient/detail?up_id=${upId}&name=${name}`,
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.page { padding: 24rpx; }
.card {
	background: #fff; border-radius: 16rpx; padding: 24rpx 20rpx; margin-bottom: 14rpx;
	display: flex; align-items: center; gap: 12rpx;
}
.card-main { flex: 1; min-width: 0; }
.name-row { display: flex; align-items: center; gap: 12rpx; }
.pname { font-size: 30rpx; color: #111827; font-weight: 500; }
.sex-tag {
	font-size: 20rpx; padding: 2rpx 12rpx; border-radius: 8rpx;
	background: #e8f5f2; color: #2a9d8f;
}
.sex-tag.male { background: #e8f0fe; color: #3b82f6; }
.sex-tag.female { background: #fce7f3; color: #db2777; }
.psub { display: block; font-size: 24rpx; color: #9ca3af; margin-top: 8rpx; }
.arrow { font-size: 36rpx; color: #d1d5db; line-height: 1; }
.empty { text-align: center; color: #9ca3af; padding: 80rpx 0; font-size: 28rpx; }
</style>
