<template>
	<view>
		<view class="mainBox">
			<view class="" v-if="goodsList==0"></view>
			<view class="titleBox flexJ" v-else>
				<view></view>
				<view class="pencilBox flexA" @click="editGoods(1)" v-if="status">
					<img src="/static/Frame@2x(1).png" alt="">
					管理
				</view>
				<view class="penciloneBox flexA" @click="editGoods(0)" v-if="!status">
					<img src="/static/Frame@2x(1).png" alt="">
					<view class="">完成</view>
				</view>
			</view>

			<!-- 商品 -->
			<view class="commodityBox">
				<view class="" v-if="goodsList.length==0"></view>
				<view class="" v-else>
					<view class="addressBox flexA">
						<img src="/static/1.png" alt="">
						<view class="">
							一诺便利店鑫茂科技园店
						</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="shopCard flexA" v-for="(item,idx) in goodsList" :key="item.id">
					<image @click="toggle(item,idx)" v-if="!item.checkedStatus" src="/static/ic-checbox@2x.png"
						class="checkBox" />
					<image @click="toggle(item,idx)" v-if="item.checkedStatus" src="/static/10.png" class="checkBox" />
					<image style="width: 220rpx; height: 220rpx" :src="item.imageUrl" />
					<view class="Box">
						<view class="titleText">
							{{item.title}}
						</view>
						<view class="titleTextone">
							{{item.titleone}}
						</view>
						<view class="moneyBox">
							<view class="moneyIcon">￥</view>
							<view class="moneyText">{{item.money}}</view>
						</view>
						<!-- 商品数量编辑 -->
						<view class="editGoodsNumber flexA">
							<view class="flexC" @click="subNumHandler(item,idx)"><img src="/static/Group 1610@2x.png"
									alt=""></view>
							<input v-model="item.num" class="editInput" type="text" />
							<view class="flexC" @click="addNumHandler(item,idx)"><img src="/static/Group 5@2x.png"
									alt="">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="" v-if="goodsList==0"></view>
		<view class="bottomBtn flexJ" v-else>
			<view class="allChecked flexA" @click="editAllStatus">
				<image v-if="!allChecked" style="width: 32rpx; height: 32rpx" src="/static/ic-checbox@2x.png" />
				<image v-if="allChecked" style="width: 32rpx; height: 32rpx" src="/static/10.png" />
				<view>全选</view>
			</view>
			<view class="allMoney flexA" v-if="status">
				<view>合计：</view>
				<view>￥</view>
				<view>{{allPrice.toFixed(2)}}</view>
			</view>
			<view class="" v-else></view>
			<view class="rightBtn flexC" v-if="status" @click="goBuy">立即结算</view>
			<view class="deleteBtn flexC" v-if="!status" @click="isShowDel">删除</view>
		</view>
		<view style="height: 100px;"></view>
		<!-- 移除购物车 modal -->
		<u-modal :showCancelButton="true" @cancel="delGoodsShow = false" @confirm="removeShop" :show="delGoodsShow"
			:title="delGoodsTitle" :content='delGoodsContent' />
		<!-- 没有商品的时候显示这个页面 -->
		<view class="noProducts" v-if="goodsList==0">
			<view class="">
				<img src="/static/33.png" alt="">
			</view>
			<view class="one">
				您尚未添加商品
			</view>
			<view class="two flexC" @click="toclassiFication">
				去逛逛吧
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// false 编辑 true 完成
				status: true,

				// goodsNum: 1,
				// 商品数据
				goodsList: [{
						id: 1,
						title: '乐事薯片美国经典原味135g',
						titleone: '规格规格/规格规格规格',
						money: '8.8',
						num: 1,
						checkedStatus: false,
						imageUrl: '/static/ic-tabbar-home-s@2x.png'
					},
					{
						id: 2,
						title: '乐事薯片美国经典原味135g',
						titleone: '规格规格/规格规格规格',
						money: '8.8',
						num: 1,
						checkedStatus: false,
						imageUrl: '/static/ic-tabbar-home-s@2x.png'
					},
					{
						id: 3,
						title: '乐事薯片美国经典原味135g',
						titleone: '规格规格/规格规格规格',
						money: '8.8',
						num: 1,
						checkedStatus: false,
						imageUrl: '/static/ic-tabbar-home-s@2x.png'
					},
				],
				// 总价
				allPrice: 0,

				// 移除购物车 modal 提示数据
				delGoodsShow: false,
				delGoodsTitle: '移除购物车',
				delGoodsContent: '您确定要移除这些商品吗?'
			};
		},
		methods: {
			//跳转到分类
			toclassiFication() {
				uni.switchTab({
					url: '/pages/cate/index'
				})
			},
			isShowDel() {
				this.allPrice == 0 ? uni.showToast({
					title: '请选中要移除的商品',
					icon: 'none'
				}) : this.delGoodsShow = true
			},
			// 是否编辑状态
			editGoods(s) {
				if (s === 1) {
					this.status = false;
				}
				if (s === 0) {
					this.status = true;
				}
			},
			// 切换当前项
			toggle(item, idx) {
				this.goodsList[idx].checkedStatus = !this.goodsList[idx].checkedStatus
			},
			subNumHandler(item, idx) {
				this.goodsList[idx].num == 1 ? uni.showToast({
					title: '不能再减了',
					icon: 'none'
				}) : this.goodsList[idx].num = this.goodsList[idx].num - 1
			},
			addNumHandler(item, idx) {
				this.goodsList[idx].num = this.goodsList[idx].num + 1
			},
			// 点击全选按钮
			editAllStatus() {
				this.allChecked ? this.goodsList.forEach(it => it.checkedStatus = false) : this.goodsList.forEach(it => it
					.checkedStatus = true)
			},
			// 去结算
			goBuy() {

				// 1. 结算 
				let arr = this.goodsList.filter(it => it.checkedStatus)
				if (arr.length > 0) return uni.navigateTo({
					url: '/pages/car/confirmPayment'
				})
				if (arr.length == 0) return uni.showToast({
					title: '请选中去结算的商品',
					icon: 'none'
				})
				let arr2 = arr.map(it => {
					return {
						id: it.id,
						number: it.num,
						price: it.money * it.num
					}
				})
				console.log(JSON.stringify(arr2));
			},
			// 移除商品
			removeShop() {
				let ids = this.goodsList.filter(it => it.checkedStatus).map(it => it.id).join(',') //     1,2,3
				this.goodsList = this.goodsList.filter(it => !it.checkedStatus)
				this.delGoodsShow = false
				console.log(ids);
			},


		},
		computed: {
			allChecked() {
				return this.goodsList.every(it => it.checkedStatus)
			}
		},
		watch: {
			goodsList: {
				deep: true,
				immediate: true, //首次执行
				handler(newValue) {
					this.allPrice = this.goodsList.filter(it => it.checkedStatus).reduce((acc, item) => acc += item.money *
						item.num, 0)
				}
			}
		},
	};
</script>

<style lang="scss">
	page {
		background: rgba(246, 246, 246, 1);
	}

	.mainBox {
		// width: 686rpx;
		margin: 0 auto;
	}

	.titleBox {
		padding: 26rpx 10rpx 0 0;
		box-sizing: border-box;
		background: rgba(246, 246, 246, 1);

		view:nth-of-type(1) {
			color: #34B16B;
			font-size: 32rpx;
		}

		view:nth-of-type(2) {
			color: rgba(0, 0, 0, 0.9);
			font-size: 32rpx;
		}
	}

	.shopCard {
		position: relative;
		width: 750rpx;
		height: 228rpx;
		border-radius: 8rpx;
		background: rgba(255, 255, 255, 1);

		>.checkBox {
			width: 36rpx;
			height: 36rpx;
			margin: 0 14rpx 0 34rpx;
		}

		>.Box {
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			>.titleText {
				color: rgba(0, 0, 0, 0.9);
				font-size: 28rpx;
				max-width: 372rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			>.titleTextone {
				padding-top: 10rpx;
				color: rgba(0, 0, 0, 0.3);
				font-size: 25rpx;
				font-weight: 400;
			}

			>.moneyBox {
				margin-top: 58rpx;
				display: flex;
				align-items: center;

				>.moneyIcon {
					color: #095E1C;
					font-size: 24rpx;
					font-weight: 700;
				}

				>.moneyText {
					color: #095E1C;
					font-size: 34rpx;
					font-weight: 700;
				}
			}

			>.editGoodsNumber {
				position: absolute;
				bottom: 10%;
				right: 4%;

				>.editInput {
					width: 64rpx;
					height: 56rpx;
					// background: rgba(242, 243, 245, 1);
					text-align: center;
				}

				view {
					margin: 0 2rpx;

					img {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		>.failureTextBox {
			padding: 4rpx 12rpx;
			box-sizing: border-box;
			border-radius: 26rpx;
			background: rgba(237, 237, 237, 1);
			color: rgba(0, 0, 0, 0.4);
			font-size: 24rpx;
			margin-left: 16rpx;
		}
	}

	.failure {
		padding: 38rpx 8rpx;
		box-sizing: border-box;

		view:nth-child(1) {
			color: rgba(100, 101, 102, 1);
			font-size: 26rpx;
		}

		view:nth-child(2) {
			color: rgba(0, 0, 0, 0.9);
			font-size: 28rpx;
		}
	}

	.bottomBtn {
		padding: 0 0 0 32rpx;
		box-sizing: border-box;
		width: 750rpx;
		height: 96rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		position: fixed;
		bottom: 0;
		left: 0;

		>.allChecked {
			view {
				color: rgba(100, 101, 102, 1);
				font-size: 26rpx;
				margin-left: 10rpx;
			}
		}

		>.allMoney {
			margin-left: 60rpx;

			view:nth-child(1) {
				color: rgba(0, 0, 0, 1);
				font-size: 34rpx;

			}

			view:nth-child(2) {
				color: #34B16B;
				font-size: 28rpx;
			}

			view:nth-child(3) {
				color: #34B16B;
				font-size: 34rpx;
			}
		}

		>.rightBtn {
			width: 288rpx;
			height: 96rpx;
			opacity: 1;
			background: linear-gradient(90deg, rgba(70, 196, 125, 1) 0%, rgba(23, 141, 93, 1) 100%);
			color: rgba(255, 255, 255, 1);
			font-size: 30rpx;
			font-weight: 700;
		}

		>.deleteBtn {
			margin-right: 25rpx;
			width: 148rpx;
			height: 56rpx;
			border-radius: 8rpx;
			border: 2rpx solid #E63D27;
			color: #E63D27;
			font-size: 28rpx;
		}
	}

	.flexJ {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flexC {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flexA {
		display: flex;
		// justify-content: center;
		align-items: center;
	}

	.pencilBox {
		img {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
	}

	.penciloneBox {
		img {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
	}

	.noProducts {
		display: flex;
		align-items: center;
		flex-direction: column;

		img {
			width: 320rpx;
			height: 320rpx;
		}

		.one {
			color: rgba(0, 0, 0, 0.6);
			font-size: 28rpx;
			font-weight: 400;
			padding: 72rpx 0 160rpx 0;
		}

		.two {
			width: 192rpx;
			height: 80rpx;
			border-radius: 8rpx;
			opacity: 1;
			border: 2rpx solid rgba(71, 163, 116, 1);
			color: rgba(52, 177, 107, 1);
			font-size: 26rpx;
			font-weight: 400;
		}
	}

	.addressBox {
		padding: 20rpx 0 20rpx 16rpx;
		background: rgba(255, 255, 255, 1);
		img {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.line {
		width: 686rpx;
		height: 1rpx;
		opacity: 1;
		background: rgba(235, 237, 240, 1);
	}
	.commodityBox {
		border-radius: 8rpx;
		margin-top: 24rpx;
		background: rgba(235, 237, 240, 1);
	}
</style>