<template>
	<view>
		<uni-nav-bar  :statusBar="true" left-icon="left"   title="Shipping Cart" color="#000000"   :fixed="true" @clickLeft="back">
			<block slot="right">
				<view class="nav_right">
					<image src="../../static/img/delete1.png" mode="" @click="deleteCart"></image>
				</view>
			</block>
		</uni-nav-bar>
		<view class="empty" v-if="goods_list.length==0">
			<image src="/static/img/cart3.png" mode=""></image>
			<text>Your cart is empty</text>
			<button>Shop Now</button>
		</view>
		<template v-else>
			<view class="cart_info">
				<image src="/static/img/Shipped.png" mode=""></image>
				<view class="cart_title_content">Buy US$32.00 more to enjoy FREE STANDARD SHIPPING!</view>
				<view class="cart_title_right">Add</view>
			</view>
			<view class="cart">
				<view class="cart_content">
					<view class="good_info" v-for="(item,index) in goods_list" :key="item.rec_id">
						<image src="../../static/img/select1.png" mode="" class="cart_select" v-show="item.is_check==1" @click="cartCheck(1,0,item.rec_id,index)"></image>
						<image src="../../static/img/select2.png" mode="" class="cart_select" v-show="item.is_check==0" @click="cartCheck(1,1,item.rec_id,index)"></image>
						<view class="good_info_left ">
							<view class="good_info_image">
								<image :src="item.goods_thumb" mode=""></image>
							</view>
							<view class="left_info">
								<view class="info_name">{{item.goods_name}}</view>
								<view class="left_info_bottom">
									<view class="info_lable">
										<text>{{item.goods_attr}}</text>
										<image src="/static/img/bottom.png" mode=""></image>
									</view>
								</view>
								<view class="info_price">
									<text>US${{item.goods_price}}</text>
									<uni-number-box background="#FFFFFF"  :min="1" :value="item.goods_number" @change="updateCart($event,item.rec_id)"></uni-number-box>
			
								</view>
							</view>
						</view>
					</view>
						
				</view>
			</view>
			
			<view class="cart">
				<view class="cart_content">
					<view class="good_info" v-for="(item,index) in 3 " :key="index">
						<image src="../../static/img/select.png" mode="" class="cart_select"></image>
						<view class="good_info_left ">
							<view class="good_info_image">
								<view class="good_info_image_tips">sold out</view>
							</view>
							
							<view class="left_info left_info1">
								<view class="info_name">Adidas Yeezy Boost 350 V2  DazzlingBlue Black GY7164 Men's</view>
								<view class="left_info_bottom">
									<view class="info_lable">
										<text>Multicolor;41</text>
										<image src="/static/img/bottom.png" mode=""></image>
									</view>
									<text>x1</text>
								</view>
								<view class="info_price">
									<text>US$314.00</text>
									<image src="../../static/img/delete2.png" mode="" class="delete"></image>
								</view>
							</view>
						</view>
					</view>
						
				</view>
			</view>
		</template>
		
		
		<view class="recommend">
			<view class="recommend_title">RECOMMEND</view>
			<view class="recommend_content">
				<view class="recommend_content_item" v-for="(item,index) in catList " :key="index" @click="goDetails(item.id)">
					<view class="recommend_content_item_image">
						<image :src="item.thumb" mode=""></image>
					</view>
					<view class="recommend_content_item_image_name">{{item.short_name}}</view>
					<view class="recommend_content_item_pric">US${{item.is_promote==0? item.shop_price :item.promote_price}}</view>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="footer_left">
				<image src="../../static/img/select1.png" mode=""  v-if="all_allno==1 && goods_list.length>0" @click="cartCheck(0,0)"></image>
				<image src="../../static/img/select2.png" mode=""  v-else @click="cartCheck(0,1)"></image>
				<text>All</text>
			</view>
			<view class="footer_right">
				<text>US${{total.goods_price}}</text>
				<button @click="cartCheckOut">CHECKOUT({{total.goods_count}})</button>
			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="Close" confirmText="Delete" title="Tips" content="Whether to delete goods?" 
			@confirm="dialogConfirm" ></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {defaultRequest2,defaultRequest4} from '../../api/index.js'
	export default {
		data() {
			return {
				isEmpty:false,
				// 购物车数据
				total:{},
				// 商品数据
				goods_list:[],
				// 全选标识。1-全部选中，2-全部未选，3-部分选中。
				all_allno:2,
				deleteQuery:{
					_action:'removecart'
				},
				// 获取该分类的其他商品的请求参数
				catQuery:{
					_action:'getgoods',
					page_index:1,
					page_size:10
				},
				catList:[],
				isReachBottom:true,
			}
		},
		methods:{
			goDetails(id){
				uni.navigateTo({
					url:'/pages/productDetails/index?goods_id='+id
				})
			},
			// 获取的其他商品
			getCatList(type){
				defaultRequest4(this.catQuery).then(res=>{
					console.info(res)
					if(res.error==0){
						if(res.data){
							if(type==0){
								this.catList=res.data
							}else{
								this.catList=this.catList.concat(res.data)
							}
						}else{
							this.isReachBottom=false
							uni.showToast({
								title: 'No more data yet',
								icon:'none'
							})
							this.catQuery.page_index--
						}
					}
					uni.hideNavigationBarLoading();
				})
			},
			// 修改商品数量
			updateCart(e,id){
				let data={_action:'updatecart',rec_id:id,goods_number:e}
				defaultRequest4(data).then(res=>{
					console.info(res)
					if(res.error==0){
						this.getList()
					}
				})
			},
			// 提交订单
			cartCheckOut(){
				if(this.goods_list.length==0) return
				if(this.all_allno==2){
					uni.showToast({
						icon:'none',
						title:'Please select the product'
					})
					return
				}
				let data={_action:'cartcheckout',is_new:1,direct_shopping:0,consignee:''}
				uni.navigateTo({
					url:'../order/confirmation?query='+JSON.stringify(data)
				})
				
			},
			// 删除商品
			deleteCart(){
				if(this.goods_list.length==0) return
				if(this.all_allno==2){
					uni.showToast({
						icon:'none',
						title:'Please select the product to delete'
					})
					return
				}else if(this.all_allno==3){
					let selectNum=0,
					rec_id=''
					this.goods_list.map(item=>{
						if(item.is_check==1){
							rec_id=item.rec_id
							selectNum++
						}
					})
					if(selectNum>1){
						uni.showToast({
							icon:'none',
							title:'Only one or all items can be deleted'
						})
						return
					}else{
						this.deleteQuery.rec_id=rec_id
					}
				}else{
					// this.deleteQuery._action='clearcart'
				}
				this.$refs.alertDialog.open()
				
			},
			dialogConfirm(){
				defaultRequest2(this.deleteQuery).then(res=>{
					console.info(res)
					if(res.error==0){
						uni.showToast({
							icon:'none',
							title:'Successfully deleted!'
						})
						this.getList()
					}
				})
			},
			// 购物车-商品勾选-单个记录 type: 1为单选 、0为全选
			cartCheck(type,is_check,id,index){
				if(this.goods_list.length==0) return
				let data={}
				if(type==1){
					data={_action:'cartcheck',rec_id:id,is_check:is_check}
				}else{
					data={_action:'cartcheckall',is_check:is_check}
				}
				defaultRequest4(data).then(res=>{
					console.info(res)
					if(res.error==0){
						this.getList()
						
						// Object.assign(this.total,res.data)
						// this.total.goods_price=res.data.price
						// this.all_allno=res.data.all_allno
						// if(type==1){
						// 	if(is_check==0){
						// 		this.goods_list[index].is_check=0
						// 	}else{
						// 		this.goods_list[index].is_check=1
						// 	}
							
						// }else{
						// 	this.goods_list.map(item=>{
						// 		if(is_check==0){
						// 			item.is_check=0
						// 		}else{
						// 			item.is_check=1
						// 		}
								
						// 	})
						// }
						
					}
				})
			},
			getList(){
				let data={_action:'getcartgoods'}
				defaultRequest4(data).then(res=>{
					console.info(res)
					if(res.error==0){
						this.total=res.data.total
						this.all_allno=res.data.all_allno
						if(res.data.goods_list){
							res.data.goods_list.map(item=>{
								item.goods_attr=item.goods_attr.replace(/\s\n/g,';');
							})
							this.goods_list=res.data.goods_list
						}else{
							this.goods_list=[]
						}
						
						
					}
				})
			},
			back(){
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},
		onShow() {
			uni.hideTabBar()
			this.getList()
			this.getCatList(0)
		},
		onHide(){
			uni.showTabBar()
		},
		// 上拉加载
		onReachBottom(){
			if(!this.isReachBottom)return
			this.catQuery.page_index++
			this.getCatList(1)
		},
		onPullDownRefresh(){
			 uni.stopPullDownRefresh()
		}
		
	}
</script>
<style>
	page{
		background-color: #F6F5FA;
		padding-bottom: 150rpx;
	}
</style>
<style lang="scss" scoped>
	.uni-navbar{
		font-size: 32rpx;
		font-weight: bold;
	}
	.uni-numbox{
		border: 1px solid #999999;
		border-radius: 14rpx;
		height: 42.67rpx;
		
		/deep/ .uni-numbox__minus{
			border-radius: 14rpx;
		}
		/deep/.uni-numbox__plus{
			border-radius: 14rpx;
		}
		/deep/.uni-numbox__value{
			border-left: 1px solid #999999;
			border-right: 1px solid #999999;
			height: 100%;
			width: 63.33rpx;
			font-size: 21.33rpx;
		}
	}
	.nav_right{
		image{
			width: 36rpx;
			height: 36rpx;
		}
	}
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 136rpx;
		font-size: 30.67rpx;
		font-weight: 400;
		image{
			width: 125.33rpx;
			height: 125.33rpx;
			margin-bottom: 49.33rpx;
		}
		button{
			font-size: 29.33rpx;
			font-weight: 500;
			background-color: black;
			color: white;
			height: 45.67rpx;
			line-height: 45.67rpx;
			border-radius: 0;
			margin-top: 33.33rpx;
		}
	}
	.recommend{
		margin-top: 124rpx;
	}
	.cart_info{
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 36.67rpx 32rpx;
		font-size: 24rpx;
		font-weight: 400;
		
		image{
			width: 41.33rpx;
			height: 41.33rpx;
		}
		.cart_title_content{
			width: 510.67rpx;
		}
		.cart_title_right{
			font-size: 26rpx;
			font-weight: bold;
		}
	}
	.cart{
		background-color: white;
		margin: 0 18rpx;
		padding: 42rpx 12.67rpx;
		margin-top: 16.67rpx;
		
		.cart_title{
			padding-left: 12.67rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			margin-bottom: 76rpx;
		}
		.cart_content{
			
			.good_info{
				display: flex;
				align-items: center;
				color: #000000;
				justify-content: space-between;
				border-bottom: none;
				padding: 0;
				margin-bottom: 78.67rpx;
				
				&:last-child{
					margin-bottom: 0;
				}
				.good_info_image{
					position: relative;
					image{
						width: 100%;
						height: 100%;
					}
					.good_info_image_tips{
						width: 117.33rpx;
						height: 117.33rpx;
						border-radius: 50%;
						background: rgba(0, 0, 0, 0.3);
						color: white;
						font-size: 22rpx;
						font-weight: 800;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 99;
						position: absolute;
						top: 50%;
						margin-top: -60rpx;
						left: 50%;
						margin-left: -60rpx;
					}
				}
				.left_info1{
					color: #C4C4C4;
					
					.left_info_bottom{
						color: #C4C4C4;
						
						.info_lable{
							border: 1px solid #C4C4C4;
						}
					}
					.info_price{
						color: #C4C4C4;
					}
				}
				.cart_select{
					width: 34.67rpx;
					height: 34.67rpx;
				}
				.info_name{
					width: 406.67rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;				//溢出内容隐藏
					text-overflow: ellipsis;		//文本溢出部分用省略号表示
					display: -webkit-box;			//特别显示模式
					-webkit-line-clamp: 2;			//行数
					line-clamp: 2;					
					-webkit-box-orient: vertical;
				}
				.delete{
					width: 36rpx;
					height: 36rpx;
				}
			}
			
			
		}
	}
	.footer{
		padding: 42rpx 0;
		padding-left: 27.33rpx;
		padding-right: 19.33rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		border-top: 2px solid #F6F5FA;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 36rpx;
		.footer_left{
			font-weight: 400;
			display: flex;
			align-items: center;
			
			image{
				width: 34.67rpx;
				height: 34.67rpx;
				margin-right: 10rpx;
			}
		}
		.footer_right{
			display: flex;
			align-items: center;
			font-weight: 600;
			
			button{
				height: 73.33rpx;
				line-height: 73.33rpx;
				background-color: #191919;
				margin: 0;
				font-size: 26.67rpx;
				font-weight: bold;
				color: white;
				margin-left: 23.33rpx;
				border-radius: 0;
			}
		}
	}
</style>