	<template>
	<div class="cartStyle" v-if="!isloading" :style="{ height: contentHeight }">
		<view
			style="
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 15rpx;
      "
		>
			<Text class="grid-text" v-if='IsEducation!=1'>商品库存有限，请尽快下单哦</Text>
			<Text class="grid-text" v-if='IsEducation==1'>共{{list[0].GoodsList.length?list[0].GoodsList.length:'0'}}个课程</Text>
			<Text @click="edit" v-if="editType == false && list[0].GoodsList.length>0" class="grid-text_r">编辑</Text>
			<Text @click="edit" v-if="editType == true" class="grid-text_r">完成</Text>
		</view>
		<view style="width: 100%; height: 30rpx; background: #f7f7f7; margin: 20rpx 0;"></view>
		<u-empty v-if="emptyshow == true" text="购物车还是空的哦" mode="car"></u-empty>

		<view v-if="list.length > 0" style="height: calc(100vh - 60px-30px-35px-20px);width: calc(100vw);overflow: hidden;padding-top: 10px;">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" :style="{ height: '100%' }">
				<template v-if="list.length > 0 && emptyshow==false">
					<view class="cartList" :style="{ 'margin-bottom': listbottom }" v-for="(c, i) in list" :key="i">
						<view @click.stop="abc()"
							style=" padding: 0 12px 12px 12px; border-bottom: 1rpx solid #f5f5f5; width: 100%;">
							<u-checkbox-group @change="mch_SelectAll(c.checked, i)">
								<u-checkbox v-model="c.checked" shape="circle" :active-color="mc">{{ c.MallName }}</u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="cartList_item" v-for="(item, index) in c.GoodsList" :key="index"  @click="btnclick(item,index,i)" >
							<view @click.stop="abc()" style="width: 40px;text-align: center;" v-if="(item.GoodsStatus == 1 && item.InventoryNum!=0 && IsEducation!=1) || (editType == true&& IsEducation!=1)">
								<u-checkbox-group @change="clickcheckbox(item.checked, item.Price, index, i)">
									<u-checkbox v-model="item.checked" shape="circle" :active-color="mc"></u-checkbox>
								</u-checkbox-group>
							</view>
							<view @click.stop="abc()" style="width: 40px;text-align: center;" v-if="(item.GoodsStatus == 1 && IsEducation==1) || (editType == true && IsEducation==1)">
								<u-checkbox-group @change="clickcheckbox(item.checked, item.Price, index, i)">
									<u-checkbox v-model="item.checked" shape="circle" :active-color="mc"></u-checkbox>
								</u-checkbox-group>
							</view>

							<view class="invalid" :style="{ background: mc }" v-if="item.GoodsStatus != 1 && editType == false">
								<Text style="color: #fff; width: 22px;font-size: 20rpx;">失效</Text>
							</view>
							<view class="invalid" :style="{ background: mc }" v-if="item.InventoryNum == 0 && editType == false && IsEducation!=1">
								<Text style="color: #fff; width: 22px;font-size: 20rpx;">售馨</Text>
							</view>

							<image
								:src="item.CoverImage"
								v-if='IsEducation!=1'
								mode="aspectFill"
								style="width: 150rpx;height: 150rpx;margin-left: 30rpx;border-radius: 5px;"
								@click.native.stop="clickHandler(item.GoodsId)"
							/>
							<image
								:src="item.CoverImage"
								v-if='IsEducation==1'
								mode="aspectFill"
								style="width: 116px;height: 64px;margin-left: 30rpx;border-radius: 5px;box-shadow:0 4px 10px 1px #D2D2D2;"
								@click.native.stop="clickHandler2(item.GoodsId)"
							/>
							
							<view class="item-r" :style="{'width':IsEducation!=1?'440rpx':item_r,'height':IsEducation!=1?'150rpx':'65px', }">
								<view :class="IsEducation!=1?'item-r-n':'item-r-n2'">
									<view v-if="item.MarketingLogo.iswords && item.MarketingLogo.iswords==1&& item.MarketingLogo.words!=''" class="Logo" :style=
									"{color: item.MarketingLogo.wordsColor,background:item.MarketingLogo.wordsBack ,}">
									  {{item.MarketingLogo.words}}
									</view>
									<image
									v-if="item.MarketingLogo.iswords&&item.MarketingLogo.iswords==2&& item.MarketingLogo.ico!=''"
									  mode="heightFix"
									  :src="item.MarketingLogo.ico"
									  style=" height: 12px;margin-right: 5px"
									/>
									{{ item.GoodsName}}
								</view>
								<view style="width: 440rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" v-if="IsEducation!=1"> 
										<Text v-for="(attr, inde2x) in item.SpecificationList" :key="inde2x"
											style="color: #a0a09d;font-size: 20rpx;margin-right: 5rpx;">	
											{{ attr}}
										</Text>
								</view>
								<view style="max-width: 440rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 2px;"
								@click.native.stop="goUrl(item.FreeShippingUrl)"
								v-if="item.FreeShippingName !=null&&IsEducation!=1 && (item.FreeShippingFullMoneyPinkage>0 || item.FreeShippingFullNumPinkage>0)" >
									<view style="color: #FF4048;background: #fdf6ec;padding: 0 5px;display: inline-block;">
										<Text style="font-size: 20rpx;margin-right: 5rpx;">
											{{item.FreeShippingName !=null ?item.FreeShippingName+':':''}}
											<text v-if="item.FreeShippingFullMoneyPinkage==0 && item.FreeShippingFullNumPinkage>0">{{item.FreeShippingFullNumPinkage}}件包邮</text>
											<text  v-if="item.FreeShippingFullMoneyPinkage>0 && item.FreeShippingFullNumPinkage==0">满{{item.FreeShippingFullMoneyPinkage}}元包邮</text>
										</Text>		
									</view>
								</view>
								<view @click.stop="abc()" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;" >
									<Text style="font-size: 30rpx;" :style="{ color: pricecolor }">
										￥<Text style="40rpx">{{ item.Price }}</Text>
									</Text>
									<u-number-box v-if='IsEducation!=1'
										v-model="item.Number"
										:min="1"
										:max="item.InventoryNum"
										@change="valChange(i, index, item.Number, item.Price, $event)"
									></u-number-box>
								</view>
								<Text v-if="item.GoodsStatus != 1 && editType == false&&IsEducation!=1" style="font-size: 20rpx;color:#a0a09d ;">失效原因：商品下架或者库存不足</Text>
								<Text v-if="item.GoodsStatus != 1 && editType == false&&IsEducation==1" style="font-size: 20rpx;color:#a0a09d ;">失效原因：课程下架</Text>
							</view> 
						</view>
						
					</view>
				</template>
			</scroll-view>
		</view>
		

		<view class="box_bottom" :style="{'margin-bottom':bottommargin}">
			<div style="margin-left: 30rpx;">
				<u-checkbox-group @change="SelectAll">
					<u-checkbox v-model="allchecked" shape="circle" :active-color="mc">全选</u-checkbox>
				</u-checkbox-group>
				<Text style="font-size: 30rpx;" :style="{ color: pricecolor }" v-if="editType == false">￥{{ TotalPrice }}</Text>
			</div>
			<div class="bottom_btn" v-if="!editType">
				<u-button
					size="80"
					:ripple="true"
					shape="circle"
					@click="settlement"
					:custom-style="{
						backgroundColor: mc,
						height: '80rpx',
						color: '#FFF',
						fontSize: '14px'
					}"
				>
					去结算({{ checkCount }})
				</u-button>
			</div>
			<u-button
				v-if="editType"
				size="80"
				:ripple="true"
				shape="circle"
				@click="delete_btn"
				:custom-style="{
					backgroundColor: mc,
					height: '80rpx',
					color: '#FFF',
					fontSize: '14px',
					marginRight: '12px'
				}"
			>
				删除
			</u-button>
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<tabbars></tabbars>
		
	</div>
</template>
<script>
import tabbars from '@/components/tabbar/index';
import auth from "@/components/auth/index.vue";

export default {
	data() {
		return {
			isloading: false,
			pageTitle: '购物车',
			navHeight: 0,
			contentHeight: 0,
			cstyle: {},
			emptyshow:false,
			allchecked: false,
			TotalPrice: 0, //总价格
			bottommargin: 0,
			listbottom: 0,
			editType: false,
			list: [],

			cart_id_list: [],
			mc: '',
			pricecolor:'',
			secondary: '',
			checkCount: 0,
			msg: {
				pageIndex: 1,
				pageSize: 50,
				Name: ''
			},
			u:{},
			showAuth:false,
			IsEducation:0,//1是0否是网课模式
			item_r:0,//课程模式下的宽度
		};
	},
	created() {},
	components: {
		tabbars,
		auth
	},
	onLoad() {
		this.navHeight = this.$navHeight - 2;
		this.mc = this.$uiConfig.mainColor;
		this.secondary = this.$uiConfig.secondary;
		this.pricecolor = this.$uiConfig.pricecolor;
		this.cstyle = uni.getStorageSync('basedata') ? uni.getStorageSync('basedata').cat_style : [];
		this.IsEducation = uni.getStorageSync('basedata')
	? (uni.getStorageSync('basedata').mall.setting.mallStyle.IsEducation?uni.getStorageSync('basedata').mall.setting.mallStyle.IsEducation:0) 
	:0;
		let windowWidth = this.$utils.SystemInfo().windowWidth;
		this.item_r = (windowWidth - 5-40-116-15-10)+'px'
		if (this.cstyle.cat_style == '4') {
		}
	},
	onShow(){
		this.u = uni.getStorageSync('mall_UserInfo');
		if (!this.u) {
			this.u = {
				nickName: '未登录',
				avatarUrl: ''
			};
			this.showAuth = true;
		}else{
			this.init();
			this.TotalPrice=0;
			this.checkCount=0;
			
		}
	},
	mounted() {
		let currentPages = getCurrentPages();
		let c = this.$uiConfig.is_bang ? 80 : 52;
		this.bottommargin = c - 2 + 'px';
		this.listbottom = c + 44 + 'px';
		this.contentHeight = this.$utils.calcContentHeight(c - 42) + 'px';
		let u = '/' + currentPages[currentPages.length - 1].route;
		let pages = wx.getStorageSync('basedata') ? wx.getStorageSync('basedata').bar_title : [];
		pages.forEach(x => {
			if (x.value == u) {
				this.pageTitle = x.new_name ? x.new_name : x.name;
			}
		});
		uni.setNavigationBarTitle({
			title: this.pageTitle
		});
		
		
	},
	methods: {
		reloadUserinfo() {
			this.u = uni.getStorageSync('mall_UserInfo');
			this.showAuth = false;
			this.init()
		},
		//关闭登录窗口
		gbAuth(){
			this.showAuth=false;
		},
		goHome() {
			uni.redirectTo({
				url: '/pages/index/main'
			});
		},
		init() {
			uni.showNavigationBarLoading();
			this.isloading=true;
			if(this.IsEducation==1){
				this.msg.GoodsClassify=2
			}
			this.request2(
				{
					url: '/api/AppletOrder/GetGoodsShoppingCartPageList',
					data: this.msg
				},
				res => {
					this.loading = false;
					if (res.resultCode == 1) {
						uni.hideNavigationBarLoading();
						this.isloading = false;
						if (res.data.pageData.length > 0) {
							let list = res.data.pageData;
							let empty = true
							list.forEach(x => {
								x.checked = false;
								x.GoodsList.forEach(j => {
									
									j.MarketingLogo = JSON.parse(j.MarketingLogo)
									j.checked = false;
									j.id=j.Id;
								});
								if(x.GoodsList.length>0){
									empty=false
								}
							});
							this.emptyshow = empty
							this.list = list;
							
						} else {
							this.list = [];
						}
					}

					uni.hideNavigationBarLoading();
				}
			);
			
		},
		btnclick(item,index,i){//点击最外层做的事
			if((item.GoodsStatus == 1 && item.InventoryNum!=0 && this.IsEducation!=1) || (this.editType == true&& this.IsEducation!=1)){
				this.list[i].GoodsList[index].checked= !this.list[i].GoodsList[index].checked
				this.clickcheckbox(item.checked, item.Price, index, i)
			}else if((item.GoodsStatus == 1 && this.IsEducation==1) || (this.editType == true && this.IsEducation==1)){
				this.list[i].GoodsList[index].checked= !this.list[i].GoodsList[index].checked
				this.clickcheckbox(item.checked, item.Price, index, i)
			}
		},

		clickcheckbox(checked, price, index, i) {
			// (item.checked, item.Price, index, i)
			if (checked == true) {
				this.checkCount += 1;
				this.TotalPrice += parseFloat((price * this.list[i].GoodsList[index].Number).toFixed(2));
				let goods_list_all = true; //判断该商场是否全选
				this.list[i].GoodsList.forEach(x => {
					if (this.editType == true) {
						//编辑的时候不判断
						// if (x.checked == false && x.new_status == 0) {
						// 	goods_list_all = false;
						// }
						if (x.checked == false) {
							goods_list_all = false;
						}
					} else {
						if (x.checked == false) {
							goods_list_all = false;
						}
					}
				});
				if (goods_list_all == true) {
					this.list[i].checked = true;
				}
				let list_all = true; //判断所有商场是否全选
				this.list.forEach(x => {
					if (x.checked == false) {
						list_all = false;
					}
				});
				if (list_all == true) {
					this.allchecked = true;
				}
				if (this.editType == true) {
					let obj = {
						mch_id: 0,
						id: this.list[i].GoodsList[index].id
					};
					this.cart_id_list.push(obj);
				}
			} else {
				this.TotalPrice -= parseFloat((price * this.list[i].GoodsList[index].Number).toFixed(2));
				this.checkCount -= 1;
				this.allchecked = false;
				let goods_list_all = true; //判断该商场是否全选
				this.list[i].GoodsList.forEach(x => {
					if (x.checked == false) {
						goods_list_all = false;
					}
				});
				if (goods_list_all == false) {
					this.list[i].checked = false;
				}
				if (this.editType == true) {
					this.cart_id_list.forEach((x, j) => {
						if (x.id == this.list[i].GoodsList[index].id) {
							this.cart_id_list.splice(j, 1);
						}
					});
				}
			}
			this.TotalPrice = parseFloat(this.TotalPrice.toFixed(2));
		},
		mch_SelectAll(checked, i) {
			console.log(checked,'checked')
			if (checked == true) {
				let add_cartlist = [];
				let new_statusnum = 0;
				
				this.list[i].GoodsList.forEach(x => {
					
					if (x.GoodsStatus == 1 && x.InventoryNum>0) {
						if (x.checked == false) {
							this.TotalPrice += parseFloat((x.Price * x.Number).toFixed(2));
							x.checked = true;
							new_statusnum++;
						}
					}

					//编辑时候的商城全选
					if (this.editType == true) {
						if (this.cart_id_list.length > 0) {
							this.cart_id_list.forEach(z => {
								if (x.id != z.id) {
									let obj = {
										mch_id: 0,
										id: x.id
									};
									add_cartlist.push(obj);
								}
							});
						} else {
							let obj = {
								mch_id: 0,
								id: x.id
							};
							add_cartlist.push(obj);
						}
					}
				});
				this.cart_id_list = this.cart_id_list.concat(add_cartlist);
				let list_all = true; //判断所有商场是否全选
				this.list.forEach(x => {
					if (x.checked == false) {
						list_all = false;
					}
				});
				if (list_all == true) {
					this.allchecked = true;
				}
				this.checkCount += new_statusnum;
			} else {
				let new_statusnum = 0;
				this.list[i].GoodsList.forEach(x => {
					if (x.GoodsStatus == 1) {
						if(x.checked == true){
							this.TotalPrice -= parseFloat((x.Price * x.Number).toFixed(2));
							new_statusnum++;
							x.checked = false;
						}
					}
					//编辑时候的商城全选
					this.cart_id_list.forEach((z, m) => {
						if (x.id == z.id) {
							this.cart_id_list.splice(m, 1);
						}
					});
				});
				this.allchecked = false;
				this.checkCount -= new_statusnum;
			}
			this.TotalPrice = parseFloat(this.TotalPrice.toFixed(2));
		},
		SelectAll() {
			let list = this.list;
			if (this.allchecked == true) {
				this.checkCount = 0;
				this.TotalPrice = 0;
				this.cart_id_list = [];
				list.forEach(x => {
					x.checked = true;
					x.GoodsList.forEach(j => {
						if (j.GoodsStatus == 1&& j.InventoryNum>0) {
							j.checked = true;
							this.checkCount++;
							this.TotalPrice += parseFloat((j.Price * j.Number).toFixed(2));
						}

						//编辑的时候
						if (this.editType == true) {
							this.cart_id_list.push({
								mch_id: 0,
								id: j.id
							});
						}
					});
				});
			} else {
				this.checkCount = 0;
				this.TotalPrice = 0;
				this.cart_id_list = [];
				list.forEach(x => {
					x.checked = false;
					x.GoodsList.forEach(j => {
						j.checked = false;
					});
				});
			}
			this.TotalPrice = parseFloat(this.TotalPrice.toFixed(2));
		},
		valChange(i, index, Number, p, e) {
			// (i, index, item.Number, item.Price, $event)
			let value = parseFloat(e.value);
			let price = parseFloat(p);
			if (Number > value) {
				this.list[i].GoodsList[index].Number = value;
				if (this.list[i].GoodsList[index].checked == true) {
					this.TotalPrice -= parseFloat((price * (Number - value)).toFixed(2));
				}
			} else if (value > Number) {
				this.list[i].GoodsList[index].Number = value;
				if (this.list[i].GoodsList[index].checked == true) {
					this.TotalPrice += parseFloat((price * (value - Number)).toFixed(2));
				}
			}
			this.TotalPrice = parseFloat(this.TotalPrice.toFixed(2));
		},

		edit() {
			this.editType = !this.editType;
			this.allchecked = false;
			this.TotalPrice = 0;
			this.checkCount = 0;
			this.cart_id_list = [];
			let list = this.list;
			list.forEach(x => {
				x.checked = false;
				x.GoodsList.forEach(j => {
					j.checked = false;
				});
			});
		},
		delete_btn() {
			if (this.cart_id_list.length > 0) {
				uni.showNavigationBarLoading();
				let arr=[];
				this.cart_id_list.forEach(item=>{
					arr.push(item.id);
				})
				this.request2(
					{
						url: '/api/AppletOrder/DelGoodsShoppingCartInfo',
						data: {ShoppingCartIdList:arr}
					},
					res => {
						if(res.resultCode==1){
							this.init();
							this.TotalPrice = 0;
							this.editType = false;
							this.allchecked = false;
							this.checkCount = 0;
						}
						
						uni.hideNavigationBarLoading();
					}
				);

				
			} else {
				uni.showToast({
					title: '请选择需要删除的商品',
					position: 'bottom',
					icon: 'none',
					duration: 2000
				});
			}
		},
		settlement() {
			let ShoppingCartIdList=[];
			if (this.checkCount > 0) {
				let forms = {};
				this.list.forEach(y => {
					let good = {
						// MallId: y.MallId,
						DetailList: [],
						Use_Integral: 0,
						User_Coupon_Id: 0,
						DeliveryMethod:0,
						AddressId:0,
					};
					y.GoodsList.forEach(x => {
						if (x.checked) {
							console.log("x",x)
							ShoppingCartIdList.push(x.Id)
							let g = {
								GoodsId: x.GoodsId,
								Number: x.Number,
								SpecificationSort: x.SpecificationSort,
								
							};
							good.DetailList.push(g);
						}
					});
					
					forms=good;
					console.log("forms",forms)
				});
				if(this.IsEducation!=1){
					uni.navigateTo({
						url: '/pages/order-submit/order-submit?formData=' + encodeURIComponent(JSON.stringify(forms))+'&IsFormShoppingCart=1&ShoppingCartIdList='+JSON.stringify(ShoppingCartIdList)
					});
				}else if(this.IsEducation==1){
					uni.navigateTo({
						url: '/pages/school/course-submit?DetailList=' + encodeURIComponent(JSON.stringify(forms.DetailList))+'&IsFormShoppingCart=1&ShoppingCartIdList='+JSON.stringify(ShoppingCartIdList)
					});
				}
				
			} else {
				uni.showToast({
					title: '请选择购买商品',
					position: 'bottom',
					icon: 'none',
					duration: 2000
				});
			}
		},
		clickHandler(id) {
			uni.navigateTo({
				url: '/pages/goods/goods?id=' + id
			});
		},
		clickHandler2(id){//购物车跳到课程详情
			uni.navigateTo({ url: "/pages/school/courseInfo?GoodsId=" + id });
		},
		goUrl(url) {
			console.log(url)
				uni.navigateTo({
					url: url
				});
		},
		abc(){//阻止change的事件冒泡
			
		},
		
	}
};
</script>

<style>
.cartStyle {
	height: 100%;
	position: relative;
	font-family: 'oswald';
}

.cartStyle .u-checkbox__label {
	margin-left: 12px;
}

.cartStyle .grid-text {
	font-size: 24rpx;
	margin-top: 4rpx;
	color: #939393;
}

.cartStyle .grid-text_r {
	margin-top: 4rpx;
	margin-right: 10rpx;
}

.cartStyle .cartList {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: hidden;
}

.cartStyle .cartList .cartList_item {
	width: 100%;
	padding: 30rpx 30rpx 30rpx 10rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: 1rpx solid #f5f5f5;
}

.cartList .cartList_item .item_input {
	width: 200rpx;
	height: 60rpx;
	background: #f7f7f7;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.cartList .item_input .item_input_l,
.item_input_r {
	width: 50rpx;
	height: 60rpx;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cartStyle .item_input .item_input_c {
	text-align: center;
	width: 50rpx;
	height: 60rpx;
	font-size: 20rpx;
}

.cartStyle .box_bottom {
	width: 100%;
	height: 50px;
	position: fixed;
	background: #fff;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-top: 1rpx solid #f5f5f5;
	z-index: 999;
}

.cartStyle .bottom_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 250rpx;
	height: 50px;
}

.cartStyle .Deletestyle {
	margin-right: 40rpx;
}
.cartStyle .invalid {
	text-align: center;
	width: 40px;
	height: 20px;
	line-height: 18px;
	border-radius: 10px;
}
.cartStyle .Logo{
	padding: 1px 5px;
	display: inline-block;
	font-size: 22rpx;
	margin-right: 5rpx;
	border-radius: 4px;
}
.cartStyle .item-r{
	display: flex;flex-direction: column;justify-content: space-between;width: 440rpx;height: 150rpx;margin-left: 20rpx;
}
.cartStyle .item-r-n{
	font-size: 26rpx;width: 440rpx;
	overflow: hidden; white-space: nowrap;text-overflow: ellipsis;
	
}
.cartStyle .item-r-n2{
	font-size: 26rpx;width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
</style>
