<template>
	<view class="content">
		<view style="padding-bottom:100rpx;">
			<view class="Toptt">
				<text class="LeftTop">共有{{dataList.length}}件商品</text>
				<view @click="chickGl" v-if="GlShow">
					<text class="LeftTopgl">管理</text>
				</view>
				<view @click="chickWC" v-if="WCShow">
					<text class="LeftTopwc">完成</text>
				</view>
			</view>
			<view style="margin-bottom:50px;">
				<view class="onList" v-for="(item,index) in dataList" :key="index"
					@longpress.stop="delGood(index,item.id,item.goods_num)">
					<view class="onAll">
						<view class="onSel" @click="SelTuBiao(item.id,index)">
							<image src="../../static/ic_38_1@2x.png" style="width: 32rpx;height: 32rpx;"
								v-if="ary.indexOf(item.id)==-1"></image>
							<image v-else src="../../static/ic_37@2x.png" style="width: 32rpx;height: 32rpx;">
							</image>
						</view>
						<view style="margin-right: 24rpx;" @click="goodDetail(item.goods_id)">
							<image :src="item.goods.image" style="width: 180rpx;height: 180rpx;border-radius: 8rpx;">
							</image>
						</view>
						<view style="width: 376rpx;">
							<view class="TitText"><text class="title">{{item.goods.title}}</text></view>
							<view style="margin: 8rpx 0 18rpx 0;"><text
									class="guige">{{item.sku_price.goods_sku_text}}</text>
							</view>
							<view class="TitMoney">
								<view>
									<text class="moneyBiao">￥</text><text class="money">{{item.sku_price.price}}</text>
								</view>
								<view>
									<view class="" v-if="item.numShow" style="display: flex;">
										<view class="bianOne" @click="jianSum(index)"><text class="jian">-</text></view>
										<view class="bianTwo"><text class="shuliang">{{item.goods_num}}</text></view>
										<view class="bianThree" @click="jiaSum(index)">
											<text class="jia">+</text>
										</view>
									</view>
									<view class="goodNum" v-else @click="showGoodNum(index)">
										x{{item.goods_num}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="BtnDw">
				<view class="BtnJie">
					<view class="selBox" @click="BtnSel">
						<view v-if="!AllIcon" style="display:flex;">
							<image src="../../static/image/ic_cir@2x.png"></image>
							<text class="select">全选</text>
						</view>
						<view v-else style="display:flex;">
							<image src="../../static/image/ic_suss@2x.png"></image>
							<text class="select">取消全选</text>
						</view>
					</view>
					<view style="display:flex;align-items: center;" v-if="GlShow">
						<view>
							<text class="heji">合计:</text><text class="BtnMoney">¥{{totalNum}}</text>
						</view>
						<view class="JieBox" @click="goJieSuan">
							<text class="jiesuan">结算</text>
						</view>
					</view>
					<view class="DelBox" v-if="WCShow" @click="deleteMore">
						<text class="del">删除</text>
					</view>
				</view>
			</view>
			<view class="noData" v-if="dataList.length==0">
				<image src="/static/image/img_blank@2x.png" mode=""></image>
				<view class="texts">
					购物车空空的~
				</view>
				<view class="goBtn" @click="goIndex">
					去逛逛
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		onShow() {
			//购物车列表
			// this.shopGoodList()
		},
		data() {
			return {
				icon: [],
				//总共的金额
				totalNum: 0,
				//商品数量
				commoditySum: 3,
				//商品id
				goodsID: [],
				//选中
				selIcon: true,
				//全选、取消全选
				AllIcon: false,
				//管理显示
				GlShow: true,
				//完成显示
				WCShow: false,
				stock: 0, //选中商品库存
				addIndex: '', //增加
				delIndex: '', //减少
				dataList: [{
					image: '../../static/ic_21@2x.png',
					title: '商品米高商品名称',
					price: '50',
					detail: '55W-8L经典款标配：整机',
					goods_num: 6,
					numShow: false
				}, {
					image: '../../static/ic_21@2x.png',
					title: '商品米高商品名称',
					price: '50',
					detail: '55W-8L经典款标配：整机',
					goods_num: 6,
					numShow: false
				}], //商品列表
				ary: [],
				cartListID: [] //商品增加减少删除
			}
		},
		onShow() {
			this.shopGoodList()
		},
		methods: {
			//首页
			goShow() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			//分类
			goClass() {
				uni.redirectTo({
					url: '/pages/classify/classify'
				})
			},
			//信息广场
			goMessage() {
				uni.redirectTo({
					url: '/pages/square/square'
				})
			},
			//购物车
			goShopping() {

			},
			//我的
			goMe() {
				uni.redirectTo({
					url: '/pages/me/me'
				})
			},
			//数量操作
			showGoodNum(indexs) {
				this.dataList.forEach((item, index) => {
					if (index == indexs) {
						item.numShow = true
						this.stock = item.sku_price.stock
					}
					this.$forceUpdate()
				})
			},
			//去结算
			goJieSuan() {
				//当长度为0时提示请选择商品
				let say = this.ary
				if (say.length <= 0) {
					uni.showToast({
						title: '请先选择商品',
						duration: 2000,
						icon: 'none'
					})
				} else {
					let goodlIst = []
					let list = this.dataList
					list.forEach((item, index) => {
						if (this.ary.indexOf(item.id) !== -1) {
							goodlIst.push(item)
						}
					})
					uni.setStorageSync('shoppingDataBuy', goodlIst)
					uni.navigateTo({
						url: '/pages/order/settle-Order'
					})
				}
			},
			//购物车列表
			shopGoodList() {
				request.get('/api/cart/index', {}).then(res => {
					if (res.code == 1) {
						this.dataList = res.data
						this.dataList.forEach((item, index) => {
							item.numShow = false
						})
					}
				}).catch(err => {

				})
			},
			SelTuBiao(id, indexs) {
				console.log(indexs, '选中的index', id, '选中的id')
				let list = this.dataList
				list.forEach((item, index) => {
					if (index == indexs) {
						console.log(this.ary.indexOf(item.id), '---------')
						if (this.ary.indexOf(item.id) == -1) {
							this.ary.push(item.id)
							console.log(item, '选中后的商品')
							this.totalNum += item.sku_price.price * item.goods_num
							if (this.goodsID.length == this.ary.length) {
								this.AllIcon = true
							} else {
								this.AllIcon = false
							}
						} else {
							this.ary.forEach((items, indexs) => {
								if (items == item.id) {
									this.ary.splice(indexs, 1)
								}
							})
							this.totalNum -= item.sku_price.price * item.goods_num
							if (this.goodsID.length == this.ary.length) {
								this.AllIcon = true
							} else {
								this.AllIcon = false
							}
						}
					}

				})
			},
			//减
			jianSum(index) {
				let sum = this.dataList[index].goods_num
				if (sum == 1) {
					uni.showToast({
						title: '已经是最少了哦~',
						icon: 'none'
					})
				} else {
					--sum
					this.dataList[index].goods_num = sum
					let id = this.dataList[index].id
					let list = []
					list.push(id)
					let postData = {
						cart_list: list,
						act: 'change',
						value: this.dataList[index].goods_num
					}
					request.post('/api/cart/edit', postData).then(res => {

					}).catch(err => {

					})
				}
			},
			//加
			jiaSum(index) {
				let sum = this.dataList[index].goods_num
				if (sum == this.stock) {
					uni.showToast({
						title: '已达到最大库存',
						icon: 'none'
					})
				} else {
					++sum
					this.dataList[index].goods_num = sum
					let id = this.dataList[index].id
					let list = []
					list.push(id)
					let a = JSON.stringify(list)
					let postData = {
						cart_list: a,
						act: 'change',
						value: this.dataList[index].goods_num
					}
					request.post('/api/cart/edit', postData).then(res => {

					}).catch(err => {

					})
				}
			},
			//全选、取消全选
			BtnSel() {
				this.AllIcon = !this.AllIcon
				if (this.AllIcon) {
					let list = this.dataList
					list.forEach((item, index) => {
						this.ary.push(item.id)
						this.totalNum += item.sku_price.price * item.goods_num
					})
				} else {
					this.totalNum = 0
					this.ary = []
				}

			},
			//商品详情
			goodDetail(id) {
				uni.navigateTo({
					url: '/pages/index/particulars?id=' + id
				})
			},
			//购物车商品删除(单个)
			delGood(index, id, num) {
				let that = this
				uni.showModal({
						title: '提示',
						content: '确定删除该商品吗？',
						success: function(res) {
							if (res.confirm) {
								let list = JSON.stringify([id])
								let postData = {
									cart_list: list,
									act: 'delete',
									value: num
								}
								request.post('/api/cart/edit', postData).then(res => {
											if (res.code == 1) {
												that.dataList.splice(index, 1)
											}
								})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
		},
		//批量删除商品
		deleteMore() {
			let that = this
			let data = that.dataList
			if (data.length > 0) {
				uni.showModal({
					title: '提示',
					content: '确定这几个商品吗？',
					success: function(res) {
						if (res.confirm) {
							let list = JSON.stringify(that.ary)
							let postData = {
								cart_list: list,
								act: 'delete',
								value: 0
							}
							request.postRequest('/api/cart/edit', postData, data => {
								if (data.code == 1) {
									that.shopGoodList()
									that.ary = []
									that.totalNum = 0
									that.AllIcon = false
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			} else {
				uni.showToast({
					title: '还没有商品',
					duration: 2000,
					icon: 'none'
				})
			}

		},
		//点管理
		chickGl() {
			this.GlShow = false
			this.WCShow = true
		},
		//点完成
		chickWC() {
			this.GlShow = true
			this.WCShow = false
		},
		//去逛逛
		goIndex() {
			uni.navigateTo({
				url: '/pages/index/index'
			})
		}
	}
	}
</script>

<style>
	@import url("/common/shopping.css");

	.noData {
		text-align: center;
	}

	.noData image {
		width: 200rpx;
		height: 200rpx;
	}

	.noData .texts {
		font-size: 28rpx;
		color: #333;
	}

	.goBtn {
		width: 186rpx;
		background: linear-gradient(135deg, #ff4427, #ff793f);
		height: 60rpx;
		border-radius: 48rpx;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		font-size: 30rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.content {
		position: relative;
	}

	.active {
		color: #F85317;
		font-size: 20rpx;
	}

	.Noactive {
		color: #323233;
		font-size: 20rpx;
	}

	.one {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		padding-top: 12rpx;
	}
</style>