<template>
	<view class="container safe-area-inset-bottom" v-if="registList.doctor">
		<MessageNotification />
		<u-navbar class="navbar" :is-back="true" title="挂号详情" :custom-back="customBack" title-color="#000">
		</u-navbar>
		<!-- 已预约 -->
		<view class="appoined" v-if="registList.is_cancel==0 && registList.status>0">
			<view class="appoin">
				<text class="iconfont icon-ys-xuanzhong"></text>
				已挂号成功
			</view>
			<view class="price">
				{{registList.price}}元
			</view>
		</view>

		<!-- 已取消 -->
		<view class="appoined" v-if="registList.is_cancel==1&&registList.status==4">
			<view class="unappoin">
				<text class="iconfont icon-xianshi_quxiao"></text>
				已取消成功
			</view>
			<view class="price">
				{{registList.price}}元
			</view>
		</view>

		<!-- 未支付 -->
		<view class="appoined" v-if="registList.is_cancel==0&&registList.status==0">
			<view class="unappoin">
				<text class="iconfont icon-xianshi_quxiao"></text>
				未支付
			</view>
			<view class="price">
				{{registList.price}}元
			</view>
		</view>

		<!-- 已拒诊 -->
		<view class="appoined" v-if="registList.is_cancel==1&&registList.status==7">
			<view class="unappoin">
				<text class="iconfont icon-xianshi_quxiao"></text>
				医生已拒诊
			</view>
			<view class="prices">
				{{registList.refuse_reason}}
			</view>
		</view>


		<!-- 预约信息 -->
		<view class="title">
			预约信息
		</view>

		<view class="card">
			<view class="item">
				<view class="aapoint">
					预约诊所
				</view>
				<view class="detail">
					{{registList.store}}
				</view>
			</view>
			<view class="item">
				<view class="aapoint">
					预约科室
				</view>
				<view class="detail">
					{{registList.depart}}
				</view>
			</view>
			<view class="item">
				<view class="aapoint">
					预约医生
				</view>
				<view class="detail">
					{{registList.doctor}}
				</view>
			</view>
			<view class="item">
				<view class="aapoint">
					预约序号
				</view>
				<view class="detail">
					{{registList.order_number}}号
				</view>
			</view>
			<view class="item">
				<view class="aapoint">
					预计就诊时间
				</view>
				<view class="detail">
					{{registList.created_at}}
				</view>
			</view>
			<view class="item">
				<view class="aapoint">
					挂号金额
				</view>
				<view class="detail active">
					{{registList.price}}元
				</view>
			</view>
		</view>

		<!-- 就诊人 -->
		<view class="title">
			就诊人
		</view>

		<view class="info">
			<view class="name_edit">
				<view class="name">
					{{registList.patient}}
				</view>
				<view class="word_num">
					{{registList.order_number}}号
				</view>
			</view>

			<!-- replace(/(\w{6})\w*(\w{4})/,'$1********$2') -->
			<view class="name_edit">
				<view class="name">
					身份证号
				</view>
				<view class="word_num" v-if="registList.idcard">
					{{registList.idcard.replace(/(\w{6})\w*(\w{4})/,'$1********$2')}}
				</view>
			</view>
			<view class="name_edit">
				<view class="name">
					手机号
				</view>
				<view class="word_num" v-if="registList.mobile">
					{{registList.mobile.replace(/(\d{3})\d*(\d{4})/, '$1****$2')}}
				</view>
			</view>
		</view>


		<!-- 取消挂号-提醒 -->
		<view class="umode">
			<u-modal v-model="show" :content="content" @confirm="confirm" @cancel="cancel"
				:content-style="{color:'#1E293B',fontWeight: '500',fontSize: '34rpx'}" :show-cancel-button="true"
				confirm-text="暂不取消" cancel-text="取消挂号" cancel-color="#F44336" confirm-color="#536DFE"
				:show-title="false"></u-modal>
		</view>

		<!-- 底部 -->
		<view class="footer">
			<!-- 按钮 -->
			<view class="isbtn" @click="open" v-if="registList.is_cancel==0 &&registList.status<=1">
				取消挂号
			</view>
			<view class="isbtn" @click="opened" v-if="registList.is_cancel==0 && registList.status==0">
				去支付
			</view>
			<view class="btn" @click="goHome" v-if="registList.status>=1">返回首页</view>
		</view>
		<!-- 消息提醒中 -->
		<u-toast ref="uToast" />
	</view>
	<view v-else>
		<u-navbar class="navbar" :is-back="true" title="详情信息" :custom-back="customBack" title-color="#000">
		</u-navbar>
		<text style="display: flex; margin-top: 30rpx; justify-content: center">暂无信息</text>
	</view>
</template>

<script>
	import {
		registeCancle,
		registeInfo,
		registePay
	} from '../../request/api/api';
	export default {
		data() {
			return {
				show: false,
				content: '是否取消本次挂号',
				isshow: false,
				register_id: uni.getStorageSync('register_id'),
				registList: [],
				type: 0,
			}
		},
		onLoad(e) {
			this.register_id = e.id
			this.type = e.type
			this.getInfo()
		},
		created() {
			this.getInfo()
		},
		methods: {
			customBack() {
				if (this.type == 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.navigateBack({
						delta: 4
					})
				}
			},
			// 模态框提示  取消预约
			open() {
				this.show = true;
			},
			// 取消预约
			cancel() {
				registeCancle({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
						register_id: this.register_id
					}
				}).then((res) => {
					// console.log(res, 'tk');
					if (res.data.errcode == 0) {
						this.isshow = true
						uni.showLoading({
							title: "加载中"
						});
						setTimeout(() => {
							uni.hideLoading();
							uni.showToast({
								title: "取消成功",
								duration: 1500,
								mask: false,
								icon: 'success'
							})
							this.getInfo()
						}, 800)
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'default',
							icon: false
						})
						this.getInfo()
					}
				})
			},
			// 暂不取消
			confirm() {
				this.show = false;
			},
			opened() {
				// 获取支付配置
				registePay({
					method: "post",
					data: {
						register_id: this.register_id,
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'pay');
					uni.showLoading({
						title: "加载中"
					});

					uni.requestPayment({
						provider: res.data.data.appId,
						timeStamp: res.data.data.timestamp,
						nonceStr: res.data.data.nonceStr,
						package: res.data.data.package,
						signType: res.data.data.signType,
						paySign: res.data.data.paySign,
						success: (res) => {
							// console.log('success:' + JSON.stringify(res));
							uni.hideLoading();
							setTimeout(() => {
								uni.showToast({
									title: '支付成功',
									duration: 1500,
									mask: false,
									icon: 'success'
								})
							}, 400)

							setTimeout(() => {
								this.getInfo()
							}, 2900)
						},
						fail: function(err) {
							// console.log('fail:' + JSON.stringify(err));
							uni.hideLoading();
							setTimeout(() => {
								uni.showToast({
									title: res.data.msg || '支付失败',
									duration: 1500,
									mask: false,
									icon: 'error'
								})
							}, 400)
						}
					})
				})
			},
			// 返回首页
			goHome() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},

			// 挂号信息
			getInfo() {
				registeInfo({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
						register_id: this.register_id
					}
				}).then((res) => {
					// console.log(res, 'ghxq');
					if (res.data.errcode == 0) {
						this.registList = res.data.data.list[0]
					}
				})
			},

		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		z-index: 99999999;
	}

	.container {
		width: 750rpx;
		max-height: 100%;
		min-height: 100vh;
		padding-top: 32rpx;
		background: #F8FAFC;

		.appoined {
			width: 750rpx;
			height: 108rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			margin-bottom: 20rpx;

			.appoin {
				font-size: 32rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #1E293B;

				.iconfont {
					color: #2979FF;
					font-size: 36rpx;
					margin-right: 16rpx;
					vertical-align: text-bottom;
				}
			}

			.unappoin {
				font-size: 32rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #1E293B;

				.iconfont {
					color: #D5DDE7;
					font-size: 40rpx;
					margin-right: 16rpx;
					vertical-align: text-bottom;
				}
			}

			.price {
				font-size: 32rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #1E293B;
			}

			.prices {
				font-size: 28rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 500;
				color: #1E293B;
			}
		}

		.title {
			width: 750rpx;
			height: 80rpx;
			color: #94A3B8;
			font-size: 32rpx;
			margin: 0 auto;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #94A3B8;
			line-height: 80rpx;
			padding-left: 22rpx;
		}

		.card {
			width: 750rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 32rpx;
			margin: 24rpx auto 32rpx;

			.item:first-child {
				margin: 0 0 48rpx;
			}

			.item {
				display: flex;
				justify-content: space-between;
				height: 40rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				line-height: 33rpx;
				margin: 48rpx 0 0;

				.aapoint {
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
				}

				.detail {
					font-size: 28rpx;
					font-weight: bold;
					color: #232323;
				}

				.active {
					color: #F44336;
				}
			}
		}

		.info {
			width: 750rpx;
			background: #FFFFFF;
			padding: 32rpx 32rpx;
			border-radius: 8rpx;
			margin: 10rpx auto 60rpx;

			.name_edit:first-child {
				margin-top: 0;
			}

			.name_edit {
				margin-top: 48rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 33rpx;
				display: flex;
				justify-content: space-between;

				.name {
					color: #475569;
				}

				.word_num {
					font-size: 30rpx;
					font-weight: 600;
					color: #1E293B;
				}
			}
		}

		.footer {
			width: 750rpx;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			position: fixed;
			left: 0;
			bottom: env(safe-area-inset-bottom);
			z-index: 10;

			.isbtn {
				text-align: center;
				width: 328rpx;
				height: 86rpx;
				line-height: 86rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				border: 2rpx solid #4175EE;
				color: #4175EE;
				background: #fff;
				border-radius: 64rpx;
				margin: 20rpx 20rpx auto;
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: space-around;
				flex: 1;
				height: 86rpx;
				line-height: 86rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				background: #4175EE;
				border-radius: 64rpx;
				margin: 20rpx auto;
			}


		}

		.umode {
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	}
</style>