<!-- 订单详情 -->
<template>
	<nav-bar id="nav-bar" ref="navBar" :navbar-data="navbarData"></nav-bar>
	<view :style="{marginTop: height +'px'}">
		<view class="title">
			<text>订单内容</text>
		</view>
		<view>
			<view class="table">
				<text>下单时间</text>
				<text style="float:right">{{detailObj.admDateTime}}</text>
			</view>
			<view class="table">
				<text>订单类型</text>
				<text style="float:right">{{detailObj.businessDesc}}</text>
			</view>
			<view class="table" v-if="detailObj.businessDesc==='视频问诊(微信)'">
				<text>就诊时间</text>
				<text style="float:right">{{detailObj.apptimeStr}}</text>
			</view>
			<view class="table">
				<text>订单金额</text>
				<view style="float:right">
					<text>￥</text>
					<text style="color:rgba(250,84,28,1);">{{detailObj.ordReasonPatAmt}}</text>
				</view>
			</view>
			<view class="table">
				<text>订单状态</text>
				<text style="float:right" v-if="detailObj.orderType=='P'">已付款</text>
				<text style="float:right" v-if="detailObj.orderType=='B'">未付款</text>
				<text style="float:right" v-if="detailObj.orderType=='T'||detailObj.orderType=='PART'">已退款</text>
			</view>
			<view class="table">
				<text>订单号</text>
				<text style="float:right">{{detailObj.payTradeNum}}</text>
			</view>
		</view>

		<view class="card" v-if="detailObj.orderState=='N'">
			<view class="itdc-head-content">
				<view class="itdc-head-content-top">
					<view class="itdc-head-portrait" onerror="imageError" :style="{ background: 'url('+ (docObj.image ? docObj.image : 'https://api.daidr.me/apis/imgholder/74x95.png') +') no-repeat', backgroundSize: '100%', float: 'left', marginBottom: '50rpx' }" />
					<view>
						<view class="itdc-head-content-top-text">
							<text>{{docObj.name}}</text>
							<text>{{docObj.titleDesc}}</text>
							<text>{{docObj.locDesc}}</text>
						</view>
						<!-- <van-rate :value="docObj.gradeGvg" :size="14" allow-half void-icon="star" readonly color="#FA541C" void-color="#fff" /> -->
						<view>
							咨询量：<text style="color:#13C2C2FF;">{{docObj.inquiries}}</text>
							<!-- <text v-if="doctorDetail.resTime"><text style="color:#13C2C2FF;">  {{docObj.resTime}}</text>响应</text> -->
						</view>
					</view>
				</view>
				<view class="doctor-list-introduce border-top-before">
					<text id="intro" :class="'text-css'+ (targer?'':'after-text-css')">{{doctorDetail.introduce || '暂无该医生描述。'}}</text>
					<view v-if="introCss" catchtap="introTarget" style="color:#1890FF;">{{targer?'展开':'收起'}}</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<van-button round type="info" custom-class="button" @tap="doctorDetail">再次预约</van-button>
		</view>
	</view>
</template>

<script>
	import $http from "@/utils/https";
	import Util from "@/utils/utils";
	import navBar from '@/components/navBar/index';
	import VanButton from '@/components/button/index';
	const app = getApp()
	export default {
		components: {
			'nav-bar': navBar,
			'van-button': VanButton,
		},
		data() {
			return {
				height: app.globalData.height,
				navbarData: {
					isGoHome: true,
					isGoBack: true,
					title: "订单详情"
				},
				detailObj: Object,
				docObj: Object,
				isShowPart: true,
				isShowMax: false,
				targer: false,
				introCss: false,
			}
		},
		onLoad: function(options) {
			// const eventChannel = this.getOpenerEventChannel()
			// eventChannel.on("detailObj", (data) => {
			// })
			const detailObj = this.$cache.get('orderDetailObj')
			if(detailObj) {
				this.$cache.remove('orderDetailObj')
				this.setData({
					detailObj: detailObj,
				}, () => {
					this.docQuery();
				});
			}
		},
		methods: {
			checkIntroduceHeight() {
				let _this = this;
				const query = uni.createSelectorQuery();
				query.select('#intro').boundingClientRect().exec(function(res) {
					if (res[0].height > 24) {
						_this.setData({
							targer: true,
							introCss: true
						})
					}
				})
			},

			// 展示隐藏医生介绍
			introTarget() {
				this.setData({
					targer: this.targer ? false : true
				})
			},

			docQuery: Util.debounce(function() {
				let data = {
					params: [{
						admID: this.detailObj.admID
					}]
				}
				uni.showLoading({
					mask: true,
					title: '处理中,请稍候...'
				})
				$http.post("urlS", this, {
					code: "03100046",
					data: data,
					namespace: "Y",
					success: function(res) {
						uni.hideLoading();
						if (+res.errorCode === 0) {
							this.setData({
								docObj: res.result
							});
						}
					}
				})
			}),

			///查看医生主页
			doctorDetail: Util.debounce(function(e) {
				var docObj = this.docObj
				app.globalData.docObj = docObj
				app.globalData.locObj.locID = docObj.locID
				app.globalData.schDate = docObj.date
				uni.navigateTo({
					url: '/pages/index/pages/doctorInfo/doctorInfo'
				})
			}),
		}
	}
</script>

<style lang="scss">
	.title {
		padding: 23rpx 0 23rpx 49rpx
	}

	.table {
		background: rgba(255, 255, 255, 1);
		margin-top: 1rpx;
		padding: 20rpx 23rpx 20rpx 23rpx;
	}

	text {
		font-size: 32rpx;
		font-family: PingFang SC;
		color: rgba(102, 102, 102, 1);
	}

	.card {
		background: rgba(255, 255, 255, 1);
		margin-top: 10rpx;
	}

	.bottom_line {
		width: 750rpx;
		height: 1rpx;
		background: rgba(245, 244, 244, 1);
	}



	.van-icon__image {
		width: 120rpx !important;
		height: 120rpx !important;
		border-radius: 50% !important;
		margin: 38rpx 0 0 34rpx !important;
	}

	.card_introduce_name {
		font-size: 36rpx;
		font-family: PingFang SC;
		color: rgba(51, 51, 51, 1);
	}

	.card_introduce_text {
		margin-left: 1.5rpx;
		margin-top: 24rpx;
	}

	.card_introduce_title {
		font-size: 32rpx;
		font-family: PingFang SC;
		color: rgba(102, 102, 102, 1);
		margin-left: 14rpx;
	}

	.card_introduce_locDesc {
		font-size: 32rpx;
		font-family: PingFang SC;
		color: rgba(102, 102, 102, 1);
		margin-left: 17rpx;
	}

	/* pages/index//pages/doctorInfo/doctorInfo.wxss */
	.itdc-head {
		max-height: 390rpx;
		padding: 10rpx 24rpx 0 24rpx;
		position: relative;
		margin-bottom: 10rpx;
	}

	.itdc-head-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 168rpx;
		z-index: -1;
	}

	.itdc-head-content {
		/* max-height: 380rpx; */
		background: #fff;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.itdc-head-content-top {
		width: 100%;
		padding: 32rpx;
		padding-bottom: 24rpx;
		box-sizing: border-box;
	}

	.itdc-head-portrait {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.itdc-head-content-top-text {
		font-size: 28rpx;
		color: #666;

		text {
			&:nth-child(1) {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
			}
			&:nth-child(2) {
				margin: 0 16rpx;
			}
		}
	}


	.itdc-head-content-top .van-rate {
		border-radius: 10rpx;
		width: 240rpx;
		height: 40rpx;
		margin: 16rpx 0;
		line-height: 40rpx;
		background: #feeee8;
		display: flex;
		justify-content: space-between;
		padding: 0 12rpx;
		padding-bottom: 4rpx;
		align-items: center;
		box-sizing: border-box;
	}

	.choose-doctor-content {
		width: 100%;
		padding: 0 24rpx;
		margin-bottom: 10rpx;
		box-sizing: border-box;
	}

	.doctor-list-introduce {
		width: 100%;
		padding: 16rpx 29rpx 16rpx 25rpx;
		box-sizing: border-box;
		
		text {
			width: 100%;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical;
			color: #666;
			line-height: 48rpx;
			text-indent: 2em;
			font-size: 28rpx;
			word-wrap: break-word;
		}
	}


	.after-text-css {
		-webkit-line-clamp: 0 !important;
		display: block !important;
	}

	.choose-doctor-date {
		background: #fff;
		width: 100%;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.cdt-header {
		text-align: center;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #666;
	}

	.choose-doctor-tabs-header {
		display: flex;
		width: 100%;
		padding: 24rpx 0;
		box-sizing: border-box;
		justify-content: space-around;
	}

	.choose-doctor-tabs-header-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 80rpx;
		height: 136rpx;
		color: #666;
		font-size: 28rpx;
		font-weight: bold;
		align-items: center;
	}

	.active-tabs {
		background: #1890FF;
		color: #fff;
	}

	.cdthc-title {
		color: #333;
		font-size: 32rpx;
		font-weight: 600;
		margin: 6rpx 0;
	}

	.cdthc-number {
		color: #1890FF;
	}

	.cdthc-no-number {
		color: #ccc
	}

	.active-tabs .cdthc-title,
	.active-tabs .cdthc-number,
	.active-tabs .cdthc-no-number {
		color: #fff;
	}

	.choose-doctor-date-content{
		&-top {
			width: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;
			&-text {
				font-size: 28rpx;
				color: #666;
				.turn-title {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
					margin-bottom: 4rpx;
				}
			}
			.image-css {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}
		}
		&-content {
			width: 100%;
			padding: 32rpx 0;
			display: flex;
			box-sizing: border-box;
		}
		&-bottom {
			width: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;
			height: 110rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&-left {
				color: #666;
				font-size: 28rpx
				text {
					color: #13C2C2;
				}
			}
			&-right {
				display: flex;
				align-items: center;
				&-price {
					margin-right: 16rpx;
					color: #FA541C;
					font-size: 32rpx;
					.price-ico {
						color: #999;
						font-size: 28rpx
					}
				}
				&-btn {
					.van-button {
						min-width: 160rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
					}
				}
			}
		}
	}



	.choose-doctor-evaluate {
		&-title {
			height: 100rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
			line-height: 100rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
		}
		&-content {
			display: flex;
			background: #fff;
			border-radius: 10rpx;
			min-height: 117rpx;
			padding: 24rpx 0;
			width: 100%;
			box-sizing: border-box;
			view {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #666;
				&:nth-child(1) {
					border-right: 1px solid #F5F4F4;
				}
				text {
					font-size: 36rpx;
					color: #FA541C;
					margin-bottom: 4rpx;
				}
			}
		}
	}


	.choose-doctor-evaluation-content {
		min-height: 230rpx;
		margin-top: 4rpx;
		border-radius: 10rpx;
		background: #fff;
		&:last-child {
			margin-bottom: 0;
		}
		&-header {
			height: 92rpx;
			display: flex;
			padding: 0 24rpx;
			box-sizing: border-box;
			justify-content: space-between;
			align-items: center;
			color: #999;
			font-size: 28rpx;
			&-left {
				text {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
					margin-right: 14rpx;
				}
			}
		}
		&-text {
			width: 100%;
			padding: 24rpx 24rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #999;
			view:nth-child(1) {
				margin-bottom: 8px;
			}
			text {
				color: #333;
			}
		}
	}


	.logistics_view-head {
		height: 98rpx;
		line-height: 98rpx;
		width: 100%;
		text-align: center;
		color: #333;
		font-size: 32rpx;
	}

	.consulTime {
		height: 72rpx;
		line-height: 72rpx;
		padding-left: 24rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #666;
		background: #FAF9F9;
		box-sizing: border-box;
	}

	.consul-list {
		width: 100%;
		padding: 24rpx;
		padding-bottom: 0;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		&-item {
			width: 31%;
			margin-right: 3.5%;
			&:nth-child(3n) {
				margin-right: 0;
			}
		}
		&-item-child {
			border: 1px solid #E1E1E1;
			border-radius: 10rpx;
			height: 94rpx;
			text-align: center;
			margin-bottom: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #666;
			font-size: 28rpx;
		}
	}

	.timeCroCheck {
		background: #1890FF;
		color: #fff;
	}

	.btn-box {
		margin-top: 100rpx;
		padding: 0 24rpx;
	}

	.button {
		width: 100%;
	}
</style>