<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>
			<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>
			<view class="filed" style="margin-top: 20px;">
				<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>
		</view>
		<view class="discountbox">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return{
				DetailList:[],
				pageTitle: '填写订单',
				formdata:{
					DetailList:[],
					Use_Integral:0,
					User_Coupon_Id:0,
					Use_Education_Id:0,
				},
				mc:'',
				secondary:'',
				pricecolor:'',
				isLeave: false,
				integral: {
					can_use: false,
					use: false,
					use_num: 0,
					deduction_price: 0
				},
				userInt:false,
				mchs:{},
				ds:{},
				checked:false,
				couponList:[],//优惠券的列表
				schoolCPList:[],//学习卡列表
				windowWidth:0,
			}
		},
		onLoad(option) {
			if (option.DetailList) {
				this.formdata.DetailList = JSON.parse(decodeURIComponent(option.DetailList));
			}
			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
			});
		},
		onShow() {
			this.init();
			if (this.isLeave) {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		methods:{
			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.ds = res.data;
							this.integral = {
								can_use: false,
								use: false,
								use_num: 0,
								deduction_price: 0
							};
							
							
							this.formatPrice()
							this.initCoupon();//获取优惠券
							this.schoolCoupon();//获取学习卡
						}
				
						
					}
				);
			},
			formatPrice(){
				this.mchs.forEach(x => {
					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.schoolCPList = res.data;
						}
					}
				);
			},
			changeUseInt(e) {
				this.userInt = e.value;
				this.formdata.Use_Integral = this.userInt ? 1 : 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;
		padding: 0 10px;
	}
	.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: 10px 13px;
		display: flex;
		flex-direction: row;
		font-family: aa;
		
	}
	.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;
	}
</style>
