<template>
	<!-- 一行两个 -->
	<view class="directionItem">
		<view class="cover-box" @click="click">
			<view class="cover1"><img :src="item[coverName]" /></view>

			<!-- <view class="sales">销量：{{ item.sale_num }}</view> -->
		</view>
		<view class="content">
			<view class="title" @click="click">{{ item.goods_name }}</view>
			<!-- 客户需要修改 只有名字 -->
			<view class="labels-1" @click="click">
				<view class="label-item">产地：{{ item.address }}</view>
				<view class="label-item">规格：{{ item.spec_name||'-' }}</view>
				<view class="label-item" v-if=" item.execu_content">执行标准：{{ item.execu_content.title }}</view>
				<view class="label-item">生产企业：{{ item.business }}</view>
			</view>

			<view class="bottom" v-if="userInfo.show_price && token">
				<view class="price">
					¥
					<text class="price1">
						{{
							parseFloat(showPrice(item))
								.toFixed(2)
								.split('.')[0]
						}}
					</text>
					.
					<text>
						{{
							parseFloat(showPrice(item))
								.toFixed(2)
								.split('.')[1]
						}}
					</text>
					/{{ item.unit ? item.unit : '件' }}
				</view>
				<view class="numBox">
					<div class="tag">
						<div v-if="item.label_name">{{ item.label_name }}</div>
					</div>
					<div class="btn" v-if="item.stock">
						<view slot="minus" class="minus" @click="numChange(item, 'minus')">
							<u-icon name="minus-circle-fill" size="20" color="var(--base-color)"></u-icon>
						</view>
						<!-- <input
							slot="input"
							type="number"
							style="width: 28px;text-align: center;"
							class="input"
							v-model="item.cart_num || 0"
							@input="inputBlur"
							@click="btn"
							@blur="(id)=>(btn1(item.sku_id,id))"
						/> -->
						<!-- @confirm="inputBlur($event, item)" -->
						<view class="df aic jcsa" style="margin:0 24rpx;" @click="focus(item)">
							{{ item.cart_num || 0 }}
						</view>
						<view slot="plus" class="minus" @click="numChange(item, 'add')">
							<u-icon name="plus-circle-fill" size="20" color="var(--base-color)"></u-icon>
						</view>
					</div>
					<div class="btn" v-else>
						<div>库存不足</div>
					</div>
				</view>
			</view>
		</view>
		<u-loading-page :loading="loading"></u-loading-page>
		<!-- <view 	v-if="goods_Item_Detail"> -->
		<uni-popup ref="skuPopup" type="bottom" class="sku-layer" v-if="goods_Item_Detail">
			<view class="sku-info">
				<view class="header">
					<view class="img-wrap" @click="previewMedia()">
						<image :src="$util.img(goods_Item_Detail.sku_image, { size: 'mid' })" mode="aspectFit" />
					</view>

					<view class="main">
						<view class="goods_name">{{ goods_Item_Detail.goods_name }}</view>
						<view class="price-wrap">
							<text class="unit price-style small">￥</text>

							<block>
								<text class="price price-style large">
									{{
										parseFloat(showPrice(goods_Item_Detail))
											.toFixed(2)
											.split('.')[0]
									}}
								</text>

								<text class="unit price-style small">
									.{{
										parseFloat(showPrice(goods_Item_Detail))
											.toFixed(2)
											.split('.')[1]
									}}
								</text>
							</block>
						</view>
						<view class="stock">
							<block v-if="goods_Item_Detail.stock_show">
								库存{{ goods_Item_Detail.stock }}
							</block>
						</view>
					</view>

					<view class="sku-close iconfont icon-close" @click="closeSkuPopup()"></view>
				</view>

				<view class="body-item">
					<scroll-view scroll-y class="wrap">
						<view class="number-wrap">
							<view class="number-line">
								<text class="title font-size-base">购买数量</text>
								<text class="limit-txt color-base-text" v-if="limitNumber > 0">
									(每人限购{{ limitNumber }}件)
								</text>
								<text v-if="
										goods_Item_Detail.maxBuy > 0 && goods_Item_Detail.minBuy > 1
									" class="limit-txt color-base-text">
									({{ goods_Item_Detail.minBuy }}件起售，限购{{
										goods_Item_Detail.maxBuy
									}}件)
								</text>
								<text v-else-if="goods_Item_Detail.maxBuy > 0" class="limit-txt color-base-text">
									(限购{{ goods_Item_Detail.maxBuy }}件)
								</text>
								<text v-else-if="goods_Item_Detail.minBuy > 1" class="limit-txt color-base-text">
									({{ goods_Item_Detail.minBuy }}件起售)
								</text>
								<view class="number">
									<button type="default" class="decrease color-line-border"
										:class="{ disabled: decreaseDisabled }" @click="changeNum('-')">
										-
									</button>
									<input id="tet" type="number"
										class="uni-input color-line-border font-size-goods-tag" disabled="true"
										v-model="number" placeholder="0" />

									<button type="default" class="increase color-line-border"
										:class="{ disabled: increaseDisabled }" @click="changeNum('+')">
										+
									</button>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<u-number-keyboard mode="number" @change="change" :dotDisabled="true"
					@backspace="backspace"></u-number-keyboard>

				<view class="footer">
					<button type="primary" v-if="goods_Item_Detail.stock" @click="confirm()">
						加入购物车
					</button>

					<button type="primary" v-else disabled="true">库存不足</button>
				</view>
			</view>
		</uni-popup>
		<!-- </view> -->
	</view>
</template>

<script>
	import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
	import { mapGetters } from 'vuex';
	export default {
		components: { nsGoodsSku },
		name: 'directionGoodsItem',
		props: {
			item: {
				default: () => {}
			},
			pageUrlName: {
				default: ''
			},
			coverName: {
				default: 'cover'
			}
		},
		data() {
			return {
				token: uni.getStorageSync('token'),
				goodsSkuDetail: {
					goods_id: 0,
					goods_service: []
				},
				goods_name: '',
				discount_price: '',
				sku_id: '',
				unit: '',
				stock: Number,
				goods_image: '',
				number: 1,
				limitNumber: 0, // 限购
				minNumber: 0,
				goods_Item_Detail: {},
				loading: false,
				keyboardShow: true,
				pageName: "",
			};
		},
		computed: {
			...mapGetters(['userInfo']),
			decreaseDisabled: function() {
				let min = this.goods_Item_Detail.minBuy > 0 ? this.goods_Item_Detail.minBuy : 1;
				return this.goods_Item_Detail.number <= min;
			},
			increaseDisabled: function() {
				let max =
					this.goods_Item_Detail.maxBuy > 0 &&
					this.goods_Item_Detail.maxBuy < this.goods_Item_Detail.stock ?
					this.goods_Item_Detail.maxBuy :
					this.goods_Item_Detail.stock;
				return this.goods_Item_Detail.number >= max;
			},
			skuHeight() {
				let height = 48;
				if (this.goods_Item_Detail) {
					if (
						this.goods_Item_Detail.goods_spec_format &&
						this.goods_Item_Detail.goods_spec_format.length
					) {
						height = 51 + this.goods_Item_Detail.goods_spec_format.length * 9.5;
					}
				}
				height += 'vh';
				return height;
			},

		},
		watch: {
			pageUrlName(e) {
				this.pageName = e;
			},
		},
		mounted() {
			this.number = this.item.cart_num;
		},
		methods: {
			change(e) {
				if (!this.number) {
					this.number = e;
				} else {
					this.number = this.number + String(e);
				}

			},
			backspace() {
				let str = String(this.number);
				str = str.slice(0, -1);
				this.number = str;
			},
			focus(item) {
				this.number = item.cart_num;
				uni.hideKeyboard();
				this.getGoodsItem(item);
				uni.removeStorageSync('buyer_message');
			},
			getGoodsItem(item) {
				this.loading = true;
				this.$api.sendRequest({
					url: '/api/goodssku/detail',
					data: {
						goods_id: item.goods_id
					},
					success: res => {
						this.goods_Item_Detail = res.data.goods_sku_detail;
						this.goods_Item_Detail.goods_spec_format = JSON.parse(
							res.data.goods_sku_detail.goods_spec_format
						);
						this.goods_Item_Detail.number = item.cart_num;
						this.$refs.skuPopup.open();
						uni.$emit('cartBottomShow', false);
						this.loading = false;
					}
				});
			},

			click() {
				this.$emit('click', this.item);
			},
			goodsTag(data) {
				return data.label_name || '';
			},
			showPrice(data) {
				let price = data.discount_price;
				if (data.member_price && parseFloat(data.member_price) < parseFloat(price))
					price = data.member_price;
				return price;
			},
			numChange(item, type) {
				console.log(item);
				if (item.max_buy) {
					// is_limit 是否限购  limit_type限购类型 1单次 2长期
					if (item.is_limit && item.limit_type == 1) {
						if (item.cart_num >= item.max_buy && type == "add") {
							this.$util.showToast({
								title: `每人限购${item.max_buy}件`
							});
							return
						}


					} else if (item.is_limit && item.limit_type == 2) {
						if (item.purchased_num >= item.max_buy) {
							this.$util.showToast({
								// title: `每人长期限购${item.max_buy}件，您已购买${item.purchased_num}件`
								title: `每人长期限购${item.max_buy}件`
							});
							return
						}
					}
				}
				if (type == 'add') {
					if (item.cart_num >= item.stock) {
						this.$util.showToast({
							title: '库存不足'
						});
						return;
					}
				}






				// if (item.max_buy) {
				// 	if (item.purchased_num >= item.max_buy) {
				// 		this.$util.showToast({
				// 			title: `每人限购${item.max_buy}件，您已购买${item.purchased_num}件`
				// 		});
				// 		return
				// 	}
				// }



				item.cart_num = Number(item.cart_num);
				let setp = 1;
				item.cart_num ? item.cart_num : (item.cart_num = 0);
				if (type == 'minus' && !item.cart_num) {
					return;
				}
				if (!item.cart_num || item.is_multiple) {
					setp = item.min_buy || 1;
				} else {
					if (type == 'add') {
						setp = item.cart_num >= item.min_buy ? 1 : item.min_buy;
					} else {
						setp = item.cart_num == item.min_buy ? item.min_buy : 1;
					}
				}
				type == 'add' ? (item.cart_num += setp) : (item.cart_num -= setp);


				console.log(item);
				console.log(item.cart_num);
				this.$api.sendRequest({
					url: '/api/cart/add',
					data: {
						num: item.cart_num,
						sku_id: item.sku_id,
						is_all: 1
					},
					success: ({ data }) => {
						if (data > 0) {
						  if (type == 'add'){
                this.$util.showToast({
                  title: '加入购物车成功'
                });
              }else{
                this.$util.showToast({
                  title: '移除购物车成功'
                });
              }

							this.$forceUpdate();
							this.cartNumber += this.number;
							if (this.callback) this.callback();
							this.$store.dispatch('getCartNumber');
							// uni.$emit('refresh', true);
						}

					}
				});
			},
			//查看规格图片
			previewMedia() {
				var paths = [];
				paths.push(
					this.$util.img(this.goods_Item_Detail.sku_image)
				);
				uni.previewImage({
					current: 1,
					urls: paths
				});
			},
			closeSkuPopup() {
				this.number = this.item.cart_num;
				this.$refs.skuPopup.close();
				uni.$emit('cartBottomShow', true);
			},
			changeNum(tag) {

				if (this.goods_Item_Detail.max_buy) {
					// is_limit 是否限购  limit_type限购类型 1单次 2长期
					if (this.goods_Item_Detail.is_limit && this.goods_Item_Detail.limit_type == 1) {
						if (this.goods_Item_Detail.number >= this.goods_Item_Detail.max_buy && tag == "+") {
							this.$util.showToast({
								title: `每人限购${this.goods_Item_Detail.max_buy}件`
							});
							return
						}


					} else if (this.goods_Item_Detail.is_limit && this.goods_Item_Detail.limit_type == 2) {
						if (this.goods_Item_Detail.purchased_num >= this.goods_Item_Detail.max_buy) {
							this.$util.showToast({
								// title: `每人长期限购${this.goods_Item_Detail.max_buy}件，您已购买${this.goods_Item_Detail.purchased_num}件`
								title: `每人长期限购${this.goods_Item_Detail.max_buy}件`
							});
							return
						}
					}
				}


				if (this.goods_Item_Detail.stock == 0) return;
				var min = 1;
				var stock = this.goods_Item_Detail.stock;

				if (this.maxBuy == 1) {
					stock = 1;
				}

				if (this.goods_Item_Detail.is_limit == 1 && this.maxBuy > 0 && this.maxBuy < stock)
					stock = this.maxBuy;

				if (
					this.goods_Item_Detail.is_limit == 1 &&
					this.goods_Item_Detail.limit_type == 2 &&
					this.maxBuy > 0 &&
					this.goods_Item_Detail.purchased_num > 0
				) {
					let maxBuy = this.maxBuy - this.goods_Item_Detail.purchased_num;
					stock =
						maxBuy < this.goods_Item_Detail.stock ? maxBuy : this.goods_Item_Detail.stock;
				}

				if (this.minBuy > 1) {
					min = this.minBuy;
				}

				if (tag == '+') {
					// 加
					if (this.number < stock) {
						this.number++;
					} else {
						if (this.number >= this.goods_Item_Detail.stock) {
							this.$util.showToast({
								title: '库存不足'
							});
							return;
						}

						if (this.goods_Item_Detail.is_limit == 1 && this.maxBuy > 0) {
							if (this.goods_Item_Detail.limit_type == 1) {
								this.$util.showToast({
									title: '该商品每次最多购买' + this.maxBuy + this.goods_Item_Detail.unit
								});
								return;
							}

							if (this.goods_Item_Detail.limit_type == 2) {
								let message =
									'该商品每人限购' + this.maxBuy + this.goods_Item_Detail.unit;
								message +=
									this.goods_Item_Detail.purchased_num > 0 ?
									'，您已购买了' +
									this.goods_Item_Detail.purchased_num +
									this.goods_Item_Detail.unit :
									'';
								this.$util.showToast({
									title: message
								});
								return;
							}
						}

						if (
							this.type == 'seckill' &&
							this.goods_Item_Detail.seckill_id &&
							this.goods_Item_Detail.num > 0
						) {
							this.$util.showToast({
								title: '该商品每人限购' +
									this.goods_Item_Detail.num +
									this.goods_Item_Detail.unit
							});
							return;
						}

						if (
							this.type == 'presale' &&
							this.goods_Item_Detail.presale_id &&
							this.goods_Item_Detail.presale_num > 0
						) {
							this.$util.showToast({
								title: '该商品每人限购' +
									this.goods_Item_Detail.presale_num +
									this.goods_Item_Detail.unit
							});
							return;
						}
					}
				} else if (tag == '-') {
					// 减
					if (this.number > min) {
						this.number -= 1;
					} else {
						if (this.minBuy > 1) {
							this.$util.showToast({
								title: '该商品' + this.minBuy + '件起售'
							});
						}
						return;
					}
				}
				if (this.number > this.limitNumber && this.limitNumber) {
					this.number = this.limitNumber;
				}
			},

			//输入数量
			keyInput(flag, callback) {
				setTimeout(() => {
					var stock = this.goods_Item_Detail.stock;

					// 库存为0
					if (this.goods_Item_Detail.stock == 0) {
						this.number = 0;
						return;
					}

					// 防止空
					if (flag && this.number.length == 0) this.number = 1;

					// 防止输入0和负数、非法输入
					if (flag && (this.number <= 0 || isNaN(this.number))) this.number = 1;

					if (this.number > stock) {
						this.number = stock;
					}
					// 商品起售数
					if (this.minBuy > 1 && this.number < this.minBuy) {
						this.number = this.minBuy;
					}

					if (flag) this.number = parseInt(this.number);
					if (callback) callback();
				}, 0);
			},

			//提交
			confirm() {


				// 删除待付款物流方式缓存
				uni.removeStorageSync('delivery');
				if (this.preview) {
					this.$util.showToast({
						title: '预览商品无法购买'
					});
					return;
				}

				if (!uni.getStorageSync('token')) {
					this.$refs.login.open();
					return;
				}

				//纠正数量
				this.keyInput(true, () => {
					if (this.goods_Item_Detail.stock == 0) {
						this.$util.showToast({
							title: '商品已售罄'
						});
						return;
					}

					if (this.number.length == 0 || this.number <= 0) {
						this.$util.showToast({
							title: '购买数量不能小于等于0'
						});
						return;
					}

					if (this.goods_Item_Detail.buy_num > this.goods_Item_Detail.stock) {
						this.$util.showToast({
							title: '库存小于最低购买数量'
						});
						return;
					}

					if (this.number > this.goods_Item_Detail.stock) {
						this.$util.showToast({
							title: '库存不足'
						});
						return;
					}

					if (
						this.goods_Item_Detail.is_limit == 1 &&
						this.goods_Item_Detail.limit_type == 1 &&
						this.maxBuy > 0 &&
						this.number > this.maxBuy
					) {
						this.$util.showToast({
							title: '该商品每次最多购买' + this.maxBuy + this.goods_Item_Detail.unit
						});
						return;
					}

					if (
						this.goods_Item_Detail.is_limit == 1 &&
						this.goods_Item_Detail.limit_type == 2 &&
						this.maxBuy > 0 &&
						this.number + this.goods_Item_Detail.purchased_num > this.maxBuy
					) {
						let message = '该商品每人限购' + this.maxBuy + this.goods_Item_Detail.unit;
						message +=
							this.goods_Item_Detail.purchased_num > 0 ?
							'，您已购买了' +
							this.goods_Item_Detail.purchased_num +
							this.goods_Item_Detail.unit :
							'';
						this.$util.showToast({
							title: message
						});
						return;
					}

					if (
						this.type == 'join_cart' &&
						this.goods_Item_Detail.is_limit == 1 &&
						this.maxBuy > 0 &&
						this.cartNumber + this.number > this.maxBuy
					) {
						this.$util.showToast({
							title: '该商品每人限购' + this.maxBuy + this.goods_Item_Detail.unit
						});
						return;
					}

					if (this.goods_Item_Detail.max_buy) {
						if (this.goods_Item_Detail.purchased_num >= this.goods_Item_Detail.max_buy) {
							this.$util.showToast({
								// title: `每人限购${this.goods_Item_Detail.max_buy}件，您已购买${this.goods_Item_Detail.purchased_num}件`
							});
							return
						}
					}


					if (this.goods_Item_Detail.max_buy) {
						// is_limit 是否限购  limit_type限购类型 1单次 2长期
						if (this.goods_Item_Detail.is_limit && this.goods_Item_Detail.limit_type == 1) {
							if (this.number > this.goods_Item_Detail.max_buy) {
								this.$util.showToast({
									title: `每人限购${this.goods_Item_Detail.max_buy}件`
								});
								return
							}


						} else if (this.goods_Item_Detail.is_limit && this.goods_Item_Detail.limit_type == 2) {
							if (this.goods_Item_Detail.purchased_num >= this.goods_Item_Detail.max_buy) {
								this.$util.showToast({
									// title: `每人长期限购${this.goods_Item_Detail.max_buy}件，您已购买${this.goods_Item_Detail.purchased_num}件`
									title: `每人长期限购${this.goods_Item_Detail.max_buy}件`
								});
								return
							}
						}
					}



					if (this.btnSwitch) return;
					this.btnSwitch = true;

					this.$api.sendRequest({
						url: '/api/cart/add',
						data: {
							sku_id: this.goods_Item_Detail.sku_id,
							num: this.number,
							is_all: 1
						},
						success: res => {
							var data = res.data;
							if (data > 0) {
								this.$util.showToast({
									title: '加入购物车成功'
								});
								this.cartNumber += this.number;
								if (this.callback) this.callback();
								this.$store.dispatch('getCartNumber');
							}

							// uni.$emit('refresh', true);

							this.$refs.skuPopup.close();
							this.btnSwitch = false;
						},
						fail: res => {
							this.$refs.skuPopup.close();
							this.btnSwitch = false;
						}
					});
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.box {
		margin-bottom: 20rpx;
	}

	.head {
		width: 750rpx;
		height: 740rpx;
		background: #ffffff;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		// z-index: 999;
		padding: 46rpx 48rpx;
		box-sizing: border-box;
		position: relative;

		.img {
			image {
				width: 160rpx;
				height: 160rpx;
			}
		}

		.imgtwo {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.mlentc {
			margin-left: 24rpx;
		}

		.guige {
			margin-top: 16rpx;
			color: #999;
			text-align: center;

			span {
				color: #000;
			}
		}

		.xuxian {
			width: 100%;
			border: 1rpx solid #ccc;
			margin: 16rpx 0;
		}

		.danwei {
			width: 200rpx;
			border: 1rpx solid rgb(54, 171, 255);
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			margin-top: 16rpx;
			color: rgb(54, 171, 255);
		}

		.goumai {
			margin-top: 40rpx;

			.one {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.two {
				width: 60rpx;
				height: 40rpx;
				text-align: center;
				border: 1rpx solid #ccc;
				margin: 0 12rpx;
			}

			.sui {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.add {
			width: 686rpx;
			height: 80rpx;
			background: #21bbf3;
			border-radius: 40rpx;
			position: absolute;
			bottom: 24rpx;
			color: #fff;
		}
	}

	.directionItem {
		width: 48%;
		/* #ifdef MP-WEIXIN */
		width: 100%;
		/* #endif */
		background-color: #fff;
		margin-bottom: 30rpx;
		padding: 5rpx;
		line-height: 40rpx;
		border-radius: 16rpx;

		.cover-box {
			width: 100%;
			position: relative;

			.cover1 {
				width: 44vw;
				height: 44vw;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;

				img {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
					object-fit: cover;
				}
			}

			.sales {
				// top: calc(320rpx - 44rpx);
				bottom: 0rpx;
				width: 100%;
				position: absolute;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 44rpx;
				background-color: rgba(0, 0, 0, 0.4);
			}
		}

		.content {
			margin-top: 20rpx;
			padding: 0 20rpx;

			.title {
				// max-height: 80rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.labels-1 {
				margin-top: 10rpx !important;

				.label-item {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					font-size: 28rpx !important;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999 !important;
					line-height: 40rpx !important;
				}
			}

			.price {
				// height: 104rpx;
				font-size: 28rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #f33b50;

				.price1 {
					font-size: 34rpx;
				}
			}

			.origin {
				margin-top: 10rpx;
			}

			.bottom {
				// display: flex;
				// align-items: center;
				// justify-content: space-between;

				.numBox {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;

					.tag {
						width: 28px;
						height: 20px;

						div {
							font-size: 30rpx;
							text-align: center;
							line-height: 20px;
							color: #f33b50;
							background: #f33b5078;
							border-radius: 10rpx;
						}
					}

					.btn {
						display: flex;
						align-items: ceter;
						font-weight: normal;
						float: right;

						/deep/ .u-icon__icon {
							font-size: 50rpx !important;
						}

						.input-number {
							line-height: 30rpx;
						}
					}
				}
			}
		}
	}

	.sku-layer {

		.sku-info {
			max-height: 75vh;
			height: 65vh;
			position: relative;

			.header {
				padding: 30rpx 30rpx 20rpx 210rpx;
				position: relative;
				border-bottom: 2rpx solid $color-line;
				min-height: 170rpx;

				.img-wrap {
					width: 160rpx;
					height: 160rpx;
					position: absolute;
					left: 20rpx;
					border-radius: $border-radius;
					overflow: hidden;
					padding: 2rpx;
					background-color: #fff;
					line-height: 208rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.main {
				font-size: 24rpx;
				line-height: 40rpx;
				padding-right: 40rpx;

				.price-wrap {
					font-weight: bold;

					.unit {
						margin-right: 4rpx;
					}
				}

				.stock {
					font-size: $font-size-tag;
					color: $color-tip;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					height: 70rpx;
					overflow: hidden;
				}

				.price {
					word-wrap: break-word;
				}

				.goods_name {
					font-size: 30rpx;
					font-weight: 600;
				}

				.sku-name {
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					height: 42rpx;

					.spec-value {
						&::after {
							content: '/';
						}

						&:last-child {
							&::after {
								content: '';
							}
						}
					}
				}
			}

			.sku-close {
				position: absolute;
				top: 20rpx;
				right: 40rpx;
				width: 40rpx;
				height: 80rpx;
				font-size: 40rpx;
			}
		}

		.body-item {
			padding: 0 30rpx;
			height: 120rpx;
			box-sizing: border-box;
			overflow: scroll;

			.wrap {
				height: 120rpx;
			}

			.sku-list-wrap {
				padding-bottom: 0rpx;

				.title {
					padding: 20rpx 0;
					display: block;
				}
			}

			.items {
				position: relative;
				display: inline-block;
				border: 2rpx solid $color-line;
				padding: 4rpx 30rpx;
				border-radius: 8rpx;
				margin: 0 20rpx 20rpx 0;
				background-color: #fff;
				font-size: $font-size-tag;

				.disabled {
					border: 2rpx dashed;
				}

				image {
					height: 44rpx;
					width: 44rpx;
					border-radius: $border-radius;
					margin-right: 10rpx;
					display: inline-block;
					vertical-align: middle;
				}
			}

			.number-wrap {
				.number-line {
					padding: 20rpx 0;
					line-height: 72rpx;
				}

				.title {
					font-weight: 400;
				}

				.number {
					display: flex;
					height: 72rpx;
					border-radius: 6rpx;
					float: right;

					button {
						display: inline-block;
						line-height: 64rpx;
						height: 68rpx;
						width: 60rpx;
						font-size: 48rpx;
						box-sizing: content-box;
						border: 2rpx solid $color-line;
						padding: 0;
						margin: 0;
						border-radius: 0;
						background-color: #fff !important;

						&.disabled {
							background: #f7f7f7 !important;
						}
					}

					input {
						display: inline-block;
						line-height: 64rpx;
						height: 68rpx;
						width: 72rpx;
						text-align: center;
						font-weight: 700;
						border: 2rpx solid;
						margin: 0;
						padding: 0;
						vertical-align: top;
						background-color: $color-bg !important;
					}
				}
			}
		}

		.keyBoard {
			padding: 0 30rpx;
		}

		/deep/ .u-keyboard {
			background-color: #fff;

			.u-keyboard__button-wrapper {
				.u-keyboard__button-wrapper__button {
					background-color: #eee;
				}
			}
		}

		.footer {
			height: 100rpx;
			width: 100%;
			margin-top: 40rpx;
			color: #fff;
			z-index: 1;
			display: flex;
			justify-content: center;
			align-items: flex-start;

			button {
				width: 100%;
				height: 80rpx;
				background-color: var(--goods-btn-color);
				font-weight: bold;
			}
		}
	}
</style>