<template>
	<view class="safe-area-inset-bottom">
		<u-navbar title='到店接诊' title-size="34" title-color="#000000" back-icon-color="#000"
			:background="{ background: '#FFF' }"></u-navbar>
		<view class="tabs white" :style="{ top: statusBarHeight + navbarHeight - 1 + 'px' }">
			<u-tabs bar-width="20" :list="tabs.filter((item, index) => (type === 1 ? true : index !== 1))"
				:current="current" :is-scroll="false" @change="change" active-color="#6ACDBB"></u-tabs>
		</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.user_patient_id,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.created_at}}</text>
						</view>
						<view class="flex-row">
							<text>{{item.sex %2 != 0 ? '男' : '女'}}</text>
							<text>{{item.age + '岁'}}</text>
						</view>
						<view class="flex-row m-t-1">
							<text class="fs-24 color-gray">推广员：{{ item.salesperson_name || '无' }}</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 {
		registerList,
		listMain
	} from "@/api/consult.js";
	export default {
		data() {
			return {
				flag: false,
				item: {},
				status: "loading",
				loadText: {
					loadmore: "轻轻上拉",
					loading: "努力加载中",
					nomore: "实在没有了",
				},
				list: {
					0: [],
					1: [],
					2: [],
				},
				loading: true,
				male: this.$male,
				girl: this.$girl,
				tabs: [{
						name: "待接诊",
						color: "#F44336",
					},
					{
						name: "已接诊",
						color: "#00C853",
					},
					{
						name: "已完成",
						color: "#C4C7CC",
					},
				],
				current: 0,
				statusBarHeight: this.$statusBarHeight,
				navbarHeight: this.$navbarHeight,
				page: 1,
				type: 1,
				totalPage: 1,
				isHide: false,
				register_id: "",
				statued: 1,
			};
		},
		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";
					}
				},
			},
		},
		computed: {

		},
		onLoad(op) {
			this.type = op["type"] ? Number(op["type"]) : 1;
			this.init();
		},
		onShow() {
			if (this.isHide) {
				this.list[this.current] = [];
				this.page = 1;
				this.loading = true;
				this.init();
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onReachBottom() {
			if (this.page >= this.totalPage) {
				this.$toast("数据已全部加载");
				return;
			}
			this.page++;
			this.getList();
			// this.init();
		},
		methods: {
			init() {
				this.list[this.current] = [];
				this.page = 1;
				this.loading = true;
				this.getList(true);
			},
			getList(is_stop = false) {
				registerList({
					type: this.type,
					store_id: uni.getStorageSync('store_id') || '11001',
					status: this.statued,
					page: this.page,
				}).then((res) => {
					if (res.errcode == 0) {
						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;
							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";
						}
					}
				});
			},
			change(index) {
				this.current = index;
				this.$store.state.status = index + 1;
				// this.init();

				if (index == 0) {
					this.statued = 1
				}
				if (index == 1) {
					this.statued = 2
				}
				if (index == 2) {
					this.statued = 3
				}
				this.list[this.current] = [];
				this.page = 1;
				this.getList();
			},
			toInfo(e, re_id) {
				this.$go('../../subPackages/sub_workbench/workbench_infoPatient?id=' + e + '&re_id=' + re_id)
			}
		},
	};
</script>
<style>
	page {
		background-color: #eeeeef;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 25rpx;
	}

	view {
		position: relative;
	}

	.tabs {
		width: 100vw;
		position: fixed;
		left: 0;
		height: 82rpx;
		padding-top: 16rpx;
		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;
		}
	}

	.fun {
		position: fixed;
		left: 0;
		z-index: 99;
		width: 750rpx;
		background-color: #fff;
		padding: 12rpx 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		bottom: env(safe-area-inset-bottom);
	}

	.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>