<template>
	<view class="cart-container backcor9">
		<scroll-view :scroll-y="true" class="cart-list">
			
			<uni-swipe-action>
				
				<!-- 从这里开始遍历-->
			    <view   v-for="(item,index) in cartList" :class="(item.isFailure?' isFailure ':' ')+'marb10 border-8r backcolorfff paading10'" :key="item.id">
					
					<!-- :disabled="item.isFailure" -->
			        <uni-swipe-action-item  :auto-close="autoClose"  :right-options="swipe_options"  @click="swipe_opt_event" @change="swipe_change($event, item.id)">
			        	
						<view class="cart-container2">
							<checkbox-group @change="checkClick(item)">
							<checkbox class="mycheck" :disabled="!isEdit&&item.isFailure" color="#FFC71E" :value="item.id" :checked="item.checked" />
							</checkbox-group>
							<view class="cart-detail">
								<view class="cart-img">
									<image :src="item.img"  class="img border-8r" mode="aspectFill"></image>
								</view>
								<view class="cart-msg">
									<view class="">
										<view class="cart-msg-title font16 marb10 mart5">{{item.name}}</view>
										<view class="cart-msg-parm font13 marb10 fcor777">珍珠米5斤</view>
									</view>
									
									<view class="cart-msg-price">
										<view class="cart-price font16 fcorred">
											<!-- ¥ <text class="font20">18 </text>.8 -->
											 ¥{{item.price}}
										</view>
										<view class="cart-num">
											<!-- @blur="blur" @focus="focus" -->
											<uni-number-box v-model="item.num" :min="1"  @noMoreLess="noMoreLess" @change="changeNumValue" />
										</view>
									</view>
									
									
								</view>
							</view>
						</view>									
					</uni-swipe-action-item>
					
			    </view>
				
				<noMore></noMore>
				
			</uni-swipe-action>
			
		</scroll-view>
		<view class="cart-tool bg-white">
			<view class="select-all">
				<checkbox-group @change="checkAllClick" >
					<label >
						<!-- :disabled="cartList.length == 0" -->
						<checkbox  class="mycheck"   color="#FFC71E" :value="allCheck.value"  :checked="allCheck.checked" />
								<text class="paddleft5 font16 fcor777">全选</text>
					</label>
					<!--  -->
				</checkbox-group>
				<text v-if="!isEdit" class="paddleft5 fcorred" @click="editDelete" >编辑</text>
				<text v-if="isEdit" class="icon-ymt delete paddleft5 fcorred"  @click="deleteCart"></text>
				
			</view>
			<text v-if="isEdit" class="tool-right paddleft5 fcorred"  @click="editDelete">退出编辑</text>
			<view v-if="!isEdit" class="tool-right">
				<view class="tool-jiesuan marRight10 ">
					合计:<text class="fcorred">¥{{priceAll}}</text> 
				</view>
				<view class="jiesuan-btn fcorfff "  @click="settleAccount">
					结算
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	// import cartList from '@/pages/classify/cart-list/cart-list.vue'
	import noMore from '@/pages/classify/no-more/no-more.vue'
	import uniNumberBox from '@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue'
	export default {
		data(){
			return{
				cartList:[],
				
				
				checkList:[],
				allCheck:{
					name:'全选',
					checked:false,
					value:'all'
				},
				
				// 
				swipe_options:[
				    {
						isCheck:false,
				        text: "收藏",
						icon:' shoucang32 ',
				        style: {
				            backgroundColor: '#f6c133'
				        }
				    },{
				        text: '删除',
						icon:' delete ',
				        style: {
				            backgroundColor: '#E64340'
				        }
				    }
				],
				swipe_item_index: null,
				numberValue:0,
				cartList:[],
				autoClose:false,
				// listSelect:[],
				
				isEdit:false,
				showAction:'none'
				
			}
		},
		components:{
			// cartList,
			noMore,
			"uni-number-box":uniNumberBox
		},
		computed:{
			priceAll(){
				//总计金额
				var str = 0;
				for (var i = 0; i < this.cartList.length; i++) {
					if (this.cartList[i].checked) {
						str += this.cartList[i].num * this.cartList[i].price;
					}
				}
				return str;	
			}
		},
		onLoad(){
			this.cartList=[
				{id:111,name:"小香风",isFailure:true,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:20,num:1},
				{id:222,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:30,num:1},
				{id:333,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:20,num:1},
				{id:444,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:30,num:1},
			]
			this.cartList.map(item=>{
				this.$set(item, 'checked', false);
			})
			
		},
		methods:{
			editDelete(){
				this.isEdit = !this.isEdit;
				if(!this.isEdit){//退出编辑
					this.cartList.map(item=>{			
						if(item.checked&&item.isFailure){
							item.checked = false;
						}			
					})	
				}else{//进入编辑
					if(this.allCheck.checked){
						this.cartList.map(item=>{
								item.checked = true;		
						})
					}
				}
				
				
			},
			// 全选的点击事件
			checkAllClick(e) {
				 this.allCheck.checked = !this.allCheck.checked;
					if (this.allCheck.checked) {
						this.cartList.map(item => {						
							if(!this.isEdit){//商品的全选事件
								if(!item.isFailure){
									item.checked = true
								}
							}else{//编辑的全选事件
								item.checked = true
							}
	
						})
					} else {
						this.cartList.map(item => {
							item.checked = false
						})
					}	 
			},
			
			// 单个商品的选择
			checkClick(item) {
				item.checked = !item.checked
		
				if (!item.checked) {
					if(!this.isEdit&&!item.isFailure){//商品
						this.allCheck.checked = false	
					}else if(this.isEdit){
						this.allCheck.checked = false	
					}
						
				} else {
					// 判断每一个商品是否是被选择的状态
					const goods = this.cartList.every(item => {
						if(!this.isEdit){//商品
							if(item.isFailure){
								return true;
							}
						}
						
	
						return item.checked === true
					})
					if (goods) {
						this.allCheck.checked = true
					} else {
						this.allCheck.checked = false
					}
				}
			},
			
			// 判断购物车内是否有商品
			isHaveGoods(){
				if(this.cartList.length == 0){
					uni.showToast({
						title: '购物车内暂无商品喔',
						duration: 1000,
						icon:'none'
					});
					
					return false
				}
				return true;
			},
			
			// 购物车删除
			deleteCart() {
				if(!this.isHaveGoods()) return;
				var select = [];
				for (var i = 0; i < this.cartList.length; i++) {
					if (this.cartList[i].checked) {
						select.push(this.cartList[i].id)
					}
				}
				if(select.length == 0){
					uni.showToast({
						title: '请勾选要移除购物车的商品',
						duration: 1000,
						icon:'none'
					});
					return
				}else{
					
					console.log(select,"要移除的商品id")
				}
				
				
			},
			// 结算
			settleAccount(){
				if(!this.isHaveGoods()) return;
				
				if(this.priceAll > 0){
					uni.navigateTo({
						url:'/pages/settleAccounts/settleAccounts'
					})
				}else{
					uni.showToast({
						title: '请勾选要购买的商品',
						duration: 1000,
						icon:'none'
					});
				}
				
			},
			// 滑动点击
			swipe_opt_event(e){
				console.log(e,"dianji")
				
				if(e.index == 0){//收藏
				
					// console.log(e.content.isCheck)
					// e.content.isCheck=!e.content.isCheck
					
					// if(e.content.isCheck){
					// 	e.content.icon=" shoucang32-select "
					// }else{
					// 	e.content.icon=" shoucang32 "
					// }
					this.showAction = 'right'
					
					return
				}
				if(e.index == 1){//删除
					
					this.noMoreLess()
					
					
					// this.showAction = 'right';
					
					return
				}
				// var index = e.index || 0;
				// var temp_data_list = this.data_list;
				// if(this.swipe_item_index === null) {
				//     app.globalData.showToast("请先滑动要操作的数据");
				//     return false;
				// }
				// if((temp_data_list[this.swipe_item_index] || null) == null) {
				//     app.globalData.showToast("数据不存在");
				//     return false;
				// }
				
				// // 根据操作类型处理数据
				// var id = temp_data_list[this.swipe_item_index]['id'];
				// if (index == 0) {
				//     var goods_id = temp_data_list[this.swipe_item_index]['goods_id'];
				//     this.goods_favor_delete(id, goods_id, 'favor');
				// } else {
				//     this.cart_delete(id, 'delete');
				// }
			},
			// 滑动事件
			swipe_change(e, id) {
			    console.log(e,id)
			      // this.swipe_item_index= (e == 'none') ? null : v
			    
			},
			noMoreLess(){
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '确定把该商品移除购物车吗?',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							
							
							
							console.log('用户点击取消');
						}
					}
				});
				
			},
			changeNumValue(v){
				
				
				
			}
			
		}
		
	}
</script>

<style lang="scss" scoped>

.bg-white{
	background-color: #fff;
}

.cart-container{
	height: 100vh;
	padding: 10px 20rpx 0px;
	box-sizing: border-box;
	position: relative;
}

.cart-list{
	height: calc(100vh - 70px);
}

// 列表
.cart-container2{
	display: flex;
	align-items: center;
	
	.mycheck{
		// margin:0 20rpx;
	}
	.cart-detail{
		flex: 1;
		display: flex;
		align-items: center;
		padding: 0 10rpx;
		.cart-img{
			
			.img{
				vertical-align: middle;
				width: 200rpx;
				height: 200rpx;
				
			}
		}
		.cart-msg{
			flex: 1;
			align-self: flex-start;
			padding-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.cart-msg-title{
				
			}
			.cart-msg-parm{
				
			}
			.cart-msg-price{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.cart-price{
					
				}
				.cart-num{
					
				}
				
			}
		}
	}
	
}


// 失效
.isFailure{
	.cart-img{
		position: relative;
		:before{
			content: '商品失效';
			display: block;
			height: 20rpx;
			width: 120rpx;
			line-height: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #E6E6E6;
			position: absolute;
			top: calc(50% - 30rpx);
			left:20rpx;
			z-index: 10;
			font-size: 28rpx;
			text-align: center;
		}
	}
	
	background-color: #ffffff;
	opacity: 0.8;
}


// 底部
.cart-tool{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	box-sizing: border-box;
	padding: 10px;
	height: 60px;
	// line-height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.select-all{
		display: flex;
		align-items: center;
	}
	.tool-right{
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.tool-jiesuan{
			
		}
		.jiesuan-btn{
			width: 200rpx;
			height:40px;
			line-height: 40px;
			text-align: center;
			border-radius: 20px;
			background: linear-gradient(to right,#FFCC1E,#FF8F19);
		}
	}
}

</style>