<template>
	<view class="container">
		<view class="title-box flex-between-center">
			<text class="fs-32">购物车<text class="fs-24">({{ selectCartCountNumber }})</text></text>
			<text @click="isManage = true" v-if="!isManage" style="color: #F32423;">管理</text>
			<text @click="isManage = false" v-else style="color: #F32423;">完成</text>
		</view>
		<view class="goods-list">
			<scroll-view style="height: 100%;" scroll-y>
				<view v-for="(shop, index) in goodsList" :key="index"
					style="border-radius: 10rpx; background-color: white;margin-top: 20rpx;padding-top: 40rpx;">
					<view style="display: flex;">
						<image @click.stop="onShopSelect(shop, index)"
							style="width: 40rpx;height: 40rpx;margin-right: 40rpx;margin-left: 30rpx;"
							:src="shop.shopSelecte==true?'/static/is-select.png':'/static/select.png'"></image>
						<view class="fw-600 fs-30">
							<text>{{shop.shopName}}</text>
						</view>
					</view>
					<view v-for="(item, index) in shop.list" :key="index" class="item">
						<view class="good-info-box flex-column-center">
							<image @click.stop="onGoodSelect(shop,item, index)"
								:src="item.goodSelecte==true?'/static/is-select.png':'/static/select.png'"></image>
							<view class="good-info">
								<view class="good-img">
									<image src="@/static/logo.png"></image>
									<view v-if="item.issj === '0'" @click.stop="onDelEexpire(item)" class="shixiao">
										<text>已下架</text>
									</view>
								</view>
								<view class="right">
									<view>
										<view class="fw-600 fs-28">
											<text>{{item.goodName}}</text>
										</view>
										<view class="mt-16 fs-24">
											<text>规格：{{item.goodGg}}</text>
										</view>
									</view>
									<view class="flex-between-center">
										<text class="fs-36 fw-600" style="color: #F32423;">￥{{item.goodPrice}}</text>

										<view v-if="!isManage" class="number-box">
											<view @click.stop="onReduceNumber(item)" class="reduce">-</view>
											<text class="fs-28">{{ item.goodNum }}</text>
											<view @click.stop="onAddNumber(item)" class="add">+</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 底部 -->
		<view class="bottom-box">
			<view class="select">
				<image v-if="allSelect" @click="allSelectClick" src="@/static/is-select.png"></image>
				<image v-else @click="allSelectClick" src="@/static/select.png"></image>
				<text>全选</text>
			</view>
			<view v-if="isManage === false" class="right">
				<text>合计：<text class="fs-36 fw-600" style="color: #F5261D;">￥{{selectCartCountPrice}}</text></text>
				<view @click="onSettlement" class="btn">
					<text>去结算({{ selectCartCountNumber }})</text>
				</view>
			</view>
			<!-- 管理状态 -->
			<view v-else class="right">
				<view @click="onDelGoods" class="del-btn">
					<text>删除</text>
				</view>
			</view>
		</view>

		<!-- 删除购物车商品 -->
		<u-modal :show="delShow" @confirm="onConfirmDel" :showCancelButton="true" @cancel="delShow = false"
			@close="onDelClose" confirmColor="#FF0000">
			<view class="pt-30 pb-30">
				<text>确定删除？</text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				goodsList: [{
						shopName: '小米店铺',
						shopSelecte: false,
						list: [{
								goodName: '小米手机',
								goodPrice: 5,
								goodImg: '',
								goodNum: 1,
								goodGg: '白色/100ml',
								goodSelecte: false
							},
							{
								goodName: '小米平板',
								goodPrice: 6,
								goodImg: '',
								goodNum: 1,
								goodGg: '白色/100ml',
								goodSelecte: false
							}
						]
					},
					{
						shopName: '华为店铺',
						shopSelecte: false,
						list: [{
								goodName: '华为手机',
								goodPrice: 5,
								goodImg: '',
								goodNum: 1,
								goodGg: '白色/100ml',
								goodSelecte: false
							},
							{
								goodName: '华为平板',
								goodPrice: 6,
								goodImg: '',
								goodNum: 1,
								goodGg: '白色/100ml',
								goodSelecte: false
							}
						]
					},
				],
				allSelect: false,

				currentPage: 1,
				delShow: false,

				selectCart: [], // 选择的商品数组

				isManage: false, // 是否点击管理

				currentEexpireId: '',
				delType: '',
			}
		},
		onShow() {
			// this.getCartGoodsList()
		},
		computed: {
			...mapState(['user']),
			// 购物车内选中的商品数量
			selectCartCountNumber() {
				let countNum = 0;
				this.goodsList.map(item => {
					item.list.map(goodItem => {
						if (goodItem.goodSelecte) {
							countNum++
						}
					})

				})
				return countNum
			},
			// 购物车内选中的商品总价
			selectCartCountPrice() {
				let countPrice = 0;
				this.goodsList.map(item => {
					item.list.map(goodItem => {
						if (goodItem.goodSelecte) {
							countPrice = countPrice + goodItem.goodPrice * goodItem.goodNum
						}
					})

				})
				return countPrice
			}
		},
		onHide() {
			this.selectCart = []
			this.allSelect = false
		},
		methods: {
			// 获取购物车商品列表
			getCartGoodsList() {
				const params = {
					url: '/api/userinfo/carlist',
					data: {
						page: this.currentPage
					}
				}
				this.$request(params).then(res => {
					// console.log(res)
					this.goodsList = res.data.list
					this.goodsList.map(item => {
						item.select = false
					})
				}).catch(err => {

				})
			},
			// 店铺选中或取消
			onShopSelect(shop, index) {
				if (shop.shopSelecte) {
					shop.shopSelecte = false
					shop.list.map(item => {
						item.goodSelecte = false
					})

				} else {
					shop.shopSelecte = true
					shop.list.map(item => {
						item.goodSelecte = true
					})
				}
				// 判断是否选择完,如果选择完让全选为true
				if (this.goodsList.every(key => key.shopSelecte === true)) {
					this.allSelect = true
				} else {
					this.allSelect = false
				}
				this.$forceUpdate() // 强制更新视图

			},
			//商品选中或取消
			onGoodSelect(shop, item, index) {
				if (item.goodSelecte) {
					item.goodSelecte = false
				} else {
					item.goodSelecte = true
				}
				// 判断该店铺下商品是否选择完,如果选择完让店铺全选为true
				if (shop.list.every(key => key.goodSelecte === true)) {
					shop.shopSelecte = true
				} else {
					shop.shopSelecte = false
				}
				// 判断是否选择完,如果选择完让全选为true
				if (this.goodsList.every(key => key.shopSelecte === true)) {
					this.allSelect = true
				} else {
					this.allSelect = false
				}
				this.$forceUpdate() // 强制更新视图

			},

			// 全选购物车商品或 取消全选
			allSelectClick() {
				if (this.goodsList.length === 0) {
					return this.$u.toast('暂无商品')
				}
				if (!this.allSelect) { // 全选
					this.allSelect = true
					this.goodsList.map(item => {
						item.shopSelecte = true
						item.list.map(item => {
							item.goodSelecte = true

						})
					})
				} else { // 取消全选
					this.allSelect = false
					this.goodsList.map(item => {
						item.shopSelecte = false
						item.list.map(item => {
							item.goodSelecte = false
						})
					})
				}
				this.$forceUpdate() // 强制更新视图

			},
			// 减少商品数量
			onReduceNumber(item) {
				if (item.goodNum === 1) {
					return this.$u.toast('不能再减了')
				}
				item.goodNum -= 1

				//this.$forceUpdate() // 强制更新视图
				/* const params = {
					url: '/api/userinfo/editcar',
					data: {
						id: item.id,
						type: '1', // 更新 1，删除2
						num: item.num - 1
					}
				}
				this.$request(params).then(res => {
					// console.log(res)
					if (res.code === 1) {
						// this.getCartGoodsList()
						item.num -= 1
					} else {
						this.$u.toast(res.msg || '操作失败')
					}
				}).catch(err => {
					this.$u.toast(err.msg || '操作失败')
				}) */
			},
			// 增加商品数量
			onAddNumber(item) {
				item.goodNum += 1

				//this.$forceUpdate() // 强制更新视图
				/* const params = {
					url: '/api/userinfo/editcar',
					data: {
						id: item.id,
						type: '1', // 更新 1，删除2
						num: item.num + 1
					}
				}
				this.$request(params).then(res => {
					// console.log(res)
					if (res.code === 1) {
						// this.getCartGoodsList()
						item.num += 1
					} else {
						this.$u.toast(res.msg || '操作失败')
					}
				}).catch(err => {
					this.$u.toast(err.msg || '操作失败')
				}) */
			},
			// 删除已失效
			onDelEexpire(item) {
				this.currentEexpireId = item.id
				this.delType = 'expire'
				this.delShow = true
			},
			onDelGoods() {
				if (this.selectCartCountNumber === 0) {
					return this.$u.toast('请选择商品')
				}
				this.delType = 'delGoods'
				this.delShow = true
			},

			onConfirmDel() {
				//过滤商品
				this.goodsList.forEach(item => {
					item.list=item.list.filter(goodItem => !goodItem.goodSelecte)
				})
				//过滤店铺
				this.goodsList=this.goodsList.filter(item=>item.list.length!=0)
				console.log(this.goodsList)
				this.isManage = false
				this.allSelect = false
				this.delShow = false
				/* const params = {
					url: '/api/userinfo/editcar',
					data: {
						type: '2',
						ids: this.selectCart.map(item => item.id).join(",")
					}
				}
				this.$request(params).then(res => {
					this.delShow = false
					if (res.code === 1) {
						this.getCartGoodsList()
						this.selectCart = []
						this.isManage = false
						this.allSelect = false
					} else {
						this.$u.toast(res.msg || '删除失败')
					}
				}).catch(err => {
					this.$u.toast(err.msg || '删除失败')
				}) */
			},
			onDelClose() {
				this.delShow = false
			},
			// 结算
			onSettlement() {
				if (this.selectCartCountNumber === 0) {
					return this.$u.toast('请选择商品')
				}
				// 确认订单
				/* const params = {
					url: "/api/userinfo/carjisuan",
					data: {
						carids: this.selectCart.map(item => item.id).join(",")
					}
				}
				this.$request(params).then(res => {
					// console.log(res)
					if (res.code === 1) {
						const ids = this.selectCart.map(item => item.id).join(",")
						this.allSelect = false
						this.isManage = false
						this.selectCart = []

						res.data.goods.map(item => {
							item.content = ''
						})
						const orderData = res.data
						uni.navigateTo({
							url: '/pages/home/confirmorder?orderData=' + JSON.stringify(orderData) +
								'&type=2' + '&ids=' + JSON.stringify(ids)
						})
					} else {
						this.$u.toast(res.msg || "购买失败")
					}
				}).catch(err => {
					this.$u.toast(err.msg || "购买失败")
				}) */
			}
		}
	}
</script>

<style scoped>
	.container {
		height: 100%;
		position: relative;
	}

	.title-box {
		padding: 24rpx 32rpx;
	}

	.goods-list {
		height: calc(100% - 120rpx - 120rpx);
		background-color: #F5F5F5;
	}

	.item {
		padding: 32rpx 32rpx;
		background-color: #FFF;
	}

	.item:first-child {
		padding-top: 0;
	}

	.good-info-box {}

	.good-info-box>image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 40rpx;
	}

	.good-info {
		height: 100%;
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.good-img {
		width: 200rpx;
		height: 200rpx;
		position: relative;
	}

	.good-img>image {
		width: 200rpx;
		height: 100%;
		border-radius: 16rpx;
		margin-right: 24rpx;
	}

	.shixiao {
		width: 120rpx;
		height: 120rpx;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 50%;
		text-align: center;
		line-height: 120rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -60rpx;
		margin-top: -60rpx;
		color: #FFF;
	}

	.good-info>.right {
		flex: 1;
		height: 190rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
	}

	.number-box {
		width: 160rpx;
		height: 46rpx;
		text-align: center;
		line-height: 46rpx;
		background: #FFFFFF;
		border-radius: 2rpx 2rpx 2rpx 2rpx;
		border: 1rpx solid #D1D1D1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
	}

	.reduce {
		width: 50rpx;
		height: 100%;
		text-align: center;
		line-height: 46rpx;
		border-right: 2rpx solid #D1D1D1;
		color: #9A9A9A;
	}

	.add {
		width: 50rpx;
		height: 100%;
		text-align: center;
		line-height: 46rpx;
		border-left: 2rpx solid #D1D1D1;
		color: #9A9A9A;
	}

	.bottom-box {
		padding: 20rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFF;
	}

	.bottom-box>.select {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 24rpx;
	}

	.bottom-box>.select>image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 24rpx;
	}

	.bottom-box>.right {
		margin-left: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.btn {
		width: 200rpx;
		height: 80rpx;
		background: #F32423;
		border-radius: 8rpx;
		text-align: center;
		line-height: 80rpx;
		color: #FFF;
		margin-left: 32rpx;
	}

	.del-btn {
		width: 200rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #FFF;
		background: #F32423;
		border-radius: 8rpx;
	}
</style>