<template>
	<z-paging ref="personPaging" 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="account-fill" color="#222222" :size="15"></up-icon>
							<text class="font text-black2 ml-08 font-weight-bolder">{{item.name}}</text>
						</view>
						<view class="flex-row align-center ml-4">
							<up-icon name="phone" color="#666666" :size="15"></up-icon>
							<text class="font ml-08" style="color: #666666;">{{item.phoneNumber}}</text>
						</view>
					</view>
					<view class="flex-row align-center mt-16">
						<text class="font" style="color: #666666;">年龄：{{item.age}}</text>
						<text class="font ml-2" style="color: #666666;">性别：{{item.gender === "0"?'男':'女'}}</text>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import {
		getPersonListUrl,
		getReservationListUrl,
		cancelReservationUrl
	} from '@/common/config/api.js'
	// import ItemReservation from '@/components/ItemReservation.vue'
	export default {
		components: {
			// ItemReservation
		},
		data() {
			return {
				keyword: '',
				deptId: '',
				dataList: []
			}
		},
		onLoad(options) {
			console.log(options);
			this.deptId = options.deptId;
		},
		computed: {
			computeNavHeight() {
				console.log(uni.$u.sys());
				return uni.$u.sys().statusBarHeight + 44 + 'px'
			}
		},
		methods: {
			handleItemClick(item) {
				uni.showModal({
					title: '提示',
					content: `确定选择为${item.name}提交看护申请吗?`,
					showCancel: true,
					success: (e) => {
						if (e.confirm) {
							uni.$emit('personChoose', {
								id: item.personId,
								name: item.name,
								deptName: item.deptName,
								disability: item.disability
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 200)
						}
					}
				})
			},
			handleSearch() {
				this.$refs.personPaging.reload();
			},
			handleCancel(orderId) {
				cancelReservationUrl(orderId)
					.then(res => {
						console.log('取消预约', res);
						uni.$u.toast('取消成功')
						this.$refs.personPaging.reload();
					})
					.catch(err => {
						console.log(err);
						uni.$u.toast('取消失败')
					})
			},
			queryList(pageNo, pageSize) {
				getPersonListUrl({
						params: {
							pageNum: pageNo,
							pageSize: pageSize,
							name: this.keyword,
							deptId: this.deptId
						}
					})
					.then(res => {
						console.log('人员列表: ', res);
						this.$refs.personPaging.complete(res);
					})
					.catch(err => {
						console.log('err: ', err);
						this.$refs.personPaging.complete(false);
					})
			}
		}
	}
</script>

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

	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

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