<template>
	<view class="container">
		<image class="bkg" mode="aspectFill" src="@/static/order-bg.png"></image>
		<view class="user" :style="{'padding-top':statusBarHeight+'px'}">
			<view>
				<view>{{vuex_user.name || '微信用户' }}</view>
				<view>{{today}}</view>
			</view>
		</view>
		<view class="order">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
				<view v-if="list.length>0">
					<view class="order-item" @click="toUrl(item.id)" v-for="item in list">
						<view class="order-item-status">
							{{item.type===1?'陪诊服务':'居家照护'}}
						</view>
						<view class="order-item-info">
							<view>
								<text>编号：</text><text>{{item.no}}</text>
							</view>
							<view>
								<text>就诊时间：</text><text>{{item.time}}</text>
							</view>
							<view>
								<text>联系人：</text><text>{{item.appoint_name}}</text>
							</view>
							<view class="flex-center" @click.stop="callTel(item.appoint_mobile)">
								<view>
									<text>联系人电话：</text><text>{{item.appoint_mobile}}</text>
								</view>
								<view style="margin-left:10rpx">
									<u-icon name="phone-fill" color="#d61b24"></u-icon>
								</view>
							</view>
							<view>
								<text>医院：</text><text>{{item.hospital?item.hospital.name:''}}</text>
							</view>
						</view>
						<view class="order-item-btn">
							<block v-for="s in statusList">
								<view v-if="item.status===s.id">{{s.name}}</view>
							</block>
						</view>
					</view>
					<u-loadmore v-if="!(list.length===0 && select.page===1)" :margin-top="20" :margin-bottom="40"  :status="loadStatus"></u-loadmore>
				</view>
				
				<view v-else style="height: 100%;" class="d-flex ai-center jc-center">
					<u-empty mode="list" text="暂无订单"></u-empty>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {statusList} from "@/common/const.js"
	export default {
		data() {
			return {
				today:'',
				statusBarHeight: 40,
				statusList:[],
				last_page:1,
				select: {
					page: 1,
					page_size: 5,
				},
				list: [],
				loadStatus: 'loadmore',
			}
		},
		onShow() {
			this.list = []
			this.getOrderList()
		},
		onLoad() {
			this.statusList = statusList
			this.today = this.$moment(new Date()).format("YYYY-MM-DD")
			this.statusBarHeight = uni.getMenuButtonBoundingClientRect().top;
			
		},
		methods: {
			toUrl(id) {
				uni.navigateTo({
					url: '/package_sub/order/orderDetail?type=index&id='+id
				})
			},
			async getOrderList() {
				const res = await this.$u.api.order({
					page: 1,
					page_size: 5,
				})
				this.last_page = res.last_page
				this.loadStatus = this.select.page >= this.last_page ?'nomore':'loadmore'
				this.list.push(...res.data)
			},
			reachBottom() {
			  if (this.select.page > this.last_page) {
			  	this.loadStatus = 'nomore'
			  	return
			  }
			  this.loadStatus = 'loading'
			  this.select.page++
			  this.getOrderList()
			},
			callTel(tel) {
				if (this.base.isNull(tel)) {
					return
				}
				uni.makePhoneCall({
					phoneNumber: tel
				});
			},
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		font-size: 32rpx;
		.bkg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 686rpx;
		}

		.user {
			font-size: 36rpx;
			color: #000;
			position: relative;
			padding: 20rpx;
		}

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

			.u-icon {
				margin-left: 10rpx;
			}
		}

		.order {
			margin: 20rpx;
			padding-bottom:40rpx;
			position: relative;
			height:calc(100vh - 240rpx);
			&-item {
				background-color: #fff;
				padding: 20rpx;
				box-shadow: 1rpx 1rpx 5rpx #fdf0f0;
				border-radius: 10rpx;
				margin:20rpx 0;
				border: 1rpx solid #fdf0f0;
				&-status {
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
					padding-bottom: 20rpx;
				}

				&-info {
					padding: 20rpx 0;

					&>view {
						margin-bottom: 10rpx;
					}
				}

				&-btn {
					display: flex;
					justify-content: flex-end;

					&>view {
						text-align: center;
						color: #d61b24;
						background: #fdf0f0;
						padding: 10rpx 30rpx;
						border-radius: 40rpx;
						border: 1rpx solid #d61b24;
					}
				}
			}
		}
	}
</style>