<template>
	<view class="head-head">
		<view class="head" v-if="list.length">
			<view class="status df aic jcsb">
				<div></div>
				<div v-if="status == 'manage'" @click="status = 'accomplish'">管理</div>
				<div v-if="status == 'accomplish'" @click="status = 'manage'">完成</div>
			</view>

			<view v-if="status == 'accomplish'" class="botom df aic" style="justify-content: space-between;">
				<view style="display: flex;">
					<image v-if="arrmn" :src="$util.img(`/upload/weapp/user/gou.png`)" mode="" @click="Select"></image>
					<image v-else :src="$util.img(`/upload/weapp/user/un_gou.png`)" mode="" @click="selected"></image>
					<div class="botom-Select">全选</div>
					<div class="time">
						已选
						<span>{{ listlength }}</span>
						件商品
					</div>
				</view>
				<!-- <div class="df aic jcsa add" @click="btnType('add')">加入购物车</div> -->
				<div class="df aic jcsa delete" @click="btnType('del')">删除</div>
			</view>
		</view>
		<mescroll-uni @getData="getList" class="member-point" ref="mescroll" top="68">
			<view slot="list" class="list">
				<block v-if="list.length">
					<view class="list-bq df aic" v-for="(item, index) in list" :key="index" @click="goodsDetail(item)">
						<div class="ima-one" v-show="status == 'accomplish'" @click.stop="checkChange(index)">
							<image v-if="item.changer" :src="$util.img(`/upload/weapp/user/gou.png`)" mode=""></image>
							<image v-else :src="$util.img(`/upload/weapp/user/un_gou.png`)" mode=""></image>
						</div>
						<div class="ima-two">
							<image :src="$util.img(item.goods_image)" mode=""></image>
						</div>
						<div class="text-shiu">
							<div class="name">{{ item.goods_name }}</div>
							<div class="df production-sex">
								<div class="production">产地：{{ item.address }}</div>
								<div class="sex">
									原价：
									<span style="color: red;">￥{{ item.price }}</span>
								</div>
							</div>
							<div class="df aic jcsb number-time">
								<div class="number">商品编号：{{ item.goods_code }}</div>
								<!-- <div class="time"></div> -->
							</div>
						</div>
					</view>
				</block>
				<block v-else>
					<view class="cart-empty"><ns-empty :isIndex="Boolean(token)"></ns-empty></view>
				</block>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	export default {
		data() {
			//manage  管理   accomplish完成
			return {
				token: uni.getStorageSync('token'),
				status: 'manage',
				arrmn: false,
				listlength: 0,
				list: [],
				selectList: [],
				isStock: false,
				isStockName: '',

			};
		},

		onShow() {},
		methods: {
			getList(mescroll) {
				this.list = [];
				this.$api.sendRequest({
					url: '/api/goodscollect/page',
					data: {
						page_size: mescroll.size,
						page: mescroll.num
					},
					success: res => {
						res.data.list.forEach(item => {
							item.changer = false;
							this.$api.sendRequest({
								url: '/api/goodssku/detail',
								data: {
									goods_id: item.goods_id
								},
								success: v => {
									console.log(v);
									let { address, goods_code, stock } = {
										...v.data
										.goods_sku_detail
									};
									item.address = address ? address : '-';
									item.goods_code = goods_code;
									item.stock = stock;

									this.list.push(item);
								}
							});
						});
					}
				});
			},
			Select() {
				this.arrmn = false;
				this.listlength = 0;
				this.list.forEach(arr => {
					arr.changer = false;
				});
			},
			// 全选
			selected() {
				this.arrmn = true;
				this.list.forEach(arr => {
					arr.changer = true;
				});
				this.listlength = this.list.length;
			},
			checkChange(index) {
				this.list[index].changer = !this.list[index].changer;
				let array = [];
				this.list.forEach(item => {
					if (item.changer == true) {
						array.push(item);
					}
				});
				this.listlength = array.length;
				if (!this.listlength) {
					this.arrmn = false;
				}
			},

			btnType(type) {
				this.isStock = false;
				this.isStockName = '';
				this.isMax_buy = false;
				this.Max_buy = -1;
				let array = [];
				this.list.forEach(item => {
					if (item.stock == 0) {
						this.isStock = true;
						this.isStockName = item.goods_name
					}

					if (item.changer) {
						array.push(item);
					}
				});



				if (type == 'add') {
					if (this.isStock) {
						this.$util.showToast({
							title: `${this.isStockName}库存不足`,
							icon: 'none'
						});
						return;
					}
					array.forEach(item => {

						this.$api.sendRequest({
							url: '/api/cart/add',
							data: {
								sku_id: item.sku_id,
								num: item.min_buy ? item.min_buy : 1
							},
							success: res => {
								this.$util.showToast({
									title: '加入购物车成功'
								});
							}
						});
					});

				} else if (type == 'del') {
					array.forEach(item => {

						this.$api.sendRequest({
							url: '/api/goodscollect/delete',
							data: {
								goods_id: item.goods_id
							},
							success: res => {
								this.getList({ size: 10, num: 1 });
							}
						});
					});
					this.$util.showToast({
						title: '删除成功'
					});
				}
			},

			goodsDetail(item) {
				uni.navigateTo({
					url: '/page_goods/detail/detail?goods_id=' + item.goods_id
				});
			},
			toLogin() {
				this.$refs.login.open();
			}
		}
	};
</script>

<style scoped lang="scss">
	.head-head {
		width: 100%;
		height: 100%;
		background-color: rgb(247, 247, 247);

		.list {
			width: 95%;
			margin: 0 auto;

			.list-bq {
				padding: 32rpx 26rpx;
				box-sizing: border-box;
				background: #ffffff;
				border-radius: 24rpx;
				margin-top: 24rpx;

				.ima-one {
					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.ima-two {
					width: 176rpx;
					height: 176rpx;
					border-radius: 8rpx;
					margin: 0 24rpx;

					image {
						width: 176rpx;
						height: 176rpx;
						border-radius: 8rpx;
					}
				}

				.text-shiu {
					.name {
						width: 390rpx;
						height: 76rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
						line-height: 40rpx;
					}

					.production-sex {
						margin-top: 16rpx;

						.production {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
						}

						.sex {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
							margin-left: 50rpx;
						}
					}

					.number-time {
						margin-top: 16rpx;

						.number {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
						}

						.time {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
						}
					}
				}
			}
		}

		/deep/.cart-empty {
			.button {
				color: #fff !important;
				background-color: #007aff !important;
			}
		}
	}

	.head {
		padding: 24rpx;
		box-sizing: border-box;

		.botom {
			width: 100%;
			height: 88rpx;
			background: #ffffff;
			z-index: 10;
			position: fixed;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 48rpx;
			}

			.botom-Select {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 34rpx;
				margin-left: 16rpx;
			}

			.time {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
				margin-left: 16rpx;

				span {
					color: #f08433;
					margin: 0 6rpx;
				}
			}

			.add {
				width: 200rpx;
				height: 72rpx;
				border-radius: 40rpx;
				border: 2rpx solid #e8e8e8;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				margin-left: 38rpx;
			}

			.delete {
				width: 160rpx;
				height: 50rpx;
				border-radius: 40rpx;
				border: 2rpx solid #f33b50;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #f33b50;
				line-height: 50rpx;
				margin-right: 16rpx;
			}
		}

		.status {
			div {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
			}
		}
	}
</style>