<template>
	<view class="content">
		<view class="contentitem" v-for="(item,index) in list" :key="index">
			<view class="onecontentitem flex-start">
				<view class="onecontentitemone flex-colum-start">
					<image :src="item.user_avatar" mode=""></image>
				</view>
				<view class="onecontentitemtow flex-colum-start">
					<view class="onecontentitemtowone flex-start" @click="makePhoneCall(item.mobile)">
						<view class="onecontentitemtowone_text">
							{{item.user_nickname}}
						</view>
						<view class="onecontentitemtowone_phone">
							{{item.mobile.replace(/(\d{3})\d{4}(\d{4})/,'$1****$2')}}
						</view>
						<u-icon name="phone" color="#000" size="18"></u-icon>
					</view>
					<view class="onecontentitemtowtow">
						预约项目：{{item.title}}
					</view>
					<view class="onecontentitemtowthere">
						预约时间：{{item.time}}
					</view>
				</view>
			</view>
			<view class="onecontentitembox flex-center">
				<view class="onecontentitemboxone" @click="orderokprebook(item)"
					v-if="item.status == 2 || item.status == 0 ||item.status == 1">
					确认预约
				</view>
				<view style="background:#F9F9F9;color:#999999 ;" class="onecontentitemboxone" v-if="item.status == 3">
					已预约
				</view>
				<view class="onecontentitemboxtow" @click="orderrefuseprebook(item)">
					拒绝预约
				</view>
			</view>
		</view>
		<view class="contentfixed" @click="userlogout">
			<image src="@/static/exit.png" mode=""></image>
		</view>
		<view class="positionfixed flex-between">
			<view class="positionfixeditem flex-center positionfixeditems" @click="ange(1)">
				<u-icon name="list-dot" color="#2979ff" size="14"></u-icon>
				<text class="positionfixedtext">预约列表</text>
			</view>
			<view class="positionfixeditem flex-center" @click="ange(2)">
				<u-icon name="clock" color="#2979ff" size="14"></u-icon>
				<text class="positionfixedtext">修改时间</text>
			</view>
		</view>
		<view v-if="list.length==0 && is_end == true" class="flex-colum">
			<image style="margin-top:100rpx;"
				src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/my/order/nothave.png" mode="">
			</image>
		</view>
		<u-loadmore :status="form.status" />
		<view :style="{height:height}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: '',
				list: [],
				is_end: false,
				form: {
					page: 1,
					status: 'loadmore',
				},
			}
		},
		onShow() {
			this.infn()
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			wx.hideHomeButton()
			// #endif
		},
		mounted() {
			var query = uni.createSelectorQuery().in(this).select('.positionfixed')
			query.boundingClientRect(ele => {
				var that = this;
				uni.getSystemInfo({
					success(res) {
						that.height = ele.height + "px";
						that = null;
					}
				})
			}).exec();
		},
		onReachBottom() {
			this.orderreselist()
		},
		methods: {
			async userlogout() { //退出登录
				uni.showModal({
					title: '注意',
					content: '确定要退出登录吗？',
					success: async (res) => {
						console.log(111)
						if (res.confirm) {
							try {
								let data = await this.api.userlogout();
								console.log(data)
								if (data.code == 1) {
									uni.cache.clear();
									uni.reLaunch({
										url: '/pages/login/login'
									});
								}
							} catch (e) {
								//TODO handle the exception
							}

						}
					}
				});

			},
			infn() {
				this.list = []
				this.form = {
						page: 1,
						status: 'loadmore',
					},
					this.is_end = false
				this.orderreselist()
			},
			makePhoneCall(e) {
				uni.makePhoneCall({
					phoneNumber: e //仅为示例
				});
			},
			async orderokprebook(e) {
				let res = await this.api.orderokprebook({
					order_id: e.id
				})
				if (res.code == 1) {
					uni.showToast({
						title: '预约成功',
						icon: 'none'
					});
					this.infn()
				}
			},
			async orderrefuseprebook(e) {
				let res = await this.api.orderrefuseprebook({
					order_id: e.id,
					refuse_str: ''
				})
				if (res.code == 1) {
					uni.showToast({
						title: '拒绝成功',
						icon: 'none'
					});
					this.infn()
				}
			},
			async orderreselist() {
				let res = await this.api.orderreselist({
					page: this.form.page
				})
				if (res.code == 1) {
					if (res.data.length == 0) {
						this.is_end = true
						this.form.status = 'nomore'
						return false;
					} else {
						this.form.status = 'loading';
						this.form.page = ++this.form.page;
						setTimeout(() => {
							this.list = [...this.list, ...res.data];
							if (res.data.length == 10) {
								this.form.status = 'loading';
							} else {
								this.is_end = true;
								this.form.status = 'nomore';
							}
						}, 500)

					}
				}
			},
			ange(w) {
				if (w == 1) {
					uni.reLaunch({
						url: '/pages/stafflist/index'
					})
				} else {
					uni.reLaunch({
						url: '/pages/stafflist/time'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.content {
		padding: 32rpx 28rpx 0 28rpx;

		.contentitem {
			width: 100%;
			padding: 24rpx 32rpx;
			background: #FFFFFF;
			border-radius: 12rpx;

			.onecontentitem {
				height: 100%;

				.onecontentitemone {
					height: 100%;
					justify-content: flex-start;

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

				.onecontentitemtow {
					margin-left: 14rpx;
					height: 100%;

					.onecontentitemtowone {
						.onecontentitemtowone_text {
							font-size: 32rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}

						.onecontentitemtowone_phone {
							margin: 0 15rpx;
							font-size: 28rpx;
							font-family: Roboto-Regular, Roboto;
							font-weight: 400;
							color: #999999;
						}
					}

					.onecontentitemtowtow {
						font-size: 28rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}

					.onecontentitemtowthere {
						font-size: 28rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.onecontentitembox {
				margin-top: 32rpx;

				.onecontentitemboxone {
					background: #2F87FD;
					padding: 16rpx 58rpx;
					border-radius: 8rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
				}

				.onecontentitemboxtow {
					margin-left: 52rpx;
					padding: 16rpx 58rpx;
					border-radius: 8rpx;
					border: 2rpx solid #2F87FD;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #2F87FD;
				}
			}
		}

		.contentfixed {
			position: fixed;
			bottom: 16%;
			right: 5%;
			font-size: 52rpx;
			color: #FFFFFF;

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

			// width: 100rpx;
			// height: 100rpx;
			// line-height: 100rpx;
			// text-align: center;
			// border-radius: 50%;
		}

		.positionfixed {
			position: fixed;
			background: #FFFFFF;
			width: 100%;
			bottom: 0;
			left: 0;
			padding: 15rpx;

			.positionfixeditems::after {
				position: absolute;
				content: '';
				height: 50rpx;
				left: 50%;
				border-right: 1rpx solid #999;
			}

			.positionfixeditem {
				padding: 20rpx 0;
				text-align: center;
				width: 50%;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;

				.positionfixedtext {
					margin-left: 10rpx;
				}
			}
		}
	}
</style>