<template>
	<view class="coursesubmit">
		<view class="paymentype">
			<view class="paymentypeitem" >
				<text>支付方式</text>
				<text>在线支付</text>
			</view>
			<view class="paymentypeitem" style="margin-top: 20px;">
				<view class="left" style="display: flex;flex-direction: row;align-items: center;">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/lvqian.png" style="width: 15px;height: 15px;margin-right: 3px;"></image>
					找人代付
				</view>
				<u-checkbox-group >
					<u-checkbox 
						@change="checkboxChange" 
						shape="circle"
						:active-color='pricecolor'
						v-model="checked" 
					></u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view class="store-list" v-if="mchs[0].goods_list.length>0">
			<view class="good" v-for="(cx, ci) in mchs[0].goods_list" :key="ci" >
					  <view class="good-img">
					    <image mode="aspectFill" :src="cx.cover_pic" style="width: 100%; height: 100%;border-radius: 4px;" ></image>
					  </view>
					  <view class="good-r" :style="{'width': (windowWidth -15 - 125 -26)+'px'}">
						  <view class="good-name">
						    <view
						      v-if="cx.marketingLogo.iswords && cx.marketingLogo.iswords==1&& cx.marketingLogo.words!=''"
						      class="Logo"
						      :style="{color: cx.marketingLogo.wordsColor,
						  						background:cx.marketingLogo.wordsBack ,}"
						    >{{cx.marketingLogo.words}}</view>
						    <image
						      v-if="cx.marketingLogo.iswords&&cx.marketingLogo.iswords==2&& cx.marketingLogo.ico!=''"
						      mode="heightFix"
						      :src="cx.marketingLogo.ico"
						      style=" height: 12px;margin-right: 5px"
						    />
						    {{ cx.name }}
						  </view>
						  <view class="good-r-b">
							  <view class="good-rb-box">
								 <text style="font-size: 11px;color: #999999;">永久可看</text>
							  </view>
							  <view class="good-rb-box" style="color: #111111;">
								  <text style="font-size:11px ;">￥</text>
								  <text style="font-size:15px ;">{{cx.goods_attr.price}}</text>
							  </view>
						  </view>
					  </view>
			</view>
		</view>
		<view class="discountbox">
			<view class="filed">
				<view class="left">优惠券</view>
				<view class="right" >
					<text class="content" v-if="mchs[0].coupon.user_coupon_id == 0 && couponList.length>0" @click="showCouponHandler">选择优惠券</text>
					<text class="content" v-else-if="couponList.length==0">暂无优惠券</text>
					<text class="content" v-else :style="{ color: pricecolor }" @click="showCouponHandler">已优惠{{ mchs[0].coupon.coupon_discount }}元</text>
					<u-icon name="ellipsis" size="36" v-if="couponList.length > 0" @click="showCouponHandler"></u-icon>
				</view>
				<!-- <view v-else style="font-size: 11px;color: #999999;">不可使用</view> -->
			</view>
			<view class="filed" style="margin-top: 20px;" v-if="integral.can_use">
				<view class="left">积分抵扣</view>
				<view class="right" >
					<text class="content" :style="{ color: secondary }">{{ `使用${integral.use_num}积分抵扣${integral.deduction_price}元` }}</text>
					<u-checkbox-group><u-checkbox v-model="userInt" :active-color="pricecolor" @change="changeUseInt" :icon-size="28" shape="circle"></u-checkbox></u-checkbox-group>
				</view>
				<!-- <view v-else style="font-size: 11px;color: #999999;">不可使用</view> -->
			</view>
			<view class="filed" style="margin-top: 20px;">
				<view class="left">学习卡</view>
				<view class="right" >
					<text class="content" v-if="mchs[0].education.use_education_id == 0 && courseList.length>0" @click="showCourseHandler">选择学习卡
					</text>
					<text class="content" v-else-if="courseList.length==0">暂无学习卡</text>
					<text class="content" v-else :style="{ color: pricecolor }" @click="showCourseHandler">已优惠{{ mchs[0].education.education_money }}元</text>
					<u-icon name="ellipsis" size="36" v-if="courseList.length > 0" @click="showCourseHandler"></u-icon>
				</view>
				<!-- <view v-else style="font-size: 11px;color: #999999;">不可使用</view> -->
			</view>
			<view class="filed" style="margin-top: 20px;font-size: 12px;color: #999999;">
				注:优惠券(包括积分)和学习卡只能二选一
			</view>
		</view>
		<view class="discountbox" style="margin-bottom: 20px;">
			<view class="filed">
				<view class="left">商品金额</view>
				<view class="right">
					<text class="price">￥{{ goodPrice.toFixed(2) }}</text>
				</view>
			</view>
			<view class="filed" style="margin-top: 20px;" >
				<view class="left">优惠券优惠</view>
				<view class="right">
					<text class="price" :style="{ color: pricecolor }">-￥{{ couponPrice.toFixed(2) }}</text>
				</view>
			</view>
			<view class="filed" style="margin-top: 20px;" >
				<view class="left">学习卡优惠</view>
				<view class="right">
					<text class="price" :style="{ color: pricecolor }">-￥{{ EducationMoney.toFixed(2) }}</text>
				</view>
			</view>
			<view class="filed" v-if="integral.can_use " style="margin-top: 20px;">
				<view class="left">积分抵扣</view>
				<view class="right">
					<text class="price" :style="{ color: pricecolor }">-￥{{ userInt ? integral.deduction_price.toFixed(2) : '0.00' }}</text>
				</view>
			</view>
		</view>
		
		<view class="btton-box">
			<view class="left" :style="{ color: pricecolor }">
				<text>￥</text>
				<text class="bold">{{ ds.total_price }}</text>
				
			</view>
			<view class="right">
				<u-button
					size="80"
					:ripple="true"
					shape="circle"
					@click="ds.promptNoSuperiorFY== true ? submitModel():submitOrderHandler()"
					:custom-style="{
						backgroundColor: mc,
						height: '80rpx',
						color: '#FFF',
						fontSize: '14px'
					}"
				>
					<u-loading mode="circle" style="margin-right: 5px;" v-if="submitOrder"></u-loading>
					
					{{btntext}}
				</u-button>
			</view>
		</view>
		
		<coupon v-if="couponList.length > 0 && showCoupon" :list="couponList" :current="formdata.User_Coupon_Id" @close="closeCouponHandler"></coupon>
		<!-- 课程卡选择 -->
		<course v-if="courseList.length > 0 && showCourse" :list="courseList" :current="formdata.Use_Education_Id" @close="closeCourseHandler"></course>
		<view class="notOption" v-if="submitOrder"></view>
		<payCom v-if="payBtn" :payInfo="payInfo" @closePay="closePay"></payCom>
		<u-toast ref="uToast" />
		<u-popup v-model="payExit" mode="center" :mask-close-able="false">
			<view style="background:#fff;width:500rpx">
				<view style="padding:10px 0 0 10px">提交失败</view>
				<view style="text-align:center;padding-bottom:40rpx">
					<view style="margin:80rpx 0">支付取消</view>
					<span @click="exitPay" style="padding:10rpx 50rpx;color:#fff;background:#19be6b;border-radius: 12px;">确定</span>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="zhaoren" mode="center" :mask-close-able="false">
			<view style="background:#fff;width:500rpx;font-family: aa;border-radius: 10px;">
				<view style="width: 88%;height: 35px;display: flex;flex-direction: row;align-items: flex-end;justify-content: flex-end;margin-left: 6%;" @click="exitPay">
					<u-icon name="close" size="40"></u-icon>
				</view>
				<view style="padding:10px 0 0 10px;text-align:center;">代付金额</view>
				<view style="text-align:center;padding-bottom:40rpx;">
					<view class="daif" :style="{'color': mc}">
						<text style="margin-bottom: 2px;">
							￥
						</text>
						<span :style="{'font-size': '30px','color': mc}">{{ds.total_price}}</span>
						</view>
					<u-button
						size="30"
						:ripple="true"
						shape="circle"
						open-type="share"
						:custom-style="{
							backgroundColor: mc,
							width:'350rpx',
							height: '80rpx',
							color: '#FFF',
							fontSize: '14px'
						}"
					>
						发送给微信好友
					</u-button>
				</view>
			</view>
		</u-popup>
		<u-modal
		  v-model="showReviceModal"
		  content="您的上级不存在，当前订单不会返佣，是否继续？"
		  :show-cancel-button="true"
		  :show-title="false"
		  @confirm="submitOrderHandler"
		  :border-radius="20"
		></u-modal>
	</view>
</template>

<script>
	import payCom from '@/components/pay/pay';
	import coupon from '@/components/coupon/index';
	import course from '@/components/coupon/course';
	export default {
		components: {
			coupon,
			course,
			payCom,
		},
		data() {
			return{
				DetailList:[],
				pageTitle: '填写订单',
				zhaoren:false,
				zrName:'是好友就帮忙代付',
				zrimg:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/zhaoren.png',
				formdata:{
					DetailList:[],
					Use_Integral:0,
					User_Coupon_Id:0,
					Use_Education_Id:0,
				},
				mc:'',
				secondary:'',
				pricecolor:'',
				isLeave: false,
				goodPrice: 0.0,
				couponPrice: 0.0,
				EducationMoney:0.0,
				reduceType:0,//0为都没选1为选择优惠券和积分2为课程卡
				integral: {
					can_use: false,
					use: false,
					use_num: 0,
					deduction_price: 0
				},
				payInfo: {
					OpenId: 'ow_7I5XC1-RGwwk8QANBmWKYKmOc',
					OrderId: '',
					OrderPayType: 1,
					GoodsName: '',
					type:1,//标记是从课程过去的
				},
				userInt:false,
				mchs:{},
				ds:{
					total_price: '0.00'
				},
				checked:false,
				payExit: false,
				payBtn: false,
				couponList:[],//优惠券的列表
				courseList:[],//学习卡列表
				windowWidth:0,
				btntext:'提交订单',
				showCoupon: false,
				showCourse:false,
				submitOrder: false,
				showReviceModal:false,
				IsFormShoppingCart: 2,//是否来自购物车 1是2否
				ShoppingCartIdList: [],
			}
		},
		onLoad(option) {
			if (option.DetailList) {
				this.formdata.DetailList = JSON.parse(decodeURIComponent(option.DetailList));
			}
			if (option.IsFormShoppingCart) {
				this.IsFormShoppingCart = option.IsFormShoppingCart;
			}
			if (option.ShoppingCartIdList) {
				this.ShoppingCartIdList = JSON.parse(option.ShoppingCartIdList);
			}
			this.mc = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			this.pricecolor = this.$uiConfig.pricecolor;
			this.windowWidth = this.$utils.SystemInfo().windowWidth;
			uni.setNavigationBarTitle({
				title: this.pageTitle
			});
			this.payInfo.OpenId=uni.getStorageSync('mall_UserInfo').OpenId;
		},
		onShow() {
			this.init();
			if (this.isLeave) {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		methods:{
			onShareAppMessage() {
			    return {
				   title: this.zrName,
				   path: this.path,
				   imageUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/zhaoren.png'
			    };
			},
			exitPay() {
				this.payExit = false;
				uni.redirectTo({
				  url: "/pages/school/personal/orderList?status=0",
				});
			},
			closePay() {
				this.payBtn = false;
				this.payExit = true;
			},
			submitModel(){
				this.showReviceModal = true;
			},
			// 提交订单
			submitOrderHandler(){
				let that = this;
				if(that.checked==true && that.ds.total_price<=0){
					uni.showToast({
						title: '金额为0不能代付',
						icon: 'none',
					});
				}else{
					console.log('进入')
					if (!this.submitOrder) {
						this.submitOrder = true;
						uni.requestSubscribeMessage({
							tmplIds: this.ds.template_message_list,
							complete(res) {
								console.log(res)
								that.submitOrder = false;
								let form = {};
								form.BuyerMessage = '';//留言
								form.DetailList = that.formdata.DetailList;//课程列表
								form.User_Coupon_Id = that.formdata.User_Coupon_Id;//使用优惠券id
								form.CouponMoney = that.couponPrice;//优惠金额
								form.Use_Education_Id = that.formdata.Use_Education_Id;//使用课程卡id
								form.EducationMoney = that.EducationMoney;//课程卡抵扣金额
								form.Income = that.ds.total_price;//实际付款金额
								form.IsFormShoppingCart = that.IsFormShoppingCart;//来自购物车
								form.Use_Integral = that.formdata.Use_Integral;//使用积分
								form.ShoppingCartIdList = that.ShoppingCartIdList;//购物车id
								form.AnchorName = uni.getStorageSync("AnchorName")?uni.getStorageSync("AnchorName").AnchorName:''; //直播名称
								that.request2(
									{
										url: '/api/AppletOrder/SetAppletCourseOrderInfo',
										data: form
									},
									res => {
										if (res.resultCode == 1) {
											if(that.checked==true){
												that.zhaoren = true;
						
												let u = uni.getStorageSync("mall_UserInfo");
												let uid = u.UserId ? u.UserId : 0;
												let Up = u.UserPageType ? u.UserPageType:0;
												let SmallShopId = u.SmallShopId ? u.SmallShopId  : 0;
												if (SmallShopId == 0) {
												  //如果微店id为0 去找所属微店id
												  SmallShopId = u.UserSmallShopId  ? u.UserSmallShopId : 0;
												}
												//TODO 需要看跳转哪里
												that.path  = '/pages/index/index?OrderId=' + res.data.OrderId + "&user_id=" + uid+ "&Up=" + Up+ "&SmallShopId=" + SmallShopId+'&JumpType=6' ;
											}else{
												if( that.ds.total_price>0){
													that.payBtn = true;
													that.payInfo.OrderId = res.data.OrderId;
													that.payInfo.total_price = that.ds.total_price;
												}else{
													uni.showToast({
														title: '交易成功',
														icon: 'none',
														duration: 2000
													});
													setTimeout(()=>{
														uni.redirectTo({ url: '/pages/school/personal/orderDetail?OrderId='+res.data.OrderId})
													},2000)
												}
												
											}
											
										}
										else{
											that.$refs.uToast.show({
												title: res.data.message,
												type: 'warning'
											});
										}
										uni.hideNavigationBarLoading();
									}
								);
							
							}
						});
					}
				}
			},
			init(){
				this.request2(
					{
						url: '/api/AppletOrder/GetAppletCourseSettlementInfo',
						data: this.formdata
					},
					res => {
						this.loading = false;
						if (res.resultCode == 1) {
							this.mchs = res.data.mch_list;
							this.payInfo.GoodsName = this.mchs[0].goods_list[0].name.slice(0,10);
							this.ds = res.data;
							this.goodPrice = 0.0;
							this.couponPrice = 0.0;
							this.EducationMoney=0.0;
							this.mchs.forEach(x=>{
								x.goods_list.forEach(j=>{
									j.marketingLogo = JSON.parse(j.marketingLogo)
								})
							})
							this.integral = {
								can_use: false,
								use: false,
								use_num: 0,
								deduction_price: 0
							};
							if(res.data.total_price<0){
								this.ds.total_price =0
							}
							
							
							this.formatPrice()
							this.initCoupon();//获取优惠券
							this.schoolCoupon();//获取学习卡
						}
				
						
					}
				);
			},
			formatPrice(){
				this.mchs.forEach(x => {
					this.goodPrice += parseFloat(x.total_goods_price);
					this.couponPrice += parseFloat(x.coupon.coupon_discount || 0.0);
					this.EducationMoney += parseFloat(x.education.education_money || 0.0);
					if (x.integral.can_use) {
						this.integral.can_use = true;
						this.integral.use = false;
						this.integral.use_num += x.integral.use_num;
						this.integral.deduction_price += parseFloat(x.integral.deduction_price);
					}
				});
			},
			initCoupon() {
				let ProductList = [];
				this.DetailList = [];
			
				this.mchs.forEach(item => {
					item.goods_list.forEach(list => {
						let obj = {
							GoodsClassId: list.categoryIdList,
							GoodsPrice: list.total_price,
							ProductId: list.id
						};
						// let obj1 = {
						// 	SpecificationSort: list.goods_attr.sign_id,
						// 	Number: list.num,
						// 	GoodsId: list.id,
						// 	SpecificationList: list.specificationNameList
						// };
						ProductList.push(obj);
						// this.DetailList.push(obj1);
					});
				});
			
				this.request2(
					{
						url: '/api/AppletCoupon/GetNoUseCouponList',
						data: { ProductList: ProductList }
					},
					res => {
						if (res.resultCode == 1) {
							this.couponList = res.data;
						}
					}
				);
			},
			schoolCoupon(){
				let ProductList = [];			
				this.mchs.forEach(item => {
					item.goods_list.forEach(list => {
						let obj = {
							GoodsClassId: list.categoryIdList,
							GoodsPrice: list.total_price,
							ProductId: list.id
						};
						ProductList.push(obj);
						
					});
				});
							
				this.request2(
					{
						url: '/api/AppletEducation/GetNoUseCouponList',
						data: { ProductList: ProductList }
					},
					res => {
						if (res.resultCode == 1) {
							this.courseList = res.data;
						}
					}
				);
			},
			closeCouponHandler(e) {//优惠券返回
				if (e != -1) {
					this.formdata.User_Coupon_Id = e;
					this.formdata.Use_Education_Id=0;
					this.EducationMoney=0.0;
					this.init();
				}
				this.showCoupon = false;
				
				
			},
			closeCourseHandler(e){//选择课程卡的返回
				if (e != -1) {
					this.formdata.Use_Education_Id = e;
					this.userInt=false;
					this.formdata.User_Coupon_Id=0;
					this.formdata.Use_Integral=0;
					this.goodPrice = 0.0;
					this.couponPrice = 0.0;
					// this.EducationMoney=0.0;
					this.init();
				}
				this.showCourse = false;
			},
			showCouponHandler() {
				this.showCoupon = true;
			},
			showCourseHandler(){
				this.showCourse = true;
			},
			changeUseInt(e) {//选择积分
				this.userInt = e.value;
				this.formdata.Use_Integral = this.userInt ? 1 : 0;
				this.formdata.Use_Education_Id=0;
				this.EducationMoney=0.0;
				this.init();
				
				
			},
			checkboxChange(val){
				if(val.value==true){
					this.btntext = '找人代付'
				}else{
					this.btntext = '提交订单'
				}
			},
		}
	}
</script>

<style>
	.coursesubmit{
		width: 100%;
		min-height: 100vh;
		background: #FAF8F9;
		padding-bottom: 40px;
		font-family: 'oswald';
		padding-top:15px ;
	}
	.coursesubmit .paymentype{
		width: 100%;
		padding: 15px;
		background: #FFF;
		
	}
	.coursesubmit .paymentypeitem{
		width: 100%;display: flex;flex-direction: row;align-items: center;justify-content:space-between;font-size: 14px;color: #121212;
	}
	.coursesubmit .discountbox{
		width: 100%;
		background: #FFF;
		padding: 15px;
		margin-top: 15px;
	}
	.coursesubmit .filed {
		display: flex;
		align-items: flex-start;
		
	}
	.coursesubmit .filed .left,
	.coursesubmit .filed .right {
		flex: 1;
		color: #232323;
	}
	.coursesubmit .filed .left {
		width: 120px;
	}
	.coursesubmit .filed .right {
		text-align: right;
		display: flex;
	}
	.coursesubmit .filed .right .icon {
		width: 18px;
		height: 18px;
	}
	.coursesubmit .filed .right .content {
		flex: 1;
		text-align: right;
		margin-right: 5px;
	}
	.coursesubmit .filed .right .price {
		font-size: 16px;
		flex: 1;
		text-align: right;
		font-family: 'oswald';
	}
	.coursesubmit .store-list{
		width: 100%;
		background: #FFF;
		padding: 0 15px  ;
		margin-top: 15px;
	}
	.coursesubmit  .good{
		background: #fff;
		padding: 15px 0;
		display: flex;
		flex-direction: row;
		font-family: aa;
		border-bottom: 1px solid #F5F6F7;
		
	}
	.coursesubmit .good-img{
		width: 125px;
		height: 70px;
		border-radius: 4px;
		box-shadow:0 4px 10px 1px #D2D2D2;
	}
	.coursesubmit .good-r{
		margin-left: 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 3px;
	}
	.coursesubmit .good .good-name {
	  /* height: 37px; */
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	  margin-bottom: 3px;
	  font-size: 14px;
	  color: #1B1D1E;
	  
	}
	.coursesubmit .good-r-b{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		
	}
	.coursesubmit .good-rb-box{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.coursesubmit .good-rb-text{
		font-size: 11px;
		color: #999999;
		margin-top: 3px;
		margin-left: 2px;
	}
	.coursesubmit .btton-box {
		height: 50px;
		display: flex;
		padding: 5px 10px;
		border-top: 1px solid #f5f5f5;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		align-items: center;
		background: #fff;
		z-index: 3;
	}

	.coursesubmit .btton-box .left {
		font-size: 16px;
		flex: 1;
		font-family: 'oswald';
	}
	.coursesubmit .btton-box .left .bold {
		font-size: 24px;
	}
	.coursesubmit .btton-box .right {
		width: 120px;
	}
	.coursesubmit .notOption {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: transparent;
		z-index: 2;
	}
</style>
