<template>
	<view class="container">
		<!-- 课程详情 -->
		<template v-if="courseInfoItem">
			<view class="courseItemBox">
				<course-item :thumbnailPath="courseInfoItem.displayImage" :title="courseInfoItem.fileTitle" :summaryBox="courseInfoItem.fileSynopsis" :dataList="{coursePrice:courseInfoItem.coursePrice,salesNumber:courseInfoItem.salesNumber}" :fileLecturerId="courseInfoItem.fileLecturerId"></course-item>
			</view>
		</template>
		<!-- 价格明细 -->
		<view class="priceInfoContent">
			<h4>价格明细</h4>
			<view><text>现价</text><text>￥{{courseInfoItem.coursePrice}}</text></view>
			<view>
				<text @click="toggle(1,'bottom')">积分抵扣<i class="iconfont icon-31tishi"></i></text>
				<text class="integralBox"  @click="toggle(2,'bottom')" v-if="intergralInfo.preFortune">{{!isDeduction ? '未选' : '已选'}}积分，可抵扣{{deductionCore}}<i class="iconfont icon-youjiantou"></i></text>
				<text style="color: #666666;font-size: 30rpx;" v-else>暂无积分</text>
			</view>
			<view><text>合计</text><text>￥{{totalPrice}}</text></view>
		</view>
		<!-- 支付方式 -->
		<view class="paymentMethodContent">
			<h4>选择支付方式</h4>
			<view class="paymentItem" @click="selectPaymentMethod(2)">
				<view>
					<i class="iconfont icon-zhifubao"></i>
					<text>支付宝支付</text>
				</view>
				<view class="selectRadio" :class="{'actived':paymentMethod===2}">
					<i class="iconfont icon-duihao"></i>
				</view>
				
			</view>
			<view class="paymentItem" @click="selectPaymentMethod(1)">
				<view>
					<i class="iconfont icon-py_weixinzhifu"></i>
					<text>微信支付</text>
				</view>
				<view class="selectRadio" :class="{'actived':paymentMethod===1}">
					<i class="iconfont icon-duihao"></i>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="totalContent">
			<view class="priceInfoBox">
				<view>合计： <strong style="font-size: 36rpx;">￥{{totalPrice}}</strong></view>
				<view>共优惠：<strong style="color:#F15A1F" v-if="intergralInfo.preFortune">￥{{deductionCore * intergralInfo.preFortune  }}</strong>
					<text style="color:#F15A1F" v-else>0</text>
				 </view>
			</view>
			<view class="confirmOrder" @click="pay()">提交订单</view>
		</view>
	<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<view class="title">
					<text></text>
					<h3>{{popupTitle}}</h3>
					<i class="iconfont icon-guanbi" @click="closePopup(1)"></i>
				</view>
				<view v-if="popupType===1"><text>1积分=1元,积分抵扣如同现金,所有课程均可使用.</text></view>	
				<view v-if="popupType===2">
					<view class="deductionInfoItem" :class="{'actived':isDeduction}" @click="selectDeduction(true)">
						<view style="display: flex;">
							<text>可抵扣</text>
							<view class="integralInfoBox">
								<text class="deductionCount" >￥{{deductionCore * intergralInfo.preFortune || '0'}}</text>
								<text>需{{deductionCore}}积分兑换</text>
							</view>
						</view>
						<view class="selectRadio">
							<i class="iconfont icon-duihao"></i>
						</view>
					</view>
					<view class="deductionInfoItem" :class="{'actived':!isDeduction}" @click="selectDeduction(false)">
						<view>
							<text>不使用积分抵扣</text>
						</view>
						<view class="selectRadio">
							<i class="iconfont icon-duihao"></i>
						</view>
					</view>
					<view class="confirmBtn" @click="closePopup(1);toggle(3,'center')">
						确认
					</view>
				</view>	
			</view>
		</uni-popup>
		<view class="popupContainer">
			<uni-popup ref="popup1" background-color="#fff">
				<view class="popup1-content">
					<view class="title">
						<text></text>
						<h3>{{popupTitle}}</h3>
						<i class="iconfont icon-guanbi" @click="closePopup(2)"></i>
					</view>
					<view class="integralDeductionContent">
						<view class="intergralItem">
							<text>可兑换积分:</text>
							<text>{{intergralInfo.yesExchangeFortune}}积分</text>
						</view>
						<view class="intergralItem">
							<text>本次兑换消耗积分:</text>
							<text>{{deductionCore}}积分</text>
						</view>
						<view class="intergralItem">
							<text>剩余可兑换积分:</text>
							<text>{{(intergralInfo.yesExchangeFortune - deductionCore).toFixed(2)}}积分</text>
						</view>
						<view class="confirmBtn" @click="closePopup(2)">
							确认兑换
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api";
	import courseItem from "@/components/courseItem/courseItem.vue";
	export default {
		components:{
			courseItem
		},
		data() {
			return {
				courseInfoItem:{},
				fileId:null,
				paymentMethod:2,
				popupTitle:'积分抵扣规则',
				popupType:1,
				isDeduction:false,
				userId: uni.getStorageSync('cffp_userId'),
				intergralInfo:{},
				orderId:'1',
				paymentBtnDisabled:false
			}
		},
		computed:{
			totalPrice(){
				if(this.isDeduction){
					return this.courseInfoItem.coursePrice - this.deductionCore * this.intergralInfo.preFortune
				}else{
					return this.courseInfoItem.coursePrice;
				}
			},
			deductionCore(){
				if(this.courseInfoItem.coursePrice / this.intergralInfo.preFortune < this.intergralInfo.yesExchangeFortune){
					return parseFloat((this.courseInfoItem.coursePrice / this.intergralInfo.preFortune)).toFixed(2)
				}else{
					return this.intergralInfo.yesExchangeFortune
				}
			}
		},
		methods: {
			// 支付
			pay(){
				if(this.paymentBtnDisabled){
					return false;
				}
				this.paymentBtnDisabled = true;
				const param = {
					orderId:this.orderId,
					amount:this.totalPrice,
					paymentMethod:this.paymentMethod,
					userId:this.userId,
					integralExchange:this.isDeduction ? parseFloat(this.deductionCore) : 0
				}
				if(this.paymentMethod==1){
					api.wxAppPay(param).then(res=>{
						this.paymentBtnDisabled = false;
					})
				}else if(this.paymentMethod==2){
					api.aliAppPay(param).then(res=>{
						if(res['success']){
							const aliOrderString = res['data']['aliOrderString'];
							let _this = this
							if(aliOrderString){
								uni.requestPayment({
								    provider: 'alipay',
								    orderInfo: aliOrderString,
								    success: function (resp) {
								        console.log('success:' + JSON.stringify(resp));
										uni.navigateTo({
											url:`/pages/orderStatus/orderStatus?orderId=${_this.orderId}&fileId=${_this.fileId}&orderStatus=2`
										})
								    },
								    fail: function (err) {
								        console.log('fail:' + JSON.stringify(err));
										uni.navigateTo({
											url:`/pages/orderStatus/orderStatus?orderId=${_this.orderId}&fileId=${_this.fileId}&orderStatus=1`
										})
								    }
								});
							}else{
								uni.navigateTo({
									url:`/pages/orderStatus/orderStatus?orderId=${this.orderId}&fileId=${this.fileId}&orderStatus=2`
								})
							}
						 
						}else{
							this.paymentBtnDisabled = false;
						}
					})
				
				}
			
			},
			// 积分查询
			queryByUserIdFortuneStatistic(){
				api.queryByUserIdFortuneStatistic({userId:this.userId}).then(res=>{
					if(res['success']){
						this.intergralInfo = res['data'];
						this.intergralInfo.preFortune = 1.0;
					}
				})
			},
			// 课程详情页面
			courseDetail(){
				api.courseDetail({fileId:this.fileId,userId:this.userId}).then(res=>{
					console.log('课程详情',res);
					if(res['success']){
						this.courseInfoItem =  res['data']['data'];
					}
				})
			},
			// 选择支付方式
			selectPaymentMethod(value){
				this.paymentMethod = value;
			},
			// 从下往上弹出
			toggle(val,type) {
				// type 1为积分抵扣规则，2为优惠详情
				this.popupType = val;
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				if(this.popupType===3){
					if(this.isDeduction){
						this.$refs.popup1.open(type);	
					}
				}else{
					this.$refs.popup.open(type);
				}
				if(this.popupType===1){
					this.popupTitle = '积分抵扣规则'
				}else if(this.popupType===2){
					this.popupTitle = '优惠详情'
				}else if(this.popupType===3){
					this.popupTitle = '积分兑换'
				}
			},
			// 关闭弹出层
			closePopup(val){
				if(val===1){
					this.$refs.popup.close()
				}else{
					this.$refs.popup1.close()
				}
			},
			// 选择是否抵扣
			selectDeduction(type){
				this.isDeduction = type;
			},
			// 确认积分兑换
			confirmIntergralDeduction(){
	
			}
		},
		onLoad(option){
			this.fileId = option.fileId;
			this.orderId = option.orderId;
			this.courseDetail();
			this.queryByUserIdFortuneStatistic()
			console.log(option)
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss">
	.container{
		position: relative;
		height: 95vh;
		.courseItemBox{
			padding: 20rpx 30rpx;
			background-color: #fff;
		}
		.popup-content{
			.title{
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				h3{
					text-align: center;
					color: #333;
					font-size: 32rpx;
					margin-bottom: 30rpx;
				}
				.iconfont{
					color: #999;
				}
			}
			
			text{
				color: #666;
				font-size: 30rpx;
			}
			.deductionInfoItem{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #333;
				font-size: 30rpx;
				padding: 10rpx 30rpx;
				background-color: #F5f5f5;
				border-radius: 20rpx;
				min-height: 90rpx;
				margin-top: 30rpx;
				.integralInfoBox{
					display: flex;
					flex-direction: column;
					margin-left: 10rpx;
					text{
						font-size: 30rpx;
						color: #333333;
					}
					.deductionCount{
						font-size: 36rpx;
						color: #F15A1F;
					}
				}
				.selectRadio{
					color: #D8D8D8;
					width: 40rpx;
					height: 40rpx;
					border: 1px solid #D8D8D8;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				&.actived{
					border: 3rpx solid #20269B;
					background-color: #fff;
					.selectRadio{
						background-color: #20269B;
						color: #fff;
					}
				}
				
			}
			.integralDeductionContent{
				.intergralItem{
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;
				}
			}
			.confirmBtn{
				border-radius: 80rpx;
				height: 80rpx;
				width: 60%;
				background-color: #20269B;
				color: #fff;
				margin: 64rpx auto 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.popup1-content{
			padding: 30rpx 34rpx 20rpx 42rpx;
			border-radius: 20rpx;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				h3{
					text-align: center;
					color: #333;
					font-size: 32rpx;
					margin-bottom: 30rpx;
				}
				.iconfont{
					color: #999;
				}
			}
			.integralDeductionContent{
				.intergralItem{
					display: flex;
					justify-content: space-between;
					color: #333;
					font-size: 30rpx;
					margin-bottom: 10rpx;
				}
			}
			.confirmBtn{
				border-radius: 80rpx;
				height: 80rpx;
				width: 60%;
				background-color: #20269B;
				color: #fff;
				margin: 64rpx auto 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.priceInfoContent,.paymentMethodContent,.totalContent{
			background-color: #fff;
			margin: 0 10rpx;
			padding: 20rpx;
		}
		.priceInfoContent{
			view{
				display: flex;
				justify-content: space-between;
				text{
					&:last-child{
						font-weight: bold;
					}
					&.integralBox{
						color: #FA6900;
						font-weight: normal;
						.iconfont{
							color: #999;
						}
					}
				}
				.iconfont{
					margin-left: 10rpx;
				}
				
			}
		}
		.priceInfoContent,.paymentMethodContent{
			border-bottom: 5px solid #fbfbfb;
			color: #333;
			h4{
				font-size: 32rpx;
				margin-bottom: 20rpx;
			}
			view{
				margin-bottom: 10rpx;
			}
		}
		.paymentMethodContent{
			.paymentItem{
				display: flex;
				align-items: center;
				justify-content: space-between;
				view{
					display: flex;
					align-items: center;
				}
				.icon-zhifubao{
					color: #5A9EF7;
					font-size: 60rpx;
					margin-right: 20rpx;
				}
				.icon-py_weixinzhifu{
					color: #09BB07;
					font-size: 60rpx;
					margin-right: 20rpx;
				}
				.selectRadio{
					width: 40rpx;
					height: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					border: 1px solid #D8D8D8;
					color: transparent;
					&.actived{
						background-color: #0A2F99;
						color: #fff;
					}
				}
				
			}
		}
		.totalContent{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 40rpx 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			.priceInfoBox{
				font-size: 30rpx;
				color: #333;
				view:first-child{
					margin-bottom: 10rpx;
				}
			}
			.confirmOrder{
				    background-color: #20269B;
				    color: #fff;
				    padding: 14rpx 38rpx;
					border-radius: 80rpx;
			}
		}
	
	}

</style>
