<template>
	<z-paging ref="hospitalPaging" v-model="dataList" @query="queryList" loading-more-no-more-text="没有更多医院了">
		<template v-slot:top>
			<up-navbar class="u-navbar-box" title="所在医院" auto-back placeholder bgColor="transparent"
				:title-style="{fontWeight:'bold'}">
			</up-navbar>
			<view class="p-12">
				<up-search placeholder="请输入所在医院名称" clearabled v-model="keyword" @search="handleSearch"
					@custom="handleSearch"></up-search>
			</view>
		</template>
		<view v-for="(item,index) in dataList" :key="item.personId" class="flex-row align-center justify-center mt-24"
			@click="handleItemClick(item)">
			<view class="pl-4 py-2 flex-row align-center"
				style="width: 686rpx;background: linear-gradient( 178deg, #EAF4FF 0%, #FFFFFF 100%);box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(138,196,255,0.2);border-radius: 16rpx;border: 2rpx solid #FFFFFF;box-sizing: border-box;">
				<image src="@/pages/subpack/static/images/item-img.png" style="width: 68rpx;height: 78rpx;"
					mode="aspectFill"></image>
				<view class="flex-column ml-4">
					<view class="flex-row align-center">
						<view class="flex-row align-center">
							<up-icon name="bookmark-fill" color="#2979ff" :size="15"></up-icon>
							<text class="font text-black2 ml-08 font-weight-bolder">{{item.name}}</text>
						</view>
					</view>
					<view class="flex-row align-center mt-16">
						<text class="font" style="color: #666666;">地址：{{item.address}}</text>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import {
		getHospitalListUrl
	} from '@/common/config/api.js'
	export default {
		data() {
			return {
				keyword: '',
				dataList: []
			}
		},
		computed: {
			computeNavHeight() {
				console.log(uni.$u.sys());
				return uni.$u.sys().statusBarHeight + 44 + 'px'
			}
		},
		methods: {
			handleItemClick(item) {
				uni.$emit('hospitalChoose', {
					// id: item.personId,
					name: item.name
				})

				setTimeout(() => {
					uni.navigateBack()
				}, 200)
			},
			handleSearch() {
				this.$refs.hospitalPaging.reload();
			},
			queryList(pageNo, pageSize) {
				getHospitalListUrl({
						params: {
							pageNum: pageNo,
							pageSize: pageSize,
							name: this.keyword
						}
					})
					.then(res => {
						console.log('人员列表: ', res);
						this.$refs.hospitalPaging.complete(res);
					})
					.catch(err => {
						console.log('err: ', err);
						this.$refs.hospitalPaging.complete(false);
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F8FD;
	}

	.u-navbar-box {
		background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
	}
</style>