<template>
	<view class="page">
		<u-navbar height="66" title="患者中心" :is-back="false" title-size="34" title-color="#fff"
			:background="{background:'linear-gradient(90deg, #6ACDBB 0%, #6ACDBB 93%)'}">
		</u-navbar>
		<view class="bg" :style="{top:`${statusBarHeight+navbarHeight-1}px`}"></view>
		<view class="search p-row-32">
			<u-search placeholder="请输入患者姓名" @input="handleSearch" v-model="keyword" :show-action="false"></u-search>
		</view>
		<view class="box p-row-2 m-t-2">
			<view class="flex-row flex-jus-sp">
				<view class="function white b-r-8 flex-row p-32 flex-1"
					@click="$go('../../subPackages/sub_patient/to-store?id='+1)">
					<image src="../../static/image/hz_xsjz.png"></image>
					<view class="m-l-16 l-19">
						<d-text text="到店接诊" size="32" color="#31353D"></d-text>
					</view>
				</view>
				<view class="function white b-r-8 flex-row p-32 flex-1 m-l-2"
					@click="$go('../../subPackages/sub_patient/to-store?id='+2)">
					<image src="../../static/image/hz_ddjz.png"></image>
					<view class="m-l-16 l-19">
						<d-text text="线上接诊" size="32" color="#31353D"></d-text>
					</view>
				</view>
			</view>
			<view class="list-new" @click="$go('../../subPackages/sub_patient/patient_massInfo')">
				<view class="l-l-row">
					<image src="/static/image/hz-qfxx.png" mode=""></image>
					<d-text text="群发消息" className="main-c m-r-16 fs-32"></d-text>
				</view>
				<u-icon name="arrow-right" color="#333333"></u-icon>
			</view>
			<view class="flex-col b-r-8 white p-32 m-t-2">
				<view class="title flex-row flex-jus-sp">
					<d-text text="患者管理" className="main-c m-r-16 fs-32"></d-text>
					<!-- <u-icon label="筛选" size="40" label-size="28" margin-right="10" label-color="#6C7380" :name="require('@/static/image/sx.png')">
					</u-icon> -->
					<!-- <u-icon v-if="!isSearch" @click="isSearch = true" name="search" size="40rpx" color="#333"></u-icon> -->
					<!-- <view v-else class="flex-row  flex-con flex-jus-sp flex-ali-center">
						<d-input @input="handleSearch" class="flex-con m-r08" v-model="keyword"
							:custom-style="{fontSize:'28rpx'}" placeholder="请输入搜索内容" />
						<u-icon @click="isSearch = false" name="close-circle-fill" size="40rpx" color="#999"></u-icon>
					</view> -->
				</view>
				<view v-for="(item, index) in list" :key="index" class="flex-row flex-ali-center m-t-50"
					@click="toDetail(item.patient_id)">
					<u-image width="80rpx" height="80rpx" shape="circle"
						:src="item.user.avatarurl || require(`../../static/image/${item.sex%2==0?'nv':'nan'}.png`)">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<view class="flex-col m-l-2 flex-jus-sp">
						<view class="flex-row flex-ali-end">
							<d-text :text="item.patient" className="content-c fs-32"></d-text>
							<d-text :text="item.age + '岁'" className="fs-28 tips-c m-l-2"></d-text>
						</view>
						<!-- <view class="flex-row flex-ali-center">
							<view class="m-r08">
								<u-tag text="高血糖" size="mini" border-color="rgba(41,121,255,0.08)"
									bg-color="rgba(41,121,255,0.08)" color="#6ACDBB" />
							</view>
							<view class="m-r08">
								<u-tag text="高血压" size="mini" border-color="rgba(41,121,255,0.08)"
									bg-color="rgba(41,121,255,0.08)" color="#6ACDBB" />
							</view>
						</view> -->
					</view>
				</view>
			</view>

		</view>
		<d-tabbar></d-tabbar>
	</view>
</template>

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

	export default {
		data() {
			return {
				male: this.$male,
				girl: this.$girl,
				keyword: '',
				navbarHeight: this.$navbarHeight,
				statusBarHeight: this.$statusBarHeight,
				list: [],
				page: 1,
				loading: true,
				loading2: false,
				status: "loading",
				loadText: {
					loadmore: "轻轻上拉",
					loading: "努力加载中",
					nomore: "已加载全部",
				},
				totalPage: 1,
			};
		},
		onShow() {
			this.init();
		},
		onPullDownRefresh() {
			this.init();
		},
		onReachBottom() {
			if (this.page >= this.totalPage) {
				this.$toast("数据已全部加载");
				return;
			}
			this.page++;
			this.getList();
		},
		methods: {
			init() {
				this.list = [];
				this.page = 1;
				this.keyword = '';
				this.loading = true;
				this.getList(true);
			},
			handleSearch() {
				this.page = 1
				this.getList()
			},
			getList(is_stop = false) {
				if (this.loading2) {
					return;
				}
				this.loading2 = true;
				getPatientListApi({
						page: this.page,
						name: this.keyword,
						store_id: uni.getStorageSync('store_id') || '11001',
						status: 1
					})
					.then((res) => {
						if (res.errcode == 0) {
							this.list = this.page === 1 ? res.data.list : [...this.list, ...res.data.list];
							this.totalPage = res.data.pagination.totalPage;
							if (this.page >= this.totalPage) {
								this.status = "nomore";
							} else {
								this.status = "loadmore";
							}
							this.$nextTick(() => {
								this.loading = false;
								is_stop && uni.stopPullDownRefresh();
							});
						} else {
							this.$toast(res.msg);
							is_stop && uni.stopPullDownRefresh();
							this.loading = false;
							if (this.page >= this.totalPage) {
								this.status = "nomore";
							} else {
								this.status = "loadmore";
							}
						}
					})
					.finally(() => {
						this.loading2 = false;
					});
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/subPackages/sub_patient/patient_detail?id=' + id
				})
			}
		}
	};
</script>

<style>
	page {
		background-color: #eeeeef;
	}
</style>
<style lang="scss" scoped>
	.bg {
		position: fixed;
		left: 0;
		width: 750rpx;
		height: 204rpx;
		background: linear-gradient(90deg, #6ACDBB 0%, #6ACDBB 93%);
		z-index: 981;
	}

	.search {
		position: relative;
		z-index: 982;
	}

	.box {
		position: relative;
		z-index: 982;
	}

	.function {
		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.l-19 {
		display: flex;
		align-items: center;
	}

	.list-new {
		width: 710rpx;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0;
		padding: 0 32rpx;
		color: #333333;

		.l-l-row {
			display: flex;
			align-items: center;

			image {
				width: 56rpx;
				height: 56rpx;
				margin-right: 12rpx;
				vertical-align: middle;
			}
		}
	}
</style>