<template>
	<view class="cart-pages">
		<view class="cart-bar">
			<view>共{{count}}件商品</view>
			<view @click="editCart">
				<text class="edit" v-if="!isEdit">管理</text>
				<text class="save" v-else>完成</text>
			</view>
		</view>
		<view class="goods-list">
			<!-- 按分类显示 -->
			<view class="goods-class-box" v-for="(item,cindex) in cartList" :key="item.goodsTypeNo">
				<view class="goods-class-head">
					<view>
						<u-checkbox 
						shape="circle" 
						v-model="item.checked" 
						active-color="#01c9b2" 
						:name='item.goodsTypeNo' 
						size="40rpx"
						@change="goodsClasChange">
							{{item.name}}
						</u-checkbox>
					</view>
					<view class="des">
						<view>满<text>{{item.goldLimit}}</text></view>
						<u-image mode="scaleToFill" width="26rpx" height="26rpx" src="/static/ledou.png"></u-image>
						<view>才可购买</view>
					</view>
				</view>
				<view class="goods-class-list">
					<!-- 商品列表 -->
					<view class="goods-item" v-for="(good,index) in item.shoppingCartGoodsList" :key="good.id">
						<view class="checkbox">
							<u-checkbox 
							v-model="good.checked" 
							v-if="good.goods.inventoryQty>0||isEdit" 
							shape="circle" 
							active-color="#01c9b2" 
							size="40rpx"
							:name='good.id+"-"+cindex'
							@change="goodsChange"
							></u-checkbox>
						</view>
						<view class="goods-info">
							<view class="goods-imgs">
								<view v-if="good.goods.inventoryQty==0" class="goods-staus">已售罄</view>
								<u-image border-radius="12" width="158rpx" height="140rpx" :src="good.goods.homeImage"></u-image>
							</view>
							<view class="goods-text">
								<view class="good-name">{{good.goods.name}}</view>
								<view class="goods-price">
									<view>
										<text>{{good.goods.sellGold}}</text>
										<u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
									</view>
									<view v-if="good.goods.inventoryQty>0">
										<u-number-box @change="goodsNumsChange(good)" :min="1" v-model="good.buyQty"></u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cart-submit">
			<view>
				<u-checkbox 
				shape="circle" 
				name='checkAll' 
				size="40rpx"
				active-color="#01c9b2" 
				@change="checkAllChange" 
				v-model="checkAll">
				{{checkAll?'取消':'全选'}}
				</u-checkbox>
			</view>
			<view v-if="!isEdit">
				<view class="heji">
					<view>总计：<text>{{totalPrice}}</text></view>
					<u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
				</view>
				<u-button size="mini" :custom-style="toOrderButton" type="error" @click="toOrder">立即下单</u-button>
			</view>
			<view v-else>
				<u-button size="mini" :custom-style="toOrderButton" type="error" @click="delGoods">删除</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				toOrderButton: {
					borderRadius:'100rpx',
					fontSize:'30rpx',
					width: '180rpx',
					height: '60rpx'
				},
				checkAll: false,// 全选
				isEdit: false, // 是否编辑模式
			};
		},
		computed: {
			// 总数
			count() {
				let arr = this.$store.state.vuex_cartList
				let count = 0
				arr.map(item=>{
					count = count + item.shoppingCartGoodsList.length
					if(!item.hasOwnProperty("checked")){
						item.checked = false
					}
					item.shoppingCartGoodsList.map(goods=>{
						if(!goods.hasOwnProperty("checked")){
							goods.checked = false
						}
					})
				})
				return count
			},
			// 总计
			totalPrice(){
				let arr = this.cartList
				let total = 0
				arr.map(item=>{
					item.shoppingCartGoodsList.map(a =>{
						if(a.checked){
							total = total + a.buyQty * a.goods.sellGold
						}
					})
				})
				return total
			},
			// 商品列表
			cartList(){
				return this.$store.state.vuex_cartList
			}
		},
		onLoad() {
			this.hasCheckAll()
		},
		methods: {
			// 获取当前选择的商品, type: 0 删除，1 立即下单
			getCheckGoods(type){
				let arr = this.cartList
				let goods = []
				arr.map(item=>{
					item.shoppingCartGoodsList.map(a =>{
						if(a.checked){
							goods.push(type?a:a.id)
						}
					})
				})
				return goods
			},
			// 全选 或 取消全选
			checkAllChange(e) {
				let arr = this.cartList
				arr.map(item=>{
					item.checked = e.value
					item.shoppingCartGoodsList.map(goods=>{
						goods.checked =  e.value
					})
				})
				arr.splice()
			},
			// 每个分类的全选
			goodsClasChange(e){
				console.log(e);
				let index = this.cartList.findIndex(item => item.goodsTypeNo == e.name)
				this.cartList[index].checked = e.value
				this.cartList[index].shoppingCartGoodsList.map(goods=>{
					goods.checked = e.value
				})
				// 判断是否全选
				this.hasCheckAll()
			},
			// 商品选择
			goodsChange(e){
				console.log(e)
				let a = e.name.split('-')
				let row = this.cartList[a[1]]
				let goodsIndex = row.shoppingCartGoodsList.findIndex(item => item.id == a[0])
				row.shoppingCartGoodsList[goodsIndex].checked = e.value
				// 判断当前分类是否全选
				this.clasGoodsHasCheckAll(a[1])
				// 判断是否全选
				this.hasCheckAll()
			},
			// 判断某个分类是否全选
			clasGoodsHasCheckAll(index){
				let row = this.cartList[index]
				let len = row.shoppingCartGoodsList.length
				let clen = 0
				row.shoppingCartGoodsList.map(item=>{
					console.log(item.checked)
					if(item.checked){
						clen = clen + 1
					}
				})
				row.checked = clen == len
				this.cartList.splice()
			},
			// 是否全选
			hasCheckAll(){
				let list = this.cartList
				let len = list.length
				let clen = 0
				list.map(item => {
					if(item.checked){
						clen = clen + 1
					}
				})
				this.checkAll = clen == len
				list.splice()
			},
			// 编辑购物车
			editCart(){
				this.isEdit = !this.isEdit
			},
			// 立即下单
			toOrder(){
				let goods = this.getCheckGoods(1)
				console.log(goods)
				if(goods.length){
					this.$u.vuex("vuex_toOrderList",goods)
					uni.redirectTo({
						url:"/pages/toOrder/index"
					})
				}else{
					uni.showToast({
						title:"请选择商品",
						icon:"none"
					})
				}
			},
			// 删除商品
			delGoods(){
				let ids = this.getCheckGoods(0)
				if(ids.length){
					uni.$emit("delCartGood", ids)
				}else{
					uni.showToast({
						title:"请选择要删除的商品",
						icon:"none"
					})
				}
			},
			// 更改商品数量
			goodsNumsChange(e){
				console.log(e)
				uni.$emit("updateGoodsBuyQty",{id:e.id,buyQty:e.buyQty})
			}
		},
	}
</script>

<style lang="scss">
page{
	height: 100%;
}
.cart-pages{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.cart-bar{
		display: flex;
		justify-content: space-between;
		padding:20upx;
		.edit{
			color: #666;
		}
		.save{
			color: #00aaff;
		}
	}
	.goods-list{
		flex-grow: 1;
		overflow: auto;
		.goods-class-box{
			background: #FFFFFF;
			box-shadow: 1px 1px 3px #eee;
			margin-bottom: 20upx;
			.goods-class-head{
				display: flex;
				align-items: center;
				padding: 20upx;
				border-bottom: 1px solid #F8F8F8;
				justify-content: space-between;
				.des{
					display: flex;
					align-items: center;
					font-size: 26upx;
					color: #999;
					text{
						color: #FA3534;
					}
				}
			}
		}
		
		.goods-item{
			padding: 20upx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #F8F8F8;
			&:last-child{
				border: 0;
			}
			.checkbox{
				width: 60rpx;
				overflow: hidden;
			}
			.goods-info{
				display: flex;
				align-items: center;
				flex-grow: 1;
				.goods-imgs{
					position: relative;
					.goods-staus{
						width: 100%;
						height: 100%;
						position: absolute;
						z-index: 10000;
						border-radius: 15rpx;
						background: rgba($color: #000000, $alpha: 0.4);
						text-align: center;
						line-height: 140rpx;
						left: 0;
						top: 0;
						color: #eee;
						font-size: 24upx;
						font-weight: bold;
					}
				}
				.goods-text{
					padding-left: 20upx;
					flex-grow: 1;
					.good-name{
						font-weight: bold;
						word-break: break-all;
					}
				}
			}
			.goods-price{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20upx;
				>view{
					&:first-child{
						font-size: 22upx;
						display: flex;
						align-items: center;
						text{
							color: red;
							font-size: 32upx;
							margin-right: 6upx;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
	.cart-submit{
		padding: 20upx;
		background: #FFFFFF;
		box-shadow: 1px 1px 3px #eee;
		border-top: 1px solid #eee;
		display: flex;
		align-items: center;
		justify-content: space-between;
		>view{
			&:last-child{
				display: flex;
				align-items: center;
				font-size: 26upx;
				text{
					color: red;
					font-size: 40upx;
				}
				> view{
					padding-right: 50upx;
				}
				.heji{
					display: flex;
					align-items: center;
					font-weight: bold;
				}
			}
		}
	}
}
</style>
