<template>
	<view class="safe-area-inset-bottom">
		<u-navbar :title='type==1?"到店接诊":"线上接诊"' title-size="34" title-color="#000000" back-icon-color="#000"
			:background="{ background: '#FFF' }"></u-navbar>

		<view class="search white p-row-32">
			<u-search placeholder="请输入患者姓名" @input="handleSearch" v-model="keyword" :show-action="false"></u-search>
		</view>

		<view class="p-row-2" style="margin-top: 114rpx" v-if="!loading && list[current].length >= 0">
			<view class="p-32 white flex-col m-b-2" @click="toInfo(item.id)" v-for="item in list[current]"
				:key="item.id">
				<view class="flex-row">
					<!-- 接诊状态 -->
					<!-- <d-text :color="tabs[current]['color']" :text="tabs[current]['name']"></d-text> -->
					<u-image width="104rpx" height="104rpx" shape="circle"
						:src="item.avatar || require(`../../static/image/${item.sex%2==0?'nv':'nan'}.png`)">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<view class="list">
						<view class="names">
							<text class="fs-32">{{item.patient}}</text>
							<text class="fs-24">{{item.recent_accept}}</text>
						</view>
						<view class="flex-row">
							<text>{{item.sex %2 != 0 ? '男' : '女'}}</text>
							<text>{{item.age + '岁'}}</text>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" :load-text="loadText" v-if="!loading && list[current].length > 0" />
		</view>

		<view class="flex-row flex-jus-center" v-if="!loading && list[current].length == 0">
			<!-- <d-empty text="暂无信息" mode="search"></d-empty> -->
			<view class="none-box">
				<image src="../../static/image/none.png" class="none"></image>
				<p class="none-text">当前暂无接诊患者</p>
			</view>

		</view>
		<d-loading-page :loading="loading"></d-loading-page>
	</view>
</template>

<script>
	import {
		getPatientListApi
	} from "../../api/all";


	export default {
		data() {
			return {
				item: {},
				status: "loading",
				loadText: {
					loadmore: "轻轻上拉",
					loading: "努力加载中",
					nomore: "实在没有了",
				},
				list: {
					0: [],
					1: [],
					2: [],
				},
				loading: true,
				male: this.$male,
				girl: this.$girl,
				current: 0,
				keyword: "",
				statusBarHeight: this.$statusBarHeight,
				navbarHeight: this.$navbarHeight,
				page: 1,
				type: 1,
				totalPage: 1,
				isHide: false,
			};
		},
		onHide() {
			this.isHide = true;
		},
		watch: {
			consult: {
				deep: true,
				immediate: false,
				handler(e) {
					this.list[this.current] = e.list;
					this.page = 1;
					this.totalPage = e.pagination.totalPage;
					this.$nextTick(() => {
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 300,
						});
					});
					if (this.page >= this.totalPage) {
						this.status = "nomore";
					} else {
						this.status = "loadmore";
					}
				},
			},
		},
		onLoad(op) {
			this.type = op["id"] ? Number(op["id"]) : 1;

			this.getList();
		},
		onShow() {
			if (this.isHide) {
				this.list[this.current] = [];
				this.page = 1;
				this.loading = true;
				this.getList();
			}

		},
		onPullDownRefresh() {
			this.init();
		},
		onReachBottom() {
			if (this.page >= this.totalPage) {
				this.$toast("数据已全部加载");
				return;
			}
			this.page++;
			this.getList();
		},
		methods: {
			init() {
				this.list[this.current] = [];
				this.page = 1;
				this.loading = true;
				this.getList(true);
			},
			getList() {
				getPatientListApi({
					page: this.page,
					name: this.keyword,
					store_id: uni.getStorageSync('store_id') || '11001',
					status: this.type
				}).then((res) => {
					if (res.errcode == 0) {
						this.loading = false;
						this.list[this.current] = [
							...res.data.list,
							...this.list[this.current],
						];
						this.totalPage = res.data.pagination.totalPage;
						if (this.page >= this.totalPage) {
							this.status = "nomore";
						} else {
							this.status = "loadmore";
						}
						this.$nextTick(() => {
							this.loading = false;
							uni.stopPullDownRefresh();
						});
					} else {
						this.$toast(res.msg);
						uni.stopPullDownRefresh();
						this.loading = false;
						if (this.page >= this.totalPage) {
							this.status = "nomore";
						} else {
							this.status = "loadmore";
						}
					}
				});
			},
			toInfo(e) {

			}
		},
	};
</script>
<style>
	page {
		background-color: #eeeeef;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 25rpx;
	}

	view {
		position: relative;
	}

	.search {
		width: 100vw;
		height: 98rpx;
		position: fixed;
		left: 0;
		line-height: 92rpx;
		z-index: 99;
	}

	.list {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;

		.names {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
		}

		text {
			margin-right: 20rpx;
		}
	}

	.none-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 200.87rpx;

		.none {
			width: 350rpx;
			height: 263.69rpx;
		}

		.none-text {
			margin-top: 40rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}
</style>