<template>
	<full-page mainStyle="background:#f0f0f0" @reachBottom="loadMore()">
		<view class="doctor" :class="{ 'doctor--elder': elderMode }">
			<view class="info" :class="{ 'info--elder': elderMode }">
				<view class="info-row" :class="{ 'info-row--elder': elderMode }">
					<text class="name" :class="{ 'name--elder': elderMode }">系统推荐医生</text>
				</view>
				<view class="info-row" :class="{ 'info-row--elder': elderMode }">
					<text :class="{ 'text--elder': elderMode }">系统推荐一名医生</text>
				</view>
			</view>
			<view class="right" :class="{ 'right--elder': elderMode }">
				<view class="select-btn" :class="{ 'select-btn--elder': elderMode }" @click="select()">选择</view>
				<!-- <view class="consult-count" style="opacity: 0;">当前问诊人数：</view> -->
			</view>
		</view>
		<view v-for="i in list" :key="i._id" class="doctor" :class="{ 'doctor--elder': elderMode }">
			<image v-if="i.avatar" :src="i.avatar" class="avatar" :class="{ 'avatar--elder': elderMode }"
				mode="scaleToFill" />
			<view class="info" :class="{ 'info--elder': elderMode }">
				<view class="info-row" :class="{ 'info-row--elder': elderMode }">
					<text class="name" :class="{ 'name--elder': elderMode }">{{ i.doctorName }}</text>
					<text :class="{ 'title--elder': elderMode }">{{ i.title }}</text>
				</view>
				<view class="info-row" :class="{ 'info-row--elder': elderMode }">
					<text :class="{ 'hospital--elder': elderMode }">震元堂中医院</text>
					<text v-if="i.deptName" :class="{ 'dept--elder': elderMode }"> | {{ i.deptName }}</text>
				</view>
			</view>
			<view class="right" :class="{ 'right--elder': elderMode }">
				<view class="select-btn" :class="{ 'select-btn--elder': elderMode }" @click="select(i)">
					<!-- ￥{{ i.serviceFee }}  -->
					选择
				</view>
				<view class="consult-count" :class="{ 'consult-count--elder': elderMode }">当前问诊人数：{{
					i.pendingOrdersCount }}</view>
			</view>
		</view>
	</full-page>
</template>
<script setup>
import {
	ref,
	computed
} from "vue";
import {
	onLoad,
	onUnload
} from "@dcloudio/uni-app";
import {
	getHlwDoctorList
} from "@/utils/api.js";
import {
	toast
} from "@/utils/widget";

import fullPage from "@/components/full-page.vue";

// 长辈模式状态
const elderMode = ref(false);

// 长辈模式变化监听
function handleElderModeChange(isElder) {
	elderMode.value = isElder;
	console.log('doctor-list页面长辈模式已更新为:', isElder);
}

const loading = ref(false);
const page = ref(1);
const list = ref([]);
const more = ref(false);
// 对 list 进行排序 使得 pendingOrdersCount 最小的排在前面
const newList = computed(() =>
	list.value.sort((a, b) => a.pendingOrdersCount - b.pendingOrdersCount)
);

function loadMore() {
	if (more.value && !loading.value) {
		page.value += 1;
		getList();
	}
}

function select(i = {}) {
	uni.$emit("on-select-doctor", i);
	uni.navigateBack();
}
async function getList() {
	if (loading.value) return;
	loading.value = true;
	const {
		data,
		success,
		message,
		pages
	} = await getHlwDoctorList({
		page: page.value,
		pageSize: 100,
		doctorType: 'west',
	});
	const doctors = Array.isArray(data) ? data : [];
	list.value = page.value === 1 ? doctors : [...list.value, ...doctors];
	more.value = page.value < pages;
	if (!success) {
		toast(message || "查询医生失败");
	}
	loading.value = false;
}
onLoad(() => {
	// 读取长辈模式状态
	const savedElderMode = uni.getStorageSync('elderMode');
	console.log('doctor-list页面从本地存储读取长辈模式状态:', savedElderMode);

	if (savedElderMode !== null && savedElderMode !== undefined) {
		elderMode.value = savedElderMode;
	}

	// 从全局状态读取
	const app = getApp();
	if (app && app.globalData && typeof app.globalData.elderMode === 'boolean') {
		elderMode.value = app.globalData.elderMode;
		console.log('doctor-list页面从全局状态读取长辈模式:', app.globalData.elderMode);
	}

	console.log('doctor-list页面最终长辈模式状态:', elderMode.value);

	// 监听全局长辈模式变化事件
	uni.$on('elderModeChanged', handleElderModeChange);

	getList();
});

onUnload(() => {
	uni.$off('elderModeChanged', handleElderModeChange);
});
</script>
<style lang="scss" scoped>
.doctor {
	display: flex;
	align-items: center;
	padding: 24rpx 30rpx;
	background: white;
	color: #333;

	@at-root &+& {
		border-top: 1px solid #e5e5e5;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		background: red;
	}

	.info {
		width: 0;
		flex-grow: 1;
		line-height: 40rpx;
		color: #666;
		font-size: 28rpx;
		max-width: 100%;
	}

	.info-row {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	text {
		white-space: nowrap;
	}

	.name {
		margin-right: 12rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.right {
		flex-shrink: 0;
		margin-left: 20rpx;
		min-width: 216rpx;
	}
	.select-btn {
		min-width: 180rpx;
		min-height: 60rpx;
		font-size: 24rpx;
		color: white;
		padding: 8rpx 0;
		background: $theme-brown-primary;
		border-radius: 30rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.consult-count {
		margin-top: 12rpx;
		font-size: 24rpx;
		color: $theme-brown-primary;
		text-align: center;
	}
}

/* 长辈模式样式 - 直接使用类名 */
.doctor--elder {
	padding: 36rpx 40rpx !important; // 增加内边距
	min-height: 120rpx !important; // 增加最小高度
	border-top: 2rpx solid #e5e5e5 !important; // 加粗边框
}

.avatar--elder {
	width: 100rpx !important; // 80 * 1.25
	height: 100rpx !important; // 80 * 1.25
	margin-right: 24rpx !important; // 20 * 1.2
}

.info--elder {
	line-height: 56rpx !important; // 40 * 1.4
	font-size: 39rpx !important; // 28 * 1.4
}

.info-row--elder {
	font-size: 39rpx !important; // 28 * 1.4
	line-height: 56rpx !important;
}

.name--elder {
	font-size: 45rpx !important; // 32 * 1.4
	margin-right: 16rpx !important; // 12 * 1.33
	font-weight: bold !important;
}

.text--elder {
	font-size: 39rpx !important; // 28 * 1.4
	font-weight: 500 !important;
}

.title--elder {
	font-size: 39rpx !important; // 28 * 1.4
	font-weight: 500 !important;
}

.hospital--elder {
	font-size: 39rpx !important; // 28 * 1.4
	font-weight: 500 !important;
}

.dept--elder {
	font-size: 39rpx !important; // 28 * 1.4
	font-weight: 500 !important;
}

.right--elder {
	margin-left: 24rpx !important; // 20 * 1.2
	min-width: 260rpx !important; // 增加最小宽度
}

.select-btn--elder {
	min-width: 216rpx !important; // 180 * 1.2
	min-height: 75rpx !important; // 增加最小高度
	padding: 12rpx 0 !important; // 8 * 1.5
	border-radius: 36rpx !important; // 30 * 1.2
	font-size: 34rpx !important; // 24 * 1.4
	font-weight: bold !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.consult-count--elder {
	margin-top: 16rpx !important; // 12 * 1.33
	font-size: 34rpx !important; // 24 * 1.4
	font-weight: 500 !important;
}
</style>