<template>
	<view class="container">
		<view class="top"></view>
		<view class="user-box">
			<image :src="list.photo || '/static/error/missing-face.png'"></image>
			<view class="user-right">
				<view class="user-name">{{ list.name }}</view>
				<view class="user-address">
					职位：{{ list.doctor_level == 1 ? '医师' : list.doctor_level == 2 ? '主治医师' : list.doctor_level == 3 ? '副主任医师' : '主任医师' }}
				</view>
				<view class="user-address">医院：{{ list.hospital_info.name }}</view>
				<view class="user-num">
					评分：
					<text>{{ list.score }}</text>
				</view>
			</view>
		</view>
		<!-- 擅长领域 -->
		<view class="list-box">
			<view class="item-box">
				<view class="icon-box flex_item">
					<view class="left-icon"></view>
					<view class="left-tit">擅长领域</view>
				</view>
				<view class="left-txt">{{ list.good_at || '暂无数据' }}</view>
			</view>
			<!-- 背景介绍 -->
			<view class="item-box">
				<view class="icon-box flex_item">
					<view class="left-icon"></view>
					<view class="left-tit">背景介绍</view>
				</view>
				<view class="left-txt">{{ list.introduction || '暂无数据' }}</view>
			</view>
			<!-- 问诊评论 -->
			<view class="item-box">
				<view class="icon-box flex_item">
					<view class="left-icon"></view>
					<view class="flex left-box">
						<view class="left-tit">问诊评论</view>
						<view class="more" @click="Tomore">
							查看更多
							<text class="iconfont iconenter"></text>
						</view>
					</view>
				</view>
				<view class="left-txt" v-if="list.comment_list == ''">暂无数据</view>
				<view class="ask-list flex_item" v-if="list.comment_list != ''" v-for="(ls, index) in list.comment_list" :key="index">
					<image :src="ls.avatar || '/static/error/missing-face.png'" class="ask-img"></image>
					<view class="ask-txt ellipsis">{{ ls.comment }}</view>
				</view>
			</view>
			<view class="pay-type-list dots" v-if="show">
				<view class="type-item1" @click="changeDoctor(4)" v-if="userInfo.type != 3">
					<view class="row-1">
						<view class="con"><text class="tit">麻醉会诊</text></view>
						<label class="radio"><radio value="" color="#FC4141" :checked="DoctorType == 4"></radio></label>
					</view>
					<!-- <view class="row-2">提供无限次麻醉咨询及围术期麻醉相关服务</view> -->
				</view>
				<view class="type-item1" v-if="userInfo.type != 3" @click="changeDoctor(1)">
					<view class="row-1">
						<view class="con"><text class="tit">一般咨询</text></view>
						<label class="radio"><radio value="" color="#FC4141" :checked="DoctorType == 1"></radio></label>
					</view>
					<view class="row-2">仅提供麻醉咨询，20次图文交互后结束服务</view>
				</view>
				<view class="type-item1" @click="changeDoctor(2)" v-if="userInfo.type != 3">
					<view class="row-1">
						<view class="con"><text class="tit">围术期麻醉相关服务</text></view>
						<label class="radio"><radio value="" color="#FC4141" :checked="DoctorType == 2"></radio></label>
					</view>
					<view class="row-2">提供无限次麻醉咨询及围术期麻醉相关服务</view>
				</view>
				<view class="type-item flex_item" @click="changeDoctor(3)" v-if="userInfo.type == 3">
					<view class="con"><text class="tit">外出预约</text></view>
					<label class="radio"><radio value="" color="#FC4141" :checked="DoctorType1 == 3"></radio></label>
				</view>
			</view>
			<!-- 立即咨询 -->
			<view class="sub-bottom" v-if="show" @click="DoctorType != 4?open():confirm()">确定</view>
		</view>
		<!-- 资讯医生弹出层 -->
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<image class="img" mode="widthFix" src="../../static/img/img24.png"></image>
				<view class="row">
					<view class="row-1">
						<text v-if="DoctorType == 1 && userInfo.type == 1">确认咨询该医生？</text>
						<text v-if="DoctorType == 2 && userInfo.type == 1">确认预约该医生？</text>
						<text v-if="DoctorType == 4 && userInfo.type == 1">确认咨询该医生？</text>
						<text v-if="userInfo.type == 3 && DoctorType1 == 3">确认预约该医生？</text>
					</view>
					<view class="row-2">
						<!-- <text>咨询费用:</text> -->
						<text style="color: #DE504C;">￥{{ pay_price }}</text>
					</view>
					<button class="row-3 flex" v-if='DoctorType != 4' @click="payopen">
						<text v-if="DoctorType == 1 && userInfo.type == 1">马上咨询</text>
						<text v-if="DoctorType == 2 && userInfo.type == 1">马上预约</text>
						<text v-if="DoctorType == 4 && userInfo.type == 1">马上咨询</text>
						<text v-if="userInfo.type == 3 && DoctorType1 == 3">马上预约</text>
					</button>
					<button class="row-3 flex" v-else @click="confirm">
						马上咨询
					</button>
				</view>
			</view>
			<view class="close_icon" @click="close"><image src="../../static/img/img016.png"></image></view>
		</uni-popup>
		<!-- 支付弹出窗 -->
		<uni-popup ref="popup1" type="bottom">
			<view class="payment">
				<view class="first flex " @click="payclose()">
					<text class="word">选择支付方式</text>
					<image src="../../static/img/img25.png"></image>
				</view>
				<view class="pay-type-list">
					<view class="type-item b-b" @click="changePayType(1)">
						<view class="img"><image class="yue" src="../../static/img/img26.png"></image></view>
						<view class="con"><text class="tit">微信支付</text></view>
						<label class="radio"><radio value="" color="#FC4141" :checked="payType == 1"></radio></label>
					</view>
					<view class="type-item flex_item" @click="changePayType(2)">
						<view class="img"><image class="yue" src="../../static/img/img017.png"></image></view>
						<view class="con"><text class="tit">余额支付</text></view>
						<label class="radio"><radio value="" color="#FC4141" :checked="payType == 2"></radio></label>
					</view>
				</view>
				<view class="one"></view>
				<view class="Third flex">
					<view class="two1">
						<text class="two1-1 ">合计：</text>
						<text class="two1-2">￥</text>
						<text class="two1-2 size">{{ pay_price }}</text>
					</view>
					<view class="two2" :class="{ clickbg: payLoding }" @click.stop="!payLoding ? confirm() : ''"><text>立即支付</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { getDoctor, calculate, createOrder, orderpay } from '@/api/doctor.js';
import { mapState, mapMutations } from 'vuex';
import { weixindata } from '@/utils/wxAuthorized.js';
// #ifdef H5
import weixinObj from '@/libs/jweixin-module/index.js';
// #endif
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			uid: '', //医生uid
			list: '', //详情信息
			pay_price: '', //支付费用
			payType: 1, //支付类型
			payLoding: false, //判断是否支付中
			// #ifdef H5
			froms: '', //当前是否为微信浏览器
			// #endif
			type: '', //判断是否从订单中进入
			DoctorType: 2, //医生类型
			DoctorType1: 3, //医生类型
			order_id: '', //订单id
			show: false
		};
	},
	onLoad(option) {
		this.uid = option.id;
		if (option.spread) {
			// 存储邀请人
			this.spread = option.spread;
			uni.setStorageSync('spread', option.spread);
		}
		this.loadDate();
		this.Calculate();
	},
	computed: {
		// #ifdef H5
		...mapState(['userInfo', 'weichatObj'])
		// #endif
	},
	watch: {
		DoctorType(newValue, oldValue) {
			let obj = this;
			if (newValue != oldValue) {
				obj.Calculate();
			}
		}
	},
	methods: {
		//选择支付方式
		changePayType(type) {
			this.payType = type;
		},
		//选择医生类型
		changeDoctor(type) {
			this.DoctorType = type;
		},
		//获取医生详情
		loadDate() {
			let obj = this;
			getDoctor({
				id: obj.uid
			})
				.then(({ data }) => {
					obj.list = data;
				})
				.catch(e => {
					console.log('----', e.message);
				});
		},
		//计算金额
		Calculate() {
			let obj = this;
			let type = '';
			if (obj.userInfo.type == 3) {
				type = obj.DoctorType1;
			} else {
				type = obj.DoctorType;
			}
			console.log(type);
			calculate({
				doctor_id: obj.uid,
				type: type
			})
				.then(({ data }) => {
					obj.show = true;
					obj.pay_price = data.pay_price;
				})
				.catch(e => {
					console.log(e.message);
					if (e.message == '该医生尚未完善出诊信息') {
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/doctor/doclist'
							});
						}, 1200);
					}
					if (e.message == '该医生就职地区/医院与你的所在地区/医院不符') {
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/doctor/doclist'
							});
						}, 1200);
					}
				});
		},
		//确认支付
		confirm: async function() {
			let obj = this;
			// 支付中
			obj.payLoding = true;
			// #ifdef H5
			// 获取当前是否为微信浏览器
			obj.froms = uni.getStorageSync('weichatBrowser') || '';
			// #endif
			// 判断是否为未支付订单中跳转进入
			if (obj.type != 1) {
				// 初次生成订单
				obj.firstCreateOrder();
			} else {
				obj.orderMoneyPay();
			}
		},
		// 初次订单创建
		firstCreateOrder() {
			let obj = this;
			// 获取下单页面数据
			let type = '';
			if (obj.userInfo.type == 3) {
				type = obj.DoctorType1;
			} else {
				type = obj.DoctorType;
			}
			let data = {
				doctor_id: obj.uid, //医生uid
				type: type, //医生类型 1 普通预约 2 私人医生
				pay_type: obj.payType //支付类型  1是微信 2是余额
			};
			// 生成订单
			createOrder(data)
				.then(({ data, status, msg }) => {
					obj.order_id = data.order_id;
					if (obj.payType == 2) {
						if (msg == '余额支付成功') {
							obj.$api.msg(msg);
							obj.payLoding = false;
							uni.navigateTo({
								url: '/pages/doctor/chat?id=' + data.order_id + '&name=' + obj.list.name + '&uid=' + obj.uid
							});
						} else {
							console.log(msg, 'msg');
						}
					} else {
						if (obj.DoctorType != 4) {
							// 立即支付
							obj.orderMoneyPay(data);
						} else {
							uni.navigateTo({
								url: '/pages/doctor/chat?id=' + data.order_id + '&name=' + obj.list.name + '&uid=' + obj.uid
							});
						}
					}
				})
				.catch(e => {
					obj.payLoding = false;
					console.log(e.message);
				});
		},
		// 支付金额
		orderMoneyPay(data) {
			// console.log(this,'this')
			let obj = this;
			let config = data.jsConfig;
			weixindata().then(e => {
				weixinObj.chooseWXPay({
					timestamp: config.timestamp,
					nonceStr: config.nonceStr,
					package: config.package,
					signType: config.signType,
					paySign: config.paySign,
					success: function(res) {
						console.log(res);
						obj.$api.msg(res);
						obj.payLoding = false;
						uni.showModal({
							title: '提示',
							content: '您已支付成功，是否进入咨询？',
							success: function(res) {
								if (res.confirm) {
									obj.payclose();
									uni.navigateTo({
										url: '/pages/doctor/chat?id=' + data.order_id + '&name=' + obj.list.name + '&uid=' + obj.uid
									});
								} else if (res.cancel) {
									obj.payclose();
									uni.switchTab({
										url: '/pages/patient/patient'
									});
								}
							}
						});
					},
					fail: function(res) {
						console.log(res, '失败');
						uni.showModal({
							title: '错误',
							content: res.errMsg,
							showCancel: false
						});
					}
				});
			});

			// uni.showModal({
			// 	title: 'appid',
			// 	content: JSON.stringify(config),
			// 	showCancel: false,
			// 	success: res => {},
			// 	fail: () => {},
			// 	complete: () => {}
			// });
		},
		//确认咨询弹唱
		open() {
			this.$refs.popup.open();
		},
		//关闭咨询
		close() {
			this.$refs.popup.close();
		},
		//支付弹窗
		payopen() {
			this.$refs.popup1.onTap();
			this.$refs.popup1.open();
			this.close();
		},
		//支付支付弹窗
		payclose() {
			this.$refs.popup1.close();
		},
		Tomore() {
			uni.navigateTo({
				url: '/pages/user/reply?id=' + this.uid
			});
		}
	}
};
</script>

<style lang="scss">
page {
	.container {
		background-color: #ffffff;
	}
}
.sub-bottom {
	background: $background-color;
	box-shadow: 0px 0px 13rpx 3rpx rgba(209, 212, 217, 0.31);
	border-radius: 35rpx;
	width: 80%;
	font-size: $font-base + 2rpx;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
	text-align: center;
	padding: 20rpx 0rpx;
	margin: 0rpx auto;
	margin-top: 50rpx;
}
.mar-b {
	margin-bottom: 33rpx;
}
.top {
	width: 750rpx;
	height: 250rpx;
	background: linear-gradient(52deg, rgba(151, 143, 250, 1) 0%, rgba(126, 153, 254, 1) 100%);
}

.user-box {
	width: 690rpx;
	margin: -130rpx auto;
	background: #fbfbfb;
	box-shadow: 1rpx 4rpx 40rpx 0rpx rgba(51, 51, 51, 0.14);
	border-radius: 26rpx;
	display: flex;
	padding: 65rpx 54rpx;
	image {
		width: 147rpx;
		height: 147rpx;
		border-radius: 50%;
	}

	.user-right {
		padding-left: 25rpx;
		.user-name {
			font-size: $font-base + 2rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			line-height: 40rpx;
		}

		.user-address {
			padding: 10rpx 0rpx;
			font-size: 26rpx;
			color: #666666;
		}

		.user-num {
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;

			text {
				color: $font-color;
			}
		}
	}
}
.list-box {
	margin-top: 180rpx;
	padding: 25rpx 25rpx;
	.item-box {
		margin-bottom: 54rpx;
		.icon-box {
			margin-bottom: 32rpx;
		}
	}
}
.left-icon {
	width: 12rpx;
	height: 42rpx;
	background: $base-color;
	border-radius: 6rpx;
}
.left-box {
	width: 100%;
}
.left-tit {
	font-size: 30rpx;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	line-height: 42rpx;
	margin-left: 14rpx;
}
.more {
	font-size: 24rpx;
	color: #666666;
}
.left-txt {
	font-size: 28rpx;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	line-height: 52rpx;
}

.ask-list {
	margin-bottom: 25rpx;
	.ask-img {
		width: 92rpx;
		height: 92rpx;
		border-radius: 50%;
	}
	.ask-txt {
		font-size: 28rpx;
		font-weight: 500;
		width: 90%;
		padding-left: 15rpx;
		color: rgba(102, 102, 102, 1);
		line-height: 48rpx;
	}
}
.popup {
	width: 536rpx;
	.img {
		width: 100%;
	}
	.row {
		background: #ffffff;
		overflow: hidden;
		border-radius: 0 0 10rpx 10rpx;
		padding: 45rpx 45rpx;
		margin-top: -15rpx;
		.row-1 {
			font-size: $font-lg + 4rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 53rpx;
			text-align: center;
		}
		.row-2 {
			font-size: $uni-font-size-lg;
			font-weight: 500;
			color: $font-color-dark;
			line-height: 44rpx;
			text-align: center;
			margin-top: 35rpx;
		}
		.row-3 {
			width: 80%;
			height: 70rpx;
			margin: 0 auto;
			margin-top: 40rpx;
			background: linear-gradient(0deg, rgba(126, 153, 254, 1), rgba(151, 143, 250, 1));
			border-radius: 34rpx;
			justify-content: center;
			font-size: $uni-font-size-lg + 4rpx;
			font-weight: 500;
			color: #f8f9f9;
		}
	}
}
.close_icon {
	width: 52rpx;
	height: 52rpx;
	margin: 88rpx auto 0;
	image {
		width: 100%;
		height: 100%;
	}
}
//支付弹窗
.dots {
	padding-left: 0upx !important;
}

.pay-type-list {
	margin-top: 20upx;
	background-color: #fff;
	padding-left: 40upx;
	.type-item {
		height: 120upx;
		padding: 20upx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 60upx;
		font-size: 30upx;
		position: relative;
	}

	.type-item1 {
		height: 120upx;
		padding: 20upx 0;
		// display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 60upx;
		font-size: 30upx;
		position: relative;
		.row-1 {
			display: flex;
		}
		.row-2 {
			margin-top: 12rpx;
			font-size: 28rpx;
			color: #c0c4cc;
			text-align: center;
		}
	}

	.icon {
		width: 100upx;
		font-size: 52upx;
	}
	.img {
		color: #fe8e2e;
		width: 50rpx;
		height: 50rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.tit {
		font-size: $font-lg;
		color: $font-color-dark;
		margin-bottom: 4upx;
	}
	.con {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding-left: 25rpx;
		font-size: $font-sm;
		color: $font-color-light;
	}
}
.payment {
	background-color: #ffffff;
	border-radius: 15rpx 15rpx 0rpx 0rpx;
	.first {
		border-bottom: 2rpx solid $border-color-light;
		padding: 38rpx 25rpx;
		.word {
			font-size: $uni-font-size-base;
			font-weight: bold;
			color: $font-color-dark;
		}
		image {
			width: 25rpx;
			height: 25rpx;
		}
	}
	.one {
		height: 20rpx;
		background-color: #f6f6f6;
	}
	.Third {
		.two1 {
			width: 55%;
			background-color: #ffffff;
			padding-left: 25rpx;
			.two1-1 {
				font-size: $uni-font-size-base;
				font-weight: 400;
				color: $font-color-dark;
			}
			.two1-2 {
				font-size: $uni-font-size-sm;
				font-weight: bold;
				color: $color-red1;
			}
			.size {
				font-size: $uni-font-size-lg + 4rpx;
			}
		}
		.two2 {
			width: 45%;
			background: $color-red1;
			color: #ffffff;
			font-size: $uni-font-size-lg;
			font-weight: 550;
			text-align: center;
			padding: 30rpx 0rpx;
		}
		.clickbg {
			background-color: $color-gray !important;
		}
	}
}
</style>
