<template>
	<view class="container">
		<view class="title-box flex-between-center">
			<text class="fs-32">购物车<text class="fs-24">({{ selectCart.length }})</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="(item, index) in goodsList" :key="index" class="item">
					<view class="good-info-box flex-column-center">
						<image @click.stop="onSelect(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>
			</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>去结算({{ selectCart.length }})</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: [{
						goodName: '商品1',
						goodPrice: 5,
						goodImg: '',
						goodNum: 1,
						goodGg: '白色/100ml',
						goodSelecte: false
					},
					{
						goodName: '商品2',
						goodPrice: 6,
						goodImg: '',
						goodNum: 1,
						goodGg: '白色/100ml',
						goodSelecte: false
					},
					{
						goodName: '商品3',
						goodPrice: 7,
						goodImg: '',
						goodNum: 1,
						goodGg: '白色/100ml',
						goodSelecte: false
					},
					{
						goodName: '商品4',
						goodPrice: 8,
						goodImg: '',
						goodNum: 1,
						goodGg: '白色/100ml',
						goodSelecte: false
					},
					{
						goodName: '商品5',
						goodPrice: 9,
						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() {
				return this.selectCart.length
			},
			// 购物车内选中的商品总价
			selectCartCountPrice() {
				console.log(this.selectCart);
				let countPrice = 0;
				this.selectCart.map(item => {
					countPrice =countPrice+ item.goodPrice * item.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 => {

				})
			},
			// 单个商品选中或取消
			onSelect(item, index) {
				if (this.goodsList[index].goodSelecte) {
					this.$set(this.goodsList[index], "goodSelecte", false)
					const keyIndex = this.selectCart.findIndex(key => key.goodName === item.goodName)
					this.selectCart.splice(keyIndex, 1) // 取消选中之后更新选中的数据
				} else {
					this.$set(this.goodsList[index], "goodSelecte", true)
					this.selectCart.push(item) // 选中之后更新选中的数据
				}
				// 判断是否选择完,如果选择完让全选为true
				if (this.goodsList.every(key => key.goodSelecte === 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 => {
						this.selectCart.push(item) // 选中的商品数组 用于计算价格
						item.goodSelecte = true
					})
				} else { // 取消全选
					this.allSelect = false
					this.selectCart = [] // 选中的商品数组 用于计算价格
					this.goodsList.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() {
				// console.log(this.selectCart)
				this.goodsList=this.goodsList.filter(item => item.goodSelecte == false);
		        console.log(this.goodsList.length)
				this.selectCart = []
				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.selectCart.length === 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;
		margin-bottom: 24rpx;
	}

	.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>