<template>
	<view class="replace">
		<view class="hint flexB" v-show="showHint">
			<view>
				<text class="store_icon icongonggao"></text>
				<text> 选择完尺码之后，可选择数量</text>
			</view>
			<text class="store_icon iconguanbi2" @click="showHint=false"></text>
		</view>
		<view class="user_info" v-if="hasOrder==1">
			<text>客户：</text>
			<text
				v-if="userInfo.nickname != userInfo.phone && userInfo.nickname">{{ userInfo.nickname | getName(10) }}</text>
			<text style="margin-left:15rpx;">{{ userInfo.phone }}</text>
		</view>
		<view class="new_user_info flexB" v-else>
			<view class="user_con">
				<view>
					<text>客户：{{ userInfo.nickname | getName(10) }}</text>
					<image src="../../static/imgs/shop/vip.png" class="vip_icon" v-if="newVip==1"></image>
				</view>
				<view>手机号:{{ userInfo.phone }}</view>
			</view>
			<view class="vip_btn flexCC" @click="setVip(isVip)" :class="newVip==0?'cancel_vip_btn':'set_vip_btn'">
				{{newVip==0?'升级VIP':'取消VIP'}}
			</view>
		</view>
		<view v-for="(item, goodsIdx) in skuList" :key="goodsIdx" class="goods_box">
			<view class="goods flexS">
				<image :src="item.img" class="goods_img"></image>
				<view class="goods_info">
					<view style="font-size:32rpx;font-weight:bold;">{{ item.name }}</view>
					<view class="price_box">
						<view class="goods_price flexS" v-if="isVip == 1">
							<view class="flexS">
								<view class="vip_ident">VIP</view>
								<text class="big_price">
									<text>¥</text>
									<text>{{ item.vip_price }}</text>
								</text>
							</view>
							<view class="draw_off">
								<text>（</text>
								<text class="old_price">
									<text class="symbol">¥</text>
									<text>{{ item.price }}</text>
								</text>
								<text>）</text>
							</view>
						</view>
						<view class="goods_price flexS" v-else>
							<view class="big_price">
								<text>¥</text>
								<text>{{ item.price }}</text>
							</view>
							<view class="save_box">VIP可省{{ Number(item.price) - Number(item.vip_price) || 0 }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="size">
				<view v-for="(val, key) in item.size" :key="key">
					<view class="size_con">
						<view class="type">{{ key }}:</view>
						<view class="size_box flexS">
							<view :class="temp.isChecked ? 'checked' : ''"
								@click="showSize(temp, goodsIdx, key, sizeIdx)" v-for="(temp, sizeIdx) in val"
								:key="sizeIdx">
								{{ temp.size }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="item.sku">
				<view class="num flexB" v-for="(alone, skuIdx) in item.sku" :key="skuIdx">
					<view class="box">{{ alone.type }}</view>
					<view class="box">{{ alone.size }}</view>
					<!-- <view style="color:#999">库存{{alone.num}}</view> -->
					<view class="count flexS">
						<view class="flexC" @click="down(goodsIdx, skuIdx, alone.new_num)">-</view>
						<input type="number" :value="alone.new_num" @input="getVal($event, goodsIdx, skuIdx,alone.num)"
							maxlength="3" />
						<view class="flexC" @click="up(goodsIdx, skuIdx, alone.new_num,alone.num)">+</view>
					</view>
					<text class="iconfont iconicon_huabanfuben" @click="delSku(goodsIdx, skuIdx, alone)"></text>
				</view>
			</view>
		</view>
		<view class="fixed_box">
			<view class="all flexS">
				<text class="gray">共{{ totalNum }}套，</text>
				<text>合计：</text>
				<text class="big_price">
					<text>¥</text>
					<text>{{ isVip == 1 ? vipPrice : totalPrice }}</text>
				</text>
				<view class="one_year" style="margin-left:15rpx;" v-if="isVip == 1">已省{{ totalPrice - vipPrice }}</view>
			</view>
			<view class="btn_con flexC" @click="placeOrder">立即下单</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsList,
		getSku,
		getUser,
		setVip,
		cancelVip
	} from '@/apis/shop.js';
	export default {
		data() {
			return {
				skuList: '',
				sku: [],
				isShare: '', // 1代表从分享过来
				user_id: '',
				isVip: '', //是否享受vip价格
				oldVip: '',
				newVip: '',
				checkSku: [], //选中的尺码
				userInfo: '', //用户信息
				hasOrder: 1, //0 没有订单  1 有订单
				showHint: true //显示提示弹窗
			};
		},
		onLoad(ops) {
			this.isShare = ops.isShare;
			this.user_id = ops.user_id;
			this.getSku(1);
		},
		onShow() {
			this.getUserInfo(this.user_id); //实时更新用户的vip状态
		},
		computed: {
			totalPrice() {
				let totalPrice = 0;
				if (this.skuList) {
					this.skuList.map(i => {
						i.sku.map(j => {
							if (j.isChecked) {
								totalPrice += j.new_num * i.price;
							}
						});
					});
				}
				return totalPrice;
			},
			vipPrice() {
				let vipPrice = 0;
				if (this.skuList) {
					this.skuList.map(i => {
						i.sku.map(j => {
							if (j.isChecked) {
								vipPrice += j.new_num * i.vip_price;
							}
						});
					});
				}
				return vipPrice;
			},
			totalNum() {
				let totalNum = 0;
				if (this.skuList) {
					this.skuList.map(i => {
						i.sku.map(j => {
							if (j.isChecked) {
								totalNum += j.new_num;
							}
						});
					});
				}
				return totalNum;
			}
		},
		methods: {
			//升级/取消vip
			setVip(type) {
				let http = type == 0 ? setVip : cancelVip;
				uni.showLoading({
					title: '加载中...'
				})
				http({
					user_id: this.user_id
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: type == 0 ? '升级成功' : '取消成功'
						})
						this.newVip = this.isVip = this.oldVip = type == 0 ? 1 : 0
					} else {
						uni.showModal({
							content: res.data || '操作失败',
							showCancel: false
						})
					}
					uni.hideLoading();
				}).catch(() => {
					uni.hideLoading();
				})
			},
			//获取代下单用户信息
			getUserInfo(user_id) {
				getUser({
					user_id
				}).then(res => {
					if (res.code == 200) {
						const {
							is_vip,
							has_order
						} = res.data;
						this.hasOrder = has_order;
						this.oldVip = this.isVip = this.newVip = is_vip;
						this.userInfo = res.data;
					} else {
						uni.showModal({
							content: res.data || '获取客户信息失败',
							showCancel: false
						});
					}
				});
			},
			/*获取尺码列表
			 *type  1代下单  2 分享
			 */
			getSku(type) {
				getSku({
					type
				}).then(res => {
					if (res.code == 200) {
						let list = res.data;
						for (let i = 0; i < list.length; i++) {
							this.$set(list[i], 'sku', []);
							let size = list[i].size;
							for (let key in size) {
								let arr = size[key];
								for (let j = 0; j < arr.length; j++) {
									this.$set(arr[j], 'new_num', 0);
									// arr[j].isChecked ? list[i].sku.push(arr[j]) : '';
								}
							}
						}
						this.skuList = list;
						console.log(list, 111)
					} else {
						uni.showModal({
							content: res.data,
							showCancel: fasle
						});
					}
				});
			},
			//判断是否享受Vip价格
			checkVip() {
				let list = this.skuList;
				list.map(i => {
					i.sku.map(j => {
						if (j.new_num > 0) {
							this.checkSku.push(j);
						}
					});
				});
				var num = '';
				if (this.checkSku.length == 1) {
					num = this.checkSku[0].new_num;
				}
				if (this.checkSku.length >= 2 || num >= 2) {
					this.isVip = 1;
				} else {
					this.isVip = 0;
				}
			},
			//单个尺码数量减减
			down(goodsIdx, skuIdx, num) {
				if (num == 0) {
					uni.showToast({
						title: '数量至少为1',
						icon: 'none'
					});
					return false;
				}
				this.skuList[goodsIdx].sku[skuIdx].new_num--;
				if (this.oldVip != 1) {
					this.checkSku = [];
					this.checkVip();
				}
			},
			//单个尺码数量加加
			up(goodsIdx, skuIdx, num, stock) {
				if (num >= 999) {
					uni.showToast({
						title: '超出最大下单数量',
						icon: 'none'
					})
					return false;
				}
				// if (num == stock) {
				// 	uni.showToast({
				// 		title: '超出库存数量',
				// 		icon: 'none'
				// 	})
				// 	return false;
				// }
				this.skuList[goodsIdx].sku[skuIdx].new_num++;
				if (this.oldVip != 1) {
					this.checkSku = [];
					this.checkVip();
				}
			},
			//获取添加的数量
			getVal(e, goodsIdx, skuIdx, stock) {
				// if (Number(e.detail.value) > Number(stock)) {
				// 	uni.showToast({
				// 		title: '超出库存数量',
				// 		icon: 'none'
				// 	})
				// 	return '';
				// }
				this.skuList[goodsIdx].sku[skuIdx].new_num = Number(e.detail.value);
				if (this.oldVip != 1) {
					this.checkSku = [];
					this.checkVip();
				}
			},
			//点击显示对应尺码
			showSize(temp, goodsIdx, key, idx) {
				temp.isChecked = !temp.isChecked;
				if (temp.isChecked) {
					this.skuList[goodsIdx].sku.push(temp);
				} else {
					//如果是取消则删除
					let list = this.skuList[goodsIdx].sku;
					for (let i = 0; i < list.length; i++) {
						list[i].id == temp.id ? list.splice(i, 1) : '';
					}
				}
			},
			//删除单个尺码
			delSku(goodsIdx, skuIdx, alone) {
				alone.isChecked = false;
				this.skuList[goodsIdx].sku.splice(skuIdx, 1);
			},
			//立即下单
			placeOrder() {
				let list = this.skuList;
				//判断是不是一个商品都没选中
				let arr = [];
				list.map(i => {
					i.sku.map(j => {
						if (j.new_num > 0) {
							arr.push(j);
						}
					});
				});
				if (arr.length == 0) {
					uni.showModal({
						content: '请至少选择一项',
						showCancel: false
					});
					return false;
				}
				uni.setStorageSync('order', list);
				uni.navigateTo({
					url: `../firm-order/firm-order?user_id=${this.user_id}`
				});
			}
		}
	};
</script>
<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		position: relative;
		background: #F9F9FB;
	}
</style>
<style lang="scss" scoped>
	.user_info {
		width: 100%;
		height: 89rpx;
		line-height: 89rpx;
		background: #fff;
		margin-bottom: 20rpx;
		padding: 0 30rpx;

		text {
			font-size: 30rpx;
			font-weight: bold;
		}
	}


	.new_user_info {
		width: 100%;
		height: 120rpx;
		background: #fff;
		margin-bottom: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		.user_con {
			.vip_icon {
				width: 88rpx;
				height: 36rpx;
				margin-left: 10rpx;
			}

			view {
				font-size: 30rpx;
				font-weight: bold;
			}

			view:first-child {
				margin-bottom: 15rpx;
			}
		}

		.vip_btn {
			width: 150rpx;
			height: 66rpx;
			border-radius: 8rpx;
			font-size: 32rpx;
		}

		.set_vip_btn {
			background: linear-gradient(266deg, #66647A 0%, #404146 100%);
			color: #FBF4CB;
		}

		.cancel_vip_btn {
			background: linear-gradient(273deg, #FFAA01 0%, #FE0000 100%);
			color: #fff;
		}
	}

	.price_box {
		margin-top: 20rpx;

		.goods_price {
			.vip_ident {
				width: 56rpx;
				height: 40rpx;
				background: linear-gradient(226deg, #66647a 0%, #404146 100%);
				border-radius: 4rpx;
				font-size: 28rpx;
				color: #fcf7c0;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 10rpx;
			}

			.old_price {
				text-decoration: line-through;
				font-size: 28rpx;
				font-weight: 500;
			}

			.draw_off {
				text {
					color: #999;
				}
			}

			.symbol {
				font-size: 28rpx;
			}

			.price {
				font-weight: 600;
				font-size: 36rpx;

				text {
					color: $base-color;
				}
			}

			.vip {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}

			.vip_active {
				font-size: 36rpx;
				font-weight: bold;

				text {
					color: $base-color;
				}
			}

			.vip_img {
				width: 88rpx;
				height: 36rpx;
				vertical-align: -6rpx;
				margin-right: 10rpx;
			}
		}
	}

	.replace {
		padding-bottom: 220rpx;
		overflow-x: hidden;

		.hint {
			width: 100%;
			height: 86rpx;
			background: #FCF7C0;
			padding: 0 30rpx;
			box-sizing: border-box;

			text {
				font-size: 30rpx;
				color: #FF6400;

			}

			.icongonggao {
				margin-right: 20rpx;
			}

			.iconguanbi2 {
				font-size: 45rpx;
				font-weight: bold;
			}

			.iconfont {
				font-size: 40rpx;
				vertical-align: -2rpx;
			}
		}
	}

	.goods_box {
		background: #fff;
		margin-bottom: 20rpx;
		padding: 30rpx 24rpx;
		box-sizing: border-box;

		.goods {
			margin-bottom: 30rpx;

			.goods_img {
				width: 180rpx;
				height: 144rpx;
				margin-right: 15rpx;
				border-radius: 8rpx;
				flex-shrink: 0;
			}

			.goods_info {
				flex: 1;

				.total {
					margin-top: 30rpx;

					text:last-child {
						font-size: 48rpx;
					}
				}
			}
		}
	}

	.size {
		.size_con {
			margin-bottom: 20rpx;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;

			.type {
				flex-shrink: 0;
			}
		}

		.size_box {
			flex-wrap: wrap;

			view {
				width: 104rpx;
				text-align: center;
				line-height: 48rpx;
				height: 48rpx;
				border-radius: 24rpx;
				margin-left: 20rpx;
				border: 2rpx solid #eeeeee;
				margin-bottom: 14rpx;
				font-size: 28rpx;
			}

			.checked {
				background: #fff4f3;
				border: 2rpx solid $base-color;
				color: $base-color;
			}
		}
	}

	.num {
		margin-bottom: 20rpx;

		.count {
			width: 220rpx;
			height: 64rpx;
			background: #fff4f3;
			border: 2px solid $base-color;
			border-radius: 16rpx;
			overflow: hidden;

			input {
				border-left: 1rpx solid $base-color;
				border-right: 1rpx solid $base-color;
				height: 100%;
				width: 40%;
				text-align: center;
			}

			view {
				color: $base-color;
				width: 30%;
				font-size: 44rpx;
				flex-shrink: 0;
			}
		}

		.box {
			background: #f5f5f5;
			width: 112rpx;
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			border-radius: 8rpx;
		}

		.iconfont {
			font-size: 40rpx;
			color: $base-color;
			font-weight: bold;
		}
	}

	.fixed_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 9999;

		.all {
			width: 100%;
			height: 88rpx;
			border-bottom: 1rpx solid #eee;
			padding: 0 30rpx;
			background-color: #fff;
		}

		.btn_con {
			background: $base-line-bg;
			height: 100rpx;
			font-size: 32rpx;
			color: #fff;
		}
	}
</style>
