<template>
	<view class="container safe-area-inset-bottom">
		<MessageNotification />
		<view class="head" @click="toChoose">
			<view class="head_name">{{infoUserList[0].name || '请选择就诊人'}}</view>
			<view class="head_qh">
				切换就诊人
				<text class="iconfont icon-jiantou1"></text>
			</view>
		</view>

		<!-- 空页 -->
		<view class="empty" v-if="infoList.length==0">
			<image src="@/static/empty/orders.png" mode="aspectFit"></image>
			<view class="word">暂无处方记录~</view>
		</view>

		<!-- 处方记录  -->
		<view class="list" v-for="(item,index) in infoList" :key="item.id">
			<view class="li_title">
				<text>{{item.created_at}}</text>

				<text class="text" v-if="item.status==1">已通过</text>
				<text class="text" v-if="item.status==4">无需审核</text>
				<text class="txt"
					v-if="item.status!=1&& item.status!==4">{{item.status==0&&'待审核'||item.status==2&&'未通过'|| item.status==3&&'已失效'}}</text>
			</view>
			<view class="info">
				<view class="list_name">
					医生
				</view>
				<text>{{item.doctor_name}}</text>
			</view>
			<view class="info">
				<view class="list_name">
					患者
				</view>
				<text>{{item.patient_name}}</text>
			</view>
			<view class="info">
				<view class="list_name">
					诊断
				</view>
				<text>{{item.clinical_diagnose}}</text>
			</view>
			<view class="info">
				<view class="lists_name">
					药品
				</view>
				<view style="display: flex; align-items: center; flex-wrap: wrap;">
					<text style="margin-right: 10rpx;">{{(item.drug_name).map(it=>it)}}</text>
					<u-tag v-if="item.prescription_type" 
						:text="item.prescription_type==1?'中药饮片':item.prescription_type==2?'西(中成)药':item.prescription_type==3?'保健食品':item.prescription_type==5?'产品服务包':item.prescription_type==7?'医疗器械':''" 
						:type="item.prescription_type==1?'success':item.prescription_type==3?'warning':'primary'" 
						size="mini" />
				</view>
			</view>
			<view class="info">
				<view class="list_names">
					处方详情
				</view>
				<text class="text" @click="getInfo(item.id,item.prescription_no)">点击查看</text>
			</view>
			<!-- 查看详情 -->
			<view class="detail" @click="getInfo(item.id,item.prescription_no)"><text>查看详情</text></view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		userList
	} from '../../request/api/api'
	import {
		getPrescriptionListApi
	} from '../../request/api/prescription'
	export default {
		data() {
			return {
				infoList: [],
				userList: [],
				myinfo: [],
				infoUserList: {},
				id: " ",
				page: 1, // 当前页数
				total: "", // 总条数
				totalPage: "", // 总页数
				pageSize: 20, // 每页条数
				scrollTop: 0
			}
		},
		onLoad() {

		},
		created() {
			this.getInfolist();
		},
		methods: {
			// 详情
			getInfo(id, no) {
				uni.navigateTo({
					url: "/subPackages/my/myrecord-detail?id=" + id + '&no=' + no
				})
			},

			// 切换
			toChoose() {
				uni.navigateTo({
					url: "/subPackages/my/myinfo?id="
				})
			},

			// 就诊人列表
			getInfolist() {
				userList({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || 11001,
					}
				}).then((res) => {
					if (res.data.errcode == 0) {
						this.infoUserList = res.data.data.filter((item) => item.is_default == 1)
						// console.log(this.infoUserList, 'info');
						if (this.infoUserList != '') {
							this.id = this.infoUserList[0].id
						}
					}
					this.getInfos()
				})
			},

			// 列表
			getInfos() {
				getPrescriptionListApi({
					up_id: this.id,
					store_id: uni.getStorageSync('store_id') || 11001,
					page: this.page
				}).then((res) => {
					if (res.data.code == 0) {
						const data = res.data.result
						// this.infoList = data.list
						this.totalPage = data.pagination.totalPage
						this.total = data.pagination.total

						if (this.page > 1) {
							this.infoList = [...this.infoList, ...data.list]
						} else {
							this.infoList = data.list
						}
					}
				})
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 触底触发
		onReachBottom() {
			if (this.page >= this.totalPage) return
			this.page += 1

			uni.showToast({
				title: "加载中",
				duration: 700,
				mask: false,
				icon: 'loading'
			})
			setTimeout(() => {
				this.getInfos();
			}, 700)
		},
		onPullDownRefresh() {
			// console.log("触发了下拉刷新")
			if (this.page <= 1) {
				this.getInfos();
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 300)
			}
			// if (this.page <= 1) return
			this.page = 1
			this.infoList=[]
			this.getInfos();

			//重置一下数据
			// this.page = 1
			// //重新发起请求
			// this.getOrder(() => uni.stopPullDownRefresh())
		},
		mounted() {

		},
		onShow() {
			this.getInfolist()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		min-height: 100vh;
		max-height: 100%;
		background-color: #F9FAFB;
		padding-top: 12rpx;
		padding-bottom: env(safe-area-inset-bottom);

		.head {
			width: 750rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 42rpx;
			position: -webkit-sticky;
			position: sticky;
			top: var(--window-top);
			z-index: 99;
			margin-bottom: 10rpx;
			background-color: #F9FAFB;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;

			.iconfont {
				font-size: 28rpx;
				margin-left: 10rpx;
			}
		}

		.empty {
			width: 440rpx;
			height: 393rpx;
			margin: 200rpx auto;
			text-align: center;

			image {
				width: 100%;
				height: 100%;
				z-index: 10;
			}
		}


		.list {
			margin: 0rpx auto 30rpx;
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 32rpx;

			.detail {
				width: 648rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				text {
					width: 160rpx;
					height: 58rpx;
					line-height: 58rpx;
					text-align: center;
					background: #FFFFFF rgba(41, 121, 255, 0);
					border-radius: 64rpx;
					border: 1rpx solid #94A3B8;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #94A3B8;
				}
			}


			.li_title {
				width: 648rpx;
				height: 76rpx;
				line-height: 66rpx;
				font-size: 28rpx;
				margin: 0 auto;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #475569;
				justify-content: space-between;
				border-bottom: 2rpx solid #E2E8F0;
				display: flex;

				.text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #4175EE;
				}

				.txt {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #94A3B8;
				}
			}

			.info {
				width: 648rpx;
				display: flex;
				align-items: center;
				margin: 40rpx auto;

				.list_name {
					width: 170rpx;
					line-height: 40rpx;
					letter-spacing: 50rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #94A3B8;
				}

				.lists_name {
					width: 170rpx;
					line-height: 40rpx;
					letter-spacing: 50rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #94A3B8;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.list_names {
					width: 160rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #94A3B8;
					margin-right: 40rpx;
				}

				text {
					width: 466rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #1E293B;

					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					overflow: hidden;
					margin-right: 20rpx;
				}

				.text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #4175EE;
				}
			}
		}

	}
</style>
