<template>
	<view class="content">
		<view class="container">
			<headers :titles="titles"><uni-icons @click="goback()" type="arrow-left" color="#000000"
					size="22px"></uni-icons></headers>
			<u-loadmore :status="status" v-if="show == true" />
		</view>

		<!-- 报名类型 -->
		<view class="booking">
			<view class="sign-type">
				<view class="sign-type-title">
					报名班类
				</view>
				<view class="sign-type-list">
					<view class="list-left">
						<image class="list-left-img" :src="baseUrl + bookingData.driveSchoolCourse.photo" mode="">
						</image>
					</view>
					<view class="list-right">
						<view class="list-right-name">
							{{bookingData.driveSchoolCourse.name}}
						</view>
						<view class="bm-page-right-2">
							<view class="bm-page-right-zd">{{bookingData.driveSchoolCourse.automatic}}</view>
							<view class="bm-page-right-c2">{{bookingData.driveSchoolCourse.license}}</view>
						</view>
						<view class="list-right-price">
							<view class="right-price-1">
								￥{{bookingData.driveSchoolCourse.price}}
							</view>
							<view class="right-price-2">
								￥{{bookingData.driveSchoolCourse.price}}
							</view>
						</view>
					</view>
				</view>

				<view class="bmPrice">
					<view class="price-left">报名费用</view>
					<view class="price-right">￥{{bookingData.driveSchoolCourse.reserveMoney}}</view>
				</view>

				<view class="bmPrice">
					<view class="price-left">付款方式</view>
					<view class="price-right">{{startPay === '1' ? '微信支付' : '线下支付'}}</view>
				</view>
			</view>


			<view class="orders-info">
				<view class="orders-title">订单信息</view>
				<view class="orders-list">
					<view class="orders-left">订单编号</view>
					<view class="orders-right">{{bookingData.payEntity.orderNumber}}</view>
				</view>

				<view class="orders-list">
					<view class="orders-left">下单时间</view>
					<view class="orders-right">{{bookingData.driveSchoolCourse.createTime}}</view>
				</view>

				<view class="orders-list">
					<view class="orders-left">联系人</view>
					<view class="orders-right">{{bookingData.payEntity.name}}</view>
				</view>

				<view class="orders-list">
					<view class="orders-left">联系电话</view>
					<view class="orders-right">{{bookingData.payEntity.phone}}</view>
				</view>
			</view>

			<view class="orders-info">
				<view class="orders-title">报名信息</view>
				<view class="orders-list">
					<view class="orders-left">报名驾校</view>
					<view class="orders-right">{{bookingData.driveSchoolInfo.schoolName}}</view>
				</view>

				<view class="orders-list">
					<view class="orders-left">绑定教练</view>
					<view class="orders-right">{{bookingData.driveSchoolCoach.instructorName}}</view>
				</view>

				<view class="orders-list">
					<view class="orders-left">报名车形</view>
					<view class="orders-right">{{bookingData.driveSchoolCourse.license}}</view>
				</view>
			</view>

			<button @click="bookingInfoClick(bookingData.driveSchoolInfo.lat, bookingData.driveSchoolInfo.lgt)"
				class="orders-bottom">导航到驾校</button>

		</view>

	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import tabbar from '../../components/tabbar/tabbar.vue'
	import request from '@/utils/request.js'
	export default {
		data() {
			return {
				titles: "预约详情",
				msg: "1",
				List: [],
				show: false,
				status: 'loading',
				baseUrl: this.$imagesUrl,
				bookingData: [],
				bookingId: null,
				userId: null,
				startPay: null,
				jlId: null
			}
		},
		onLoad: function(option) {
			this.bookingId = option.bookingId,
				this.startPay = option.startPay,
				this.jlId = option.jlId,
				this.userId = option.userId
			console.log("支付方式为==============>>>", this.startPay, this.bookingId, this.jlId, this.userId)
		},
		onShow() {
			this.findCourseInfo()
		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},
		// 发送好友
		onShareAppMessage(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		// 分享朋友圈
		onShareTimeline(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		components: {
			headers,
			tabbar
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			async findCourseInfo() {
				let res = await request({
					// url: "/drivingSchool/system/driveSchoolCourse/list?id=" + this.bookingId,
					url: `/driving/findPayKcInfo?courseId=${this.bookingId}&jlId=${this.jlId}&userId=${this.userId}`,
					method: 'get',
				})
				this.bookingData = res
			},
			bookingInfoClick(lat, lgt) {
				// 进行导航
				uni.openLocation({
					latitude: lat,
					longitude: lgt,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.booking {
		padding: 20rpx;

		.orders-bottom {
			background-color: #4aa76f;
			color: #fff;
			border-radius: 30rpx;
			margin-top: 30rpx;
		}

		.orders-info {
			border-radius: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			margin-top: 20rpx;

			.orders-list {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
			}

			.orders-title {
				font-weight: 600;
			}
		}

		.sign-type {
			border-radius: 20rpx;
			padding: 20rpx;
			background-color: #fff;

			.bmPrice {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0 0 0;
			}

			.sign-type-list {
				display: flex;
				justify-content: space-between;
				height: 200rpx;
				border-bottom: 1rpx solid #ddd;

				.list-right {
					flex: 3;
					margin-left: 30rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					padding: 30rpx 0;

					.list-right-price {
						display: flex;
						align-items: center;

						.right-price-1 {
							color: red;
							font-size: 34rpx;
						}

						.right-price-2 {
							margin-left: 30rpx;
							color: #666666;
							text-decoration: underline;
							font-size: 24rpx;
						}
					}

					.list-right-name {
						font-weight: 600;
					}

					.bm-page-right-2 {
						display: flex;
						font-size: 22rpx;

						.bm-page-right-zd {
							background-color: rgba(94, 255, 153, 0.2);
						}

						.bm-page-right-c2 {
							background-color: rgba(255, 208, 112, 0.2);
						}

						view {
							text-align: center;
							border-radius: 12rpx;
							padding: 10rpx;
							background-color: red;
							margin-right: 10rpx;
						}

						&:last-child {
							margin-right: 20rpx;
						}
					}
				}

				.list-left {
					flex: 1;

					.list-left-img {
						height: 180rpx;
						width: 280rpx;
						border-radius: 16rpx;
					}
				}

			}

			.sign-type-title {
				font-size: 38rpx;
				font-weight: 600;
				padding: 20rpx;
			}
		}
	}


	.bookingTitle {
		padding: 30rpx 20rpx;
		font-size: 34rpx;
		font-weight: 600;
	}

	.content {
		background: #f4f5f6;
		height: 100vh;
	}

	.container {
		width: 100%;
		background: #f4f5f6;
		box-sizing: border-box;
		padding-top: 88px;
	}
</style>