<template>
	<view class="content safe-area-inset-bottom">
		<MessageNotification />
		<!-- 待支付 -->
		<view class="unpaid" v-if="orderInfo.order_status.status==1">
			<view class="title">
				订单待支付
			</view>
			<view class="next">
				<view class="word">
					已为您锁定问诊名额，请在<u-count-down :timestamp="orderInfo.auto_cancel_time" :show-days="false" separator="zh"
						separator-size="28" color="#F44336" separator-color="#F44336" :show-hours="false">
					</u-count-down>内完成支付，超时名额自动取消。
				</view>
				<view class="next_btn">
					<text @click="gopay">去支付</text>
				</view>
			</view>
		</view>

		<!-- 咨询中 -->
		<view class="paided" v-if="orderInfo.order_status.status==3">
			<view class="title">
				咨询中
			</view>
			<view class="word">
				医生已接诊，请尽量具体的描述您的问题
			</view>
		</view>

		<!-- 待接诊 -->
		<view class="paided" v-if="orderInfo.order_status.status==2">
			<view class="title">
				待接诊
			</view>
			<view class="word">
				已支付，请耐心等待医生回复
			</view>
		</view>

		<!-- 待评价 -->
		<view class="paided"  v-if="orderInfo.order_status.status==4">
			<view class="title">
				待评价
			</view>
			<view class="word">
				您对本次服务满意吗，邀请您去评价
			</view>
		</view>

		<!-- 已结束 -->
		<view class="paided" v-if="orderInfo.order_status.status==5">
			<view class="title">
				已结束
			</view>
			<view class="word">
				问诊已结束，感谢您的使用
			</view>
		</view>

		<!-- 订单已取消 -->
		<view class="paided" v-if="orderInfo.order_status.status==6">
			<view class="title">
				订单已取消
			</view>
			<view class="word">
				{{orderInfo.cancel_remark}}
			</view>
		</view>

		<!-- 问诊医生 -->
		<view class="unpaid_card">
			<view class="title">
				问诊医生
			</view>
			<view class="card">
				<image :src="orderInfo.serviceUser.avator" mode=""></image>
				<view class="card_word">
					<view class="name">
						<text>{{orderInfo.serviceUser.name}}&nbsp;</text>
						{{orderInfo.serviceUser.title}}
					</view>
					<view class="yard">
						{{orderInfo.serviceUser.hospital}}{{orderInfo.serviceUser.yard}}&nbsp;
						{{orderInfo.serviceUser.depart}}
					</view>
				</view>
			</view>
		</view>

		<!-- 病情描述 -->
		<view class="unpaid_detail">
			<view class="title">
				病情描述
			</view>
			<!-- 基本信息 -->
			<view class="details">
				<view class="infos">
					<text class="infos_title">基本信息</text>
					<view class="infos_words">{{orderInfo.inquiry.patient_data.name}} &nbsp;
						{{orderInfo.inquiry.patient_data.age}}岁 &nbsp;
						{{(orderInfo.inquiry.patient_data.sex)% 2 == 1 ? "男" : "女"}}
					</view>
				</view>
				<view class="infos">
					<text class="infos_title">病情描述</text>
					<text class="infos_word">{{orderInfo.inquiry.desc}}</text>
				</view>
				<view class="infos">
					<text class="infos_title">就诊记录</text>
					<text class="infos_word">{{(orderInfo.inquiry.is_visit)==0?'无':''}}
						{{orderInfo.inquiry.visit_desc}}</text>
				</view>
				<view class="infos">
					<text class="infos_title">病情照片</text>
					<view class="infos_word">
						{{img.length}}张
						<text @click="getImg">点击查看</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单明细 -->
		<view class="unpaid_info">
			<view class="title">
				订单明细
			</view>
			<view class="info">
				<text class="order_info">订单编号：</text>
				<text>{{orderInfo.order_no}}</text>
			</view>
			<view class="info">
				<text class="order_info">下单时间：</text>
				<text>{{orderInfo.pay_time | formatDate}}</text>
			</view>
			<view class="info">
				<text class="order_info">订单类型：</text>
				<text>{{orderInfo.type%2==0?'视频问诊':'图文问诊'}}</text>
			</view>
			<view class="info">
				<text class="order_info">应付金额：</text>
				<text>{{orderInfo.total_pay_price}}</text>
			</view>
		</view>

		<!-- 立即支付 -->
		<view class="btn" v-if="myScroll>60 && orderInfo.order_status.status==1" @click="gopay">
			<text>立即支付</text>
		</view>
		<!-- 继续沟通 -->
		<view class="btn" v-if="myScroll>90 && orderInfo.order_status.status==3">
			<text>继续沟通</text>
		</view>
		<!-- 去评价 -->
		<view class="btn" v-if="myScroll>90 && orderInfo.order_status.status==4">
			<text>去评价</text>
		</view>

		<!-- 待接诊  补充描述   -->
		<view class="btn_box" v-if="myScroll>90 && orderInfo.order_status.status==2">
			<text class="cancel" @click="goCancel">取消订单</text>
			<text class="supple">补充描述</text>
		</view>

	</view>
</template>

<script>
	import {
		getOrdinfo,
		getOrdpay,
		getCancle
	} from '@/request/api/api.js'
	export default {
		data() {
			return {
				myScroll: 0,
				order_id: "", // 订单id
				orderInfo: {}, // 订单详情
				img: "", // 图片
				timestamp: "", // 倒计时
			}
		},
		onLoad(e) {
			// console.log(e,'e');
			this.order_id = e.id
		},
		onPageScroll: function(e) {
			this.myScroll = e.scrollTop
			// console.log("滚动距离为：" + e.scrollTop);
		},
		methods: {
			// 订单详情
			getOrder() {
				getOrdinfo({
					method: "post",
					data: {
						order_id: this.order_id
					}
				}).then((res) => {
					console.log(res, 'payState');

					if (res.data.errcode == 0) {
						this.orderInfo = res.data.data
						this.img = JSON.parse(res.data.data.inquiry.images)
					}
				})
			},
			// 图片预览
			getImg() {
				// console.log(this.img.map(item => item),'img');
				
				uni.previewImage({
					urls: this.img.map(item => item), //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: 0, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			// 去支付
			gopay() {
				// 获取支付配置
				getOrdpay({
					method: "post",
					data: {
						order_id: this.order_id
					}
				}).then((res) => {
					console.log(res, 'pay');

					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: function(res) {
							console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					})

				})

			},

			// 取消订单
			goCancel() {
				getCancle({
					method: "post",
					data: {
						order_id: this.order_id
					}
				}).then((res) => {
					console.log(res, 'cancle');

					if (res.data.errcode == 0) {

						uni.showToast({
							title: "取消成功",
							duration: 1500,
							mask: false,
							icon: 'success'
						})
					}

					this.getOrder()
				})
			},

		},
		mounted() {
			this.getOrder()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100%;
		padding-bottom: env(safe-area-inset-bottom);

		.unpaid {
			width: 710rpx;
			height: 330rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 8rpx;
			margin: 32rpx auto;
			padding: 32rpx;

			.title {
				width: 646rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 40rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #1E293B;
				margin-bottom: 16rpx;
			}

			.next {
				display: flex;
				flex-direction: column;
				width: 646rpx;

				.word {
					width: 646rpx;
					height: 80rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #475569;
					line-height: 33rpx;
				}

				.next_btn {
					width: 646rpx;
					height: 82rpx;
					line-height: 82rpx;
					text-align: center;
					background: #536DFE;
					border-radius: 64rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin-top: 32rpx;
				}
			}
		}

		.paided {
			width: 710rpx;
			height: 176rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 8rpx;
			margin: 32rpx auto;
			padding: 32rpx;

			.title {
				width: 646rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 40rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #0F172A;
				margin-bottom: 16rpx;
			}

			.word {
				width: 646rpx;
				height: 80rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #1E293B;
				line-height: 33rpx;
			}

		}

		.unpaid_card {
			width: 686rpx;
			height: 230rpx;
			margin: 32rpx auto;

			.title {
				height: 50rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #1E293B;
				line-height: 50rpx;
				margin-bottom: 16rpx;
			}

			.card {
				display: flex;
				align-items: center;
				padding: 32rpx;
				width: 686rpx;
				height: 164rpx;
				background: #F8FAFC;
				border-radius: 8rpx;

				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					margin-right: 16rpx;
					vertical-align: middle;
				}

				.card_word {
					.name {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #1E293B;

						text {
							height: 44rpx;
							font-size: 32rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #1E293B;
						}
					}

					.yard {
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #475569;
						margin-top: 18rpx;
					}
				}
			}
		}


		.unpaid_detail {
			width: 686rpx;
			height: 634rpx;
			margin: 32rpx auto;

			.title {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #1E293B;
				margin-bottom: 16rpx;
			}

			.details {
				width: 686rpx;
				height: 568rpx;
				background: #F8FAFC;
				border-radius: 8rpx;
				display: flex;
				flex-direction: column;

				.infos {
					width: 622rpx;
					display: flex;
					flex-direction: column;
					margin: 24rpx 32rpx;

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

					.infos_word {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #1E293B;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						overflow: hidden;

						text {
							color: #536DFE;
							margin-left: 12rpx;
						}
					}

					.infos_words {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #1E293B;
						display: flex;
						align-items: center;

						text {
							display: flex;
							color: #536DFE;
							margin-left: 12rpx;

						}
					}
				}

			}

		}

		.unpaid_info {
			width: 686rpx;
			height: 300rpx;
			margin: 32rpx auto 102rpx;

			.title {
				width: 686rpx;
				height: 50rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #1E293B;
				line-height: 50rpx;
				margin-bottom: 16rpx;
			}


			.info {
				width: 686rpx;
				height: 50rpx;

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

				.order_info {
					margin-right: 16rpx;
				}

			}

		}

		.btn {
			width: 750rpx;
			height: 96rpx;
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			background: #fff;
			text-align: center;
			z-index: 22;
			
			text {
				width: 648rpx;
				height: 86rpx;
				background: #536DFE;
				display: inline-block;
				border-radius: 64upx;
				text-align: center;
				line-height: 86rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.btn_box {
			width: 750rpx;
			height: 96rpx;
			line-height: 86rpx;
			background-color: #FFFFFF;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.cancel {
				width: 327rpx;
				height: 86rpx;
				background: #FFFFFF rgba(41, 121, 255, 0);
				border-radius: 198rpx;
				border: 2rpx solid #CBD5E1;
				color: #94A3B8;
				font-size: 32rpx;
				text-align: center;
			}

			.supple {
				color: #FFFFFF;
				width: 327rpx;
				height: 86rpx;
				background: #536DFE;
				border-radius: 198rpx;
				font-size: 32rpx;
				text-align: center;
			}
		}
	}
</style>
