<template>
	<business-page-layout title="会员管理" :show-back="true">
		<view class="page">
			<view class="search-bar">
				<input
					class="search-input"
					v-model="keyword"
					placeholder="昵称 / 手机 / 就诊人"
					confirm-type="search"
					@confirm="reload"
				/>
				<view class="search-btn" @click="reload">查询</view>
			</view>
			<view v-if="loading" class="empty">加载中...</view>
			<view v-else-if="!list.length" class="empty">暂无用户</view>
			<view
				v-for="item in list"
				:key="item.id"
				class="card"
				@click="goPatients(item)"
			>
				<view class="user-row">
					<image class="avatar" :src="avatarSrc(item.avatarurl)" mode="aspectFill" />
					<view class="text">
						<text class="name">{{ item.nickname || '—' }}</text>
						<text class="sub">
							ID：{{ item.id || '—' }}
							<template v-if="item.mobile"> · {{ item.mobile }}</template>
						</text>
					</view>
					<text class="chevron">›</text>
				</view>
				<!-- 就诊人标签化：一行多枚、自动换行 -->
				<view v-if="item.patients && item.patients.length" class="patients">
					<view
						v-for="p in item.patients"
						:key="p.up_id"
						class="patient-tag"
					>
						<text class="tag-text">{{ patientTagText(p) }}</text>
					</view>
				</view>
				<view v-else class="patients empty-p">暂无就诊人</view>
			</view>
		</view>
	</business-page-layout>
</template>

<script>
/**
 * 会员管理用户列表：就诊人以标签展示；点用户进入就诊人列表页
 */
import BusinessPageLayout from '@/subPackages/sub_business_shared/components/business-page-layout.vue';
import { getWxUserList, pickProfileItems } from '@/api/userPatientProfile.js';

export default {
	components: { BusinessPageLayout },
	data() {
		return {
			keyword: '',
			list: [],
			loading: false,
		};
	},
	onShow() {
		this.reload();
	},
	methods: {
		avatarSrc(raw) {
			const s = String(raw || '').trim();
			return s || '/static/image/default-avatar.png';
		},
		/** 标签文案：姓名 或 姓名 · 脱敏手机 */
		patientTagText(p) {
			const name = (p && p.name) || '—';
			const mobile = (p && p.mobile) ? String(p.mobile).trim() : '';
			return mobile ? `${name} · ${mobile}` : name;
		},
		async reload() {
			this.loading = true;
			try {
				// 无关键字时不要传 keyword，uni 请求会把 undefined 序列化成字符串 "undefined"
				const params = {
					page: 1,
					pageSize: 50,
				};
				const kw = (this.keyword || '').trim();
				if (kw) {
					params.keyword = kw;
				}
				const wrap = await getWxUserList(params);
				this.list = pickProfileItems(wrap);
			} finally {
				this.loading = false;
			}
		},
		/** 跳转就诊人列表页 */
		goPatients(item) {
			const userId = Number((item && item.id) || 0);
			if (!userId) {
				uni.showToast({ title: '缺少用户信息', icon: 'none' });
				return;
			}
			const nick = encodeURIComponent((item && item.nickname) || '');
			uni.navigateTo({
				url: `/subPackages/sub_business_shared/user-patient/patients?user_id=${userId}&nickname=${nick}`,
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.page { padding: 24rpx; }
.search-bar { display: flex; gap: 12rpx; margin-bottom: 20rpx; }
.search-input {
	flex: 1; background: #fff; border-radius: 12rpx;
	padding: 16rpx 20rpx; font-size: 26rpx;
}
.search-btn {
	background: #6acdbb; color: #fff; padding: 16rpx 28rpx;
	border-radius: 12rpx; font-size: 26rpx;
}
.card {
	background: #fff; border-radius: 16rpx; padding: 20rpx 20rpx 16rpx; margin-bottom: 14rpx;
}
.user-row { display: flex; align-items: center; gap: 14rpx; }
.avatar { width: 56rpx; height: 56rpx; border-radius: 50%; background: #e8f5f2; flex-shrink: 0; }
.text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4rpx; }
.name { font-size: 28rpx; color: #111827; font-weight: 500; }
.sub { font-size: 22rpx; color: #9ca3af; }
.chevron { font-size: 32rpx; color: #d1d5db; line-height: 1; }
.patients {
	margin-top: 14rpx; padding-top: 14rpx; border-top: 1rpx solid #eef2f1;
	display: flex; flex-wrap: wrap; gap: 12rpx;
}
.patient-tag {
	padding: 6rpx 16rpx; border-radius: 8rpx;
	background: #f0faf7; border: 1rpx solid #6acdbb;
}
.tag-text { font-size: 22rpx; color: #1a9b88; line-height: 1.4; }
.empty-p { font-size: 22rpx; color: #d1d5db; }
.empty { text-align: center; color: #9ca3af; padding: 80rpx 0; font-size: 28rpx; }
</style>
