<template>
	<view class="">
		<view class="box safe-area-inset-bottom">
			<!-- tabs -->
			<view class="tabs">
				<u-tabs bar-width="30"  :height="59" :list="tabs" :current="current" :is-scroll="false" @change="change"
					active-color="#6ACDBB"></u-tabs>
			</view>
			<!--  -->
			<view class="p-row-2 m-t-2">
				<block v-if="!loading && list.length > 0">
					<view class="p-32 b-r-8 white m-b-2" v-for="(item, i) in list" :key="item.id"
						@click="$go('/subPackages/sub_my/prescriptionDetail?id=' +item.id)">
						<view class="flex-row flex-ali-center flex-jus-sp m-t-2">
							<u-icon margin-left="8" label-size="32" label-color="#6C7380"
								:name="require('@/static/image/ys.png')" :label="item.prescription_no"
								color="#6ACDBB" size="32"></u-icon>
							<d-text :text="statusName[item.status]"></d-text>
						</view>
						<view class="flex-row flex-ali-center flex-jus-sp m-t-2">
							<d-text className="content-c fs-32" :text="getInfo(item.patient)"></d-text>
						</view>
						<view class="flex-row flex-ali-center flex-jus-sp m-t-2">
							<d-text :text="$u.timeFormat(item.created_at, 'yyyy-mm-dd')"></d-text>
						</view>
					</view>
				</block>
				<view class="flex-row flex-jus-center" v-if="!loading && list.length == 0">
					<d-empty text="暂无信息" mode="search"></d-empty>
				</view>
			</view>
		</view>

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

<script>
	import {
		prescripDetailList
	} from "@/api/all.js";
	export default {
		data() {
			return {
				list: [],
				page: 1,
				loading: true,
				loading2: true,
				status: "loading",
				totalPage: 1,
				loadText: {
					loadmore: "轻轻上拉",
					loading: "努力加载中",
					nomore: "已加载全部",
				},
				statusName: [
					"待审核",
					"已通过",
					"未通过",
					"待使用",
					"已使用",
					"未使用",
					"已失效",
				],
				tabs: [{
						name: "全部"
					},
					{
						name: "待审核"
					},
					{
						name: "未通过"
					},
					{
						name: "已通过"
					},
				],
				current: 0,
				status: ""
			};
		},

		created() {},
		onShow() {
			this.getList();
		},
		onHide() {},
		onReachBottom() {
			if (this.loading2) {
				return;
			}
			if (this.page >= this.totalPage) {
				this.$toast("数据已全部加载");
				return;
			}

			this.page++;
			this.getList();
		},
		methods: {
			getInfo(user) {
				return `${user.name} ${user.sex == 1 ? "男" : "女"} ${user.age}岁`;
			},

			change(index) {
				// console.log(index);
				this.current = index;
				if (this.current == 0) {
					this.status = ''
				}
				if (this.current == 1) {
					this.status = 0
				}
				if (this.current == 2) {
					this.status = 2
				}
				if (this.current == 3) {
					this.status = 1
				}
				this.getList()
			},

			async getList() {
				try {
					this.loading2 = true;
					const res = await prescripDetailList({
						page: this.page,
						store_id: uni.getStorageSync('store_id') || '11001',
						status: this.status
					});

					if (res.errcode === 0) {
						this.list =
							this.page === 1 ? res.data.list : [...this.list, ...res.data.list];
						this.totalPage = res.data.pagination.totalPage;
					} else {
						this.$toast(res.msg);
					}
					this.loading = false;
					this.loading2 = false;
				} catch (error) {
					this.loading = false;
					this.loading2 = false;
				}
			},
		},
	};
</script>
<style>
	page {
		background-color: #f9fafb;
	}
</style>
<style lang="scss" scoped>
	.tabs{
		background-color: #fff;
		width: 750rpx;
		position: sticky;
		top: 0rpx;
		z-index: 9999999;
		padding-top: 12rpx;
	}

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

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	::v-deep .box {
		.u-tab-item {
			line-height: 1 !important;
		}
	}

	.state {
		margin-top: 160rpx;

		image {
			width: 300rpx;
			height: 223rpx;
		}
	}

	.search {
		padding: 16rpx 32rpx;
	}
</style>