<template>
	<view class="select-page">
		
        <view class="navbox">
			 <view class="status_bar"></view>
			 <uni-nav-bar
			left-icon="left"
			title="搜索患者"
			@clickLeft="goBack"
			
			color="#8B2316"
			
			:border="false"
			backgroundColor="#eee"
		>
			
		</uni-nav-bar>
		 </view>

		<!-- 搜索框 -->
		<view class="search-bar">
			<view class="input-wrap">
				<input class="search-input" v-model.trim="keyword" placeholder="搜索患者的备注名、昵称或手机号" placeholder-class="ph" @input="$u.debounce(onSearch, 500)" />
			</view>
			<view class="search-btn" @click="onSearch">
				<uni-icons type="search" size="50rpx" color="#999" />
			</view>
		</view>

        <!-- 列表 -->
        <scroll-view class="list" scroll-y>
            <view class="item" @click="goDetail(p.uuid)"  v-for="p in availablePatientList" :key="p.uuid">
                <image class="avatar" :src="docUrl + (p.photo || '')" mode="aspectFill" />
                <view class="name">{{ p.nickname || p.realName }}</view>
            </view>
			<empty v-if="availablePatientList.length == 0" :emptyDesc="'暂无搜索结果'"></empty>
        </scroll-view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import docUrl from '@/utils/docUrl.js'
	import { onShow,onLoad,onBackPress} from "@dcloudio/uni-app";
	import empty from "@/components/empty/empty.vue"
    import api from '@/api/api.js'
	import navTo from '@/utils/navTo.js'
    import navBar from '@/components/navBar/navBar.vue'
    const from = ref('');
    const keyword = ref('')
    const patientList = ref([])
	const availablePatientList = ref([])
	// 计算属性：显示所有患者，但标记已选中的状态
	// const availablePatientList = computed(() => {
	// 	return patientList.value
	// })
	
	onBackPress(() => {
		if(!from.value){
			plus.runtime.quit();
			return true;
		}
	});
    const patientListByGBK = async () => {
		
		const res = await api.patientListByGBK();
		if(res.code == 1){
			patientList.value = res.data;
			availablePatientList.value = res.data;
		}
	};
	onLoad((options) => {
		if(options.from){
			from.value = options.from;
		}
	})
    onShow(() => {
		patientListByGBK();
        
	});

	

const goDetail = (uuid) => {
    navTo({ url: `/pages_app/patientDetail/patientDetail?uuid=${uuid}&from=searchPatient`})
}
	
	const onSearch = () => {
        availablePatientList.value = patientList.value.filter(p => p.realName.indexOf(keyword.value) !== -1 || (p.nickname && p.nickname.indexOf(keyword.value) !== -1) || p.mobile.indexOf(keyword.value) !== -1)
    }
	const goBack = () => {
		if(!from.value){
			plus.runtime.quit();
		}else{
			uni.navigateBack();
		}
	}
</script>

<style lang="scss" scoped>
	.select-page{
		min-height: 100vh; background:#fefefe;
	}
	.confirm-text{ color:#fff; font-size: 28rpx;white-space: nowrap; }
	.confirm-btn{ background:#7f7f7f; padding: 10rpx 18rpx; border-radius: 26rpx; }
	.confirm-btn.active{ background:#8B2316; }
	.search-bar{
		position: fixed;
		left:30rpx;
		right:30rpx;
		top:calc(var(--status-bar-height) + 44px);
        border: 2rpx solid #eee;
		margin: 20rpx 0rpx; display:flex; align-items:center; gap: 16rpx;
		.input-wrap{ flex:1; background:#fff; border-radius: 12rpx; padding: 16rpx 20rpx; }
		.search-input{ font-size: 28rpx; color:#333; }
		.ph{ color:#bfbfbf; }
		.search-btn{ 
            display: flex;
            align-items: center;
            justify-content: center;
            width: 88rpx; height: 72rpx; background:#fff;
        }
	}
	.list{  
		 border-radius: 12rpx; 
		 position: fixed;
		 left: 0;
		 right: 0;
		 top: calc(var(--status-bar-height) + 44px + 115rpx);
		 bottom: 0rpx;
		}
	.item{background:#fff; display:flex; align-items:center;padding: 24rpx 30rpx; border-bottom: 2rpx solid #eee; }
	.avatar{ width: 96rpx; height:96rpx; border-radius: 16rpx; background:#ffe; }
	.name{ flex:1; margin-left: 20rpx; font-size: 32rpx; color:#333; }
	.check{ padding-left: 12rpx; }
	.circle{ width: 40rpx; height: 40rpx; border-radius: 50%; border: 2rpx solid #cfcfcf; }
	.circle.active{ background:#8B2316; border-color:#8B2316; position: relative; }
	.circle.active::after{ content:''; position:absolute; left: 14rpx; top: 6rpx; width: 10rpx; height: 18rpx; border: 4rpx solid #fff; border-top: 0; border-left: 0; transform: rotate(45deg); }
</style>
