<template>
	<view class="cart">
	
	<!-- 购物车列表 -->
		<view class="goods-list">
			<view class="top" style="padding: 24rpx 0;">
				<uni-row justify="space-between" customStyle="margin-bottom: 10px">
					<uni-col :span="6">
						全部（{{cartList.length}}）
					</uni-col>
					<uni-col :span="18" v-if="cartList.length>0">
						<view @click="isManage=true" v-if="!isManage" class="smtitle" style="position: relative;top: -3px;text-align: right;">管理</view>
						<view @click="isManage=false" v-else class="smtitle" style="position: relative;top: -3px;text-align: right;color: #106DFF;">退出管理</view>
					</uni-col>
				</uni-row>
			</view>
			
			<view v-if="cartList.length>0" class="card_list">	   
				<view class="item" v-for="(row, index) in cartList">
					<view @click="selected(index, row)" class="checkbox">
						<view v-if="row.checked==true"> <image src="../../static/jf/btn_select_color@2x.png" style="width: 32rpx;height: 32rpx;"></image></view>
						<view v-else> <image src="../../static/jf/btn_select@2x.png" style="width: 32rpx;height: 32rpx;"></image></view>
					</view>
					<view class="img">
						<image style="width:128rpx" class="icon" mode="widthFix" :src="row.spzp"></image>
					</view>
					<view>
						<view class="smtitle" style="position: relative;top: -3px;">
							{{row.spmc}}
						</view>
						<view class="control">
							<view class="num">
								<text class="count">{{row.dhsxjf}}</text>
							</view>
							<view><uni-number-box v-model="row.count" :min="1" @change="changeValue(row)" /></view>
						</view>
					</view>
				</view>
			</view>
		
			<u-empty v-else
			        mode="car"
			        icon="http://cdn.uviewui.com/uview/empty/car.png"
			>
			</u-empty>
		
	
		</view>
		
		
		<view v-if="cartList.length>0">
			<view class="bottom">
				<view class="select" @click="selectAll" v-if="checkAll!=true">
					<view class="checkbox">
						<view class="img" v-if="checkAll==true"> <image src="../../static/jf/btn_select_color@2x.png" style="width: 32rpx;height: 32rpx;top: 6px;"></image></view>
						<view class="img" v-else><image src="../../static/jf/btn_select@2x.png" style="width: 32rpx;height: 32rpx;top: 3px;"></image></view>
					</view> 全选
				</view>
				
				
			<view class="select" @click="noselectAll" v-else>
				<view class="checkbox">
					<view> <image class="img" src="../../static/jf/btn_select_color@2x.png" style="width: 32rpx;height: 32rpx;"></image></view>
				</view> 取消全选
			</view>
				
				
				
			<view class="info">
					<view v-if="!isManage">已选 <text>{{allCount}}</text> 件 共<text>{{allMoney}}</text>元</view>
				</view>
				<view class="coustbottom" v-if="!isManage" @click="toBuy">
					<view>结算</view>
				</view>
				<view class="coustbottom_del" v-else @click="deleteData">
					<view>删除</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { resolve } from 'path';
import { jwtdSpglDhjl,jwtdGwcList,jwtdGwcRemove} from '@/api/jfsc.js'
import { userInfo } from 'os';
	export default {
		data() {
			return {
			  checkGroup: [],
			  checkAll: false,
			  isManage:false,
			  allMoney:0,
			  allCount:0,
			  cartList:[]
			};
		},
		mounted() {
			
		    this.inits()
		},
		watch:{
			checkGroup: {
			  handler(newVal, oldVal) {
				 this.allMoney = 0
				 this.allCount = 0
				 this.cartList.forEach(v=>{
				 if(v.checked==true){
					this.allMoney += v.count * v.dhsxjf
					this.allCount+=v.count
					}
				})
				if(newVal.length == this.cartList.length){
					this.checkAll = true
				}else{
					this.checkAll = false
				}
			  },
			  deep: true
			},
			cartList: {
			  handler(newVal, oldVal) {
				   this.allMoney = 0
				   this.allCount = 0
					this.cartList.forEach(v=>{
					if(v.checked==true){
						this.allMoney += v.count * v.dhsxjf
						this.allCount+=v.count
					}
				})
			  },
			  deep: true
			}
		},
		methods:{
			inits(){
				jwtdGwcList(this.userInfo.user_id).then(res=>{
					let dds = res.data.records
					dds.forEach(v=>{
						v.checked = false
						v.count = 1
					})
					this.cartList = dds
					
				})
			},
			toBuy(){
				let clist = []
				let buyList =[]
				let ids
				if(this.checkGroup.length==0){
					this.$u.func.showToast({title:'请选择结算商品'})
					return
				}
				this.checkGroup.forEach(vv=>{
					ids = this.cartList.filter(v=>v.spId==vv)
					clist = clist.concat(ids)
				})
				
				let pp = new Promise((resolve, reject)=>{
					clist.forEach((v,k)=>{
						buyList.push({spId:v.spId,spsl:v.count,xhjf:v.dhsxjf})
					})
					resolve('ok')
				})
				
				pp.then(res=>{
					jwtdSpglDhjl(buyList).then(res=>{
						 this.$u.func.showToast({title:res.msg})
						 this.$u.func.refreshPage()
					})
				})
				
	
			},
			deleteData(){
				if(this.checkGroup.length==0){
					this.$u.func.showToast({title:'请选择商品'})
					return
				}
				let dlist = []
				 //this.cartList = this.cartList.filter(item => item.checked);
				 this.cartList.forEach(v=>{
					 if(v.checked==true){
						dlist.push({userId:this.userInfo.user_id,spId:v.spId}) 
					 }
				 })
				 jwtdGwcRemove(dlist).then(res=>{
					 this.$u.func.showToast({title:res.msg})
					 this.$u.func.refreshPage()
				 })
				 
			},
			back(){
				uni.navigateBack({
				    delta: 1
				  });
			},
			changeValue(row){
				console.log(row);
				this.allMoney = row.count * row.dhsxjf
			},
			async selected(index,row){
				var _this = this
				// 判断 checkGroup的长度，是否等于good_list长度
				if (this.checkGroup.length == this.cartList.length) {
					this.checkAll = true
				} else {
					this.checkAll = false
				}
				var spId = row.spId
				var i = this.checkGroup.indexOf(spId)
				if (i > -1) {
					// 取消当前商品选中状态
					_this.$set(_this.cartList[index], 'checked', false);
					// 移除选中列表中的当前商品
					return _this.checkGroup.splice(i,1)
				}
				// 选中
				_this.$set(_this.cartList[index], 'checked', true);
				_this.checkGroup.push(spId)
				console.log(_this.checkGroup);
			},
			
			  //全选
			  selectAll(){
				  /* 方法一 */
				  this.checkGroup=[]/* 清空以前的全中的内容 */
				  this.cartList.map(v=>{
					  v.checked = true
					  this.checkGroup.push(v.spId)
				  }) 
				  this.checkAll = true
				  /* 方法二 */
				   /* state.selectedAll = state.list.map(v=>{
						v.checked = true
						return v.id
				   }) */
			  },
				//全不选
			  noselectAll(){
				  this.checkAll = false
				  this.cartList.map(v=>{
					   v.checked = false
				  })
				   this.checkGroup = []
			  },
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-navbar__content{
		border-bottom: none !important;
	}
	.bottom{
		position: fixed;
		background: #FFF;
		padding: 12rpx 12rpx;
		box-sizing: border-box;
		left: 0;
		bottom: 0;
		right:0;
		width: 100%;
		display: grid;
		grid-template-columns: 25% 45% 30%;
		.select{
			display: flex;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 80rpx;
			text-align: left;
			font-style: normal;
			.checkbox{
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				margin-right: 12rpx;
				.img{
					position: relative;
					top: 3px;
				}
			}
			
		
		}
		.info{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 80rpx;
			text-align: left;
			font-style: normal;
			text{
				color: #FF1D1D;
			}
		}
		.coustbottom{
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height:80rpx;
			text-align: center;
			font-style: normal;
			background: linear-gradient( to top, #65CBFF 0%, #0260FE 100%);
			border-radius: 64rpx;
		}
		.coustbottom_del{
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			font-style: normal;
			background: linear-gradient( to top, #FFD452 0%, #FF9700 100%);
			border-radius: 64rpx;
		}
	}
	.cart{
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #F8F8F8;
		position: relative;
		min-height: 100vh;
		.goods-list{
			.card_list{	
				border-radius: 24rpx;
				box-sizing: border-box;
				.item{
					margin-bottom: 12rpx;
					background: #FFF;
					padding: 24rpx;
					box-sizing: border-box;
					border-radius: 24rpx;
					display: grid;
					grid-template-columns: 40rpx 150rpx calc(100% - 190rpx);
					.control{
						display: grid;
						grid-template-columns: 50% 50%;
						.num{
							height: 44rpx;
							font-family: DIN, DIN;
							font-weight: 500;
							font-size: 36rpx;
							color: #FF1D1D;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
							padding-left: 10rpx;
							box-sizing: border-box;
						}
					}
					.img{
						text-align: center;
						.icon{
							height: 128rpx;
							border-radius: 16rpx;
							
						}
						
					}
					.smtitle{
						height: 80rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #111111;
						line-height: 40rpx;
						text-align: justify;
						font-style: normal;
						padding-left: 10rpx;
						box-sizing: border-box;
						display: -webkit-box;
						  -webkit-box-orient: vertical;
						  -webkit-line-clamp: 2;
						  overflow: hidden;
						  text-overflow: ellipsis;
					}
					.checkbox{
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						margin-top: 23px;
					}
					.isSelect{
						background: linear-gradient(to bottom,#0260FE,#61C6FF);
					}
				}
			}
			.top{
				view{
					height: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #111111;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}
	}
</style>