<template>
	<view class="web_box">
		<!-- <u-navbar height="44" leftText="确认订单" @leftClick="leftClick" :autoBack="true" bgColor="#fff">
		</u-navbar> -->
		<view class="box hflex acenter">
			<image :src="good.img" mode="widthFix" style="width: 322rpx;border-radius: 16rpx;"></image>
			<view class="box_right vflex">
				<view class="title">{{good.title}}</view>
				<view class="text_style1" style="padding: 14rpx 0 8rpx;">总学时：{{good.period}}</view>
				<view class="text_style1" style="padding: 0 0 14rpx;">讲师：{{good.lecturer}}</view>
				<view v-if="good.type == 1" class="price">￥{{good.price}}</view>
				<view v-else class="hflex acenter">
					<image src="/static/images/integral/integral.png" mode="widthFix" style="width: 44rpx;"></image>
					<view class="price">{{good.price}}</view>
				</view>
			</view>
		</view>
		<view class="box vflex" style="padding: 24rpx 22rpx;">
			<view class="title" style="font-size: 32rpx;">订单信息</view>
			<view class="hflex acenter jbetween item">
				<view class="leftText">商品总价</view>
				<view v-if="good.type == 1" class="price">￥{{good.price}}</view>
				<view v-else class="hflex acenter">
					<image src="/static/images/integral/integral.png" mode="widthFix" style="width: 44rpx;"></image>
					<view class="price">{{good.price}}</view>
				</view>
			</view>
			<view class="hflex acenter jbetween item">
				<view class="leftText">订单编号</view>
				<view class="rightText">{{order_no}}</view>
			</view>
			<view class="hflex acenter jbetween item">
				<view class="leftText">创建时间</view>
				<view class="rightText">{{order.time}}</view>
			</view>
			<!-- <view class="hflex acenter jbetween item">
				<view class="leftText">订单账号</view>
				<view class="rightText">{{order.account}}</view>
			</view> -->
		</view>
		<view class="box hflex acenter jbetween" style="padding: 24rpx 22rpx;" v-if="good.type == 1">
			<view class="hflex acenter">
				<u-icon name="weixin-circle-fill" color="#00e06e" size="24"></u-icon>
				<view class="leftText" style="padding-left: 24rpx;">微信支付</view>
			</view>
			<u-radio-group v-model="value">
				<u-radio shape="circle"></u-radio>
			</u-radio-group>
		</view>
		<view class="hflex jend" style="width: 100%;">
			<u-button @click="pay">立即支付</u-button>
		</view>
		<!-- 积分支付弹窗 -->
		<u-popup :show="showPay" mode="center" round="12" @close="showPay = false">
			<view class="content">
				<view class="content_title">
					确定支付
				</view>
				<view class="hflex acenter jcenter content_price">
					<image src="/static/images/integral/integral.png" mode="widthFix" style="width: 44rpx;"></image>
					<view>{{good.price}}</view>
				</view>
				<view class="btnGroup hflex acenter">
					<view class="leftBtn" @click="showPay = false">取消</view>
					<view class="rightBtn" @click="payIntegral">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	
	export default {
		data() {
			return {
				good: {},
				order: {
					orderId: '156149967979879',
					time: '',
					account: 'jx-265156-11',
				},
				showPay: false,
				value: '',
				id: 0,
				order_no: '',
				order_id: ''
			}
		},
		onLoad(options) {
			console.log(options);
			this.order_no = options.order_no
			this.order_id = options.order_id
			this.id = options.id
			this.getData(this.id)
			this.getDate()
		},
		methods: {
			leftClick() {
			},
			// 获取订单课程信息
			getData(id) {
				var that = this
				$api.req({
					url: '/api/Index/courseDetail',
					data: {
						id: id
					}
				}, function(res) {
					console.log("订单课程信息=",res);
					if (res.code === 1) {
						that.good = res.data
					}
				})
			},
			// 获取当前时间 
			getDate() {
				let year = new Date().getFullYear();
				let month = new Date().getMonth() +1;
				let day = new Date().getDate();
				let hour = new Date().getHours();
				let minute = new Date().getMinutes();
				let second = new Date().getSeconds();
				if(month < 10) {
					month = '0' + month
				}
				if(day < 10) {
					day = '0' + day
				}
				if(hour < 10) {
					hour = '0' + hour
				}
				if(minute < 10) {
					minute = '0' + minute
				}
				if(second < 10) {
					second = '0' + second
				}
				this.order.time = year + '-' + month + '-' + day + '  ' + hour + ':' + minute + ':' + second
			},
			// 微信支付
			pay() {
				var that = this
				if (that.good.type == 1) {
					$api.req({
						url: '/api/Index/payOrder',
						data: {
							id: that.order_id,
							order_no: that.order_no,
							pay_type: 'wx',
							from: '2'
						}
					}, function(res) {
						if(res.code == 1) {
							const payment = res.data.pay
							wx.requestPayment({
							  ...payment,
							  success (res) {
								console.log('pay success', res)
								$api.info('支付成功')
								$api.jump('/pages/index/course/detail?id=' + that.id)
							  },
							  fail (err) {
								console.error('pay fail', err)
							  }
							})
						}
						
					})
				} else {
					that.showPay = true
				}
			},
			// 积分支付
			payIntegral() {
				var that = this
				$api.req({
					url: '/api/Index/payIntegralOrder',
					data: {
						order_no: that.order_no
					}
				}, function(res) {
					$api.info(res.msg)
					that.showPay = false
					$api.jump('/pages/index/course/detail?id=' + that.good.id,1)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.web_box::v-deep {
		
		.u-navbar {
			width: 100%;
			box-sizing: border-box;
			padding: 36px 16px 0 0;
			margin-bottom: 64rpx;
		}
		.box {
			width: 690rpx;
			margin: 20rpx 30rpx 0;
			background: #FFFFFF;
			box-shadow: 0px 2px 6px 0px rgba(213,213,213,0.5);
			border-radius: 12px;
			box-sizing: border-box;
			padding: 14rpx 12rpx;
		}
		.box_right {
			padding-left: 12rpx;
		}
		.title {
			font-size: 14px;
			font-weight: 600;
			color: #333333;
			line-height: 20px;
		}
		.text_style1 {
			font-size: 10px;
			font-weight: 400;
			color: #999999;
			line-height: 14px;
		}
		.price {
			font-size: 16px;
			font-weight: 600;
			color: #FA6400;
			line-height: 22px;
		}
		.item {
			padding: 14rpx 0 12rpx;
		}
		.leftText {
			font-size: 14px;
			font-weight: 400;
			color: #333333;
			line-height: 20px;
		}
		.rightText {
			font-size: 14px;
			font-weight: 400;
			color: #333333;
			line-height: 20px;
		}
		.u-radio-group {
			flex: unset;
		}
		.u-button {
			margin: 28rpx 28rpx 0;
			width: 362rpx;
			height: 70rpx;
			background: linear-gradient(135deg, #53BDFF 0%, #2988FE 100%);
			border-radius: 40rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
		.content {
			width: 572rpx;
			background: #FFFFFF;
			border-radius: 12px;
			box-sizing: border-box;
			padding: 28rpx 32rpx;
		}
		.content_title {
			width: 100%;
			text-align: center;
			font-size: 40rpx;
			font-weight: 500;
			color: #2988FE;
			line-height: 28px;
		}
		.content_price {
			width: 100%;
			font-size: 48rpx;
			font-weight: 600;
			color: #F7B500;
			padding: 28rpx 0 66rpx;
		}
		.btnGroup {
			width: 100%;
		}
		.leftBtn {
			width: 256rpx;
			height: 80rpx;
			background: rgba(41,136,254,0.2);
			border-radius: 20px 0 0 20px;
			font-size: 36rpx;
			font-weight: 500;
			color: #2988FE;
			text-align: center;
			line-height: 80rpx;
		}
		.rightBtn {
			width: 256rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #53BDFF 0%, #2988FE 100%);
			border-radius: 0px 20px 20px 0px;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
	}
</style>