<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view v-if="divTrue">
		<view class="container">
			<scroll-view class="scroll-view" :scroll-y="true" :show-scrollbar="false">
				<block v-if="cartData.length">
					<view class="cart-header fixed" v-if="cartData.length">
						<view class="num-wrap">共{{ totalCount }}件商品</view>
						<view class="cart-action" @click="changeAction">
							{{ isAction ? $lang('complete') : $lang('edit') }}
						</view>
					</view>
					<view class="cart-wrap" v-if="order_limit_start_money > totalPrice">
						<view class="coupon-use-tips">
							<text class="title color-base-text">起订金额</text>
							<text class="desc">
								还差
								<text class="color-base-text">
									￥{{showStartMoney(order_limit_start_money,totalPrice)}}元
								</text>
								起订
							</text>
						</view>
					</view>
					<view class="cart-wrap" v-for="(siteItem, siteIndex) in cartData" :key="siteIndex">
						<view class="coupon-use-tips" v-if="discount.coupon_info">
							<view>
								<text class="title color-base-text">优惠券</text>
								<text class="desc">
									领券结算最高可减{{
										discount.coupon_info.coupon_money | moneyFormat
									}}元
								</text>
							</view>
							<view class="color-base-text" @click="$refs.couponPopup.open()">
								点击{{
									discount.coupon_info.receive_type == 'wait' ? '领取' : '查看'
								}}
								<text class="iconfont icon-right"></text>
							</view>
						</view>

						<view class="">
							<u-swipe-action>
								<u-swipe-action-item ref="actionItem" v-for="(item, cartIndex) in siteItem.cartList"
									:options="
										item.isCollect == 1
											? swipeActionOptions1
											: swipeActionOptions
									" :name="cartIndex" :key="cartIndex" @click="collectORdel">
									<block class="f1">
										<view ref="pp" class="cart-goods f1" v-if="item.num">
											<view class="goods-wrap" :class="{ edit: item.edit }">
												<view class="iconfont" :class="
														item.checked
															? 'icon-yuan_checked color-base-text'
															: 'icon-yuan_checkbox'
													" @click="singleElection(siteIndex, cartIndex)"></view>
												<view @click="toGoodsDetail(item)" class="goods-img">
													<image :src="
															$util.img(item.sku_image, {
																size: 'mid'
															})
														" @error="imageError(siteIndex, cartIndex)" mode="aspectFill"></image>
												</view>
												<view class="goods-info">
													<view>
														<view @click="toGoodsDetail(item)" class="goods-name">
															{{ item.goods_name }}
														</view>
														<view class="sku-wrap">
															<view class="sku">
																<view class="goods-spec" v-if="
																		item.sku_spec_format.length
																	" @click="selectSku(item)">
																	<block v-for="(x,
																		i) in item.sku_spec_format" :key="i">
																		{{ x.spec_name }}:{{
																			x.spec_value_name
																		}}
																		{{
																			i <
																			item.sku_spec_format
																				.length -
																				1
																				? ';'
																				: ''
																		}}
																	</block>
																</view>
																<text class="iconfont icon-unfold" v-if="
																		item.sku_spec_format.length
																	"></text>
															</view>
														</view>
													</view>
													<view class="goods-sub-section">
														<block v-if="item.promotion_type == 1">
															<block v-if="
																	Number(item.member_price) > 0 &&
																		Number(item.member_price) <
																			Number(
																				item.discount_price
																			)
																">
																<view class="goods-price ">
																	<view class="bottom-price price-style large">
																		<text class="unit price-style small">
																			¥
																		</text>
																		{{
																			parseFloat(
																				item.member_price
																			)
																				.toFixed(2)
																				.split('.')[0]
																		}}
																		<text class="unit price-style small">
																			.{{
																				parseFloat(
																					item.member_price
																				)
																					.toFixed(2)
																					.split('.')[1]
																			}}
																		</text>

																		<image :src="
																				$util.img(
																					'public/uniapp/index/VIP.png'
																				)
																			"></image>
																	</view>
																</view>
															</block>
															<block v-else>
																<view class="goods-price ">
																	<view class="bottom-price price-style large">
																		<text class="unit price-style small">
																			¥
																		</text>
																		{{
																			parseFloat(
																				item.discount_price
																			)
																				.toFixed(2)
																				.split('.')[0]
																		}}
																		<text class="unit price-style small">
																			.{{
																				parseFloat(
																					item.discount_price
																				)
																					.toFixed(2)
																					.split('.')[1]
																			}}
																		</text>

																		<image :src="
																				$util.img(
																					'public/uniapp/index/discount.png'
																				)
																			"></image>
																	</view>
																</view>
															</block>
														</block>
														<block v-else>
															<block v-if="Number(item.member_price) > 0">
																<view class="goods-price">
																	<view class="bottom-price price-style large">
																		<text class="unit price-style small">
																			¥
																		</text>
																		{{
																			parseFloat(
																				item.member_price
																			)
																				.toFixed(2)
																				.split('.')[0]
																		}}
																		<text class="unit price-style small">
																			.{{
																				parseFloat(
																					item.member_price
																				)
																					.toFixed(2)
																					.split('.')[1]
																			}}
																		</text>
																		<!-- <image :src="$util.img('public/uniapp/index/VIP.png')"></image> -->
																	</view>
																</view>
															</block>
															<block v-else>
																<view class="goods-price">
																	<view class="bottom-price price-style large">
																		<text class="unit price-style small">
																			¥
																		</text>
																		{{
																			parseFloat(item.price)
																				.toFixed(2)
																				.split('.')[0]
																		}}
																		<text class="unit price-style small">
																			.{{
																				parseFloat(
																					item.price
																				)
																					.toFixed(2)
																					.split('.')[1]
																			}}
																		</text>
																	</view>
																</view>
															</block>
														</block>
														<u-number-box :min="item.min_buy > 1 ? item.min_buy : 1"
															:max="item.max_buy > 0 &&item.max_buy < Number(item.stock)?  Number(item.max_buy): Number(item.stock)"
															:value="initNum(item)" size="small" :modifyFlag="modifyFlag"
															@change="cartNumChange($event, {siteIndex,cartIndex})"
															@limit="goodsLimit($event, cartIndex)">
														</u-number-box>
														

													</view>

													<!-- 		<view class="discount-wrap" v-if="
															manjian && manjian['sku_' + item.sku_id]
														">
														<text class="discount-tag">满减</text>
														<scroll-view scroll-x="true" class="scroll-view">
															<block v-for="(mitem, key) in manjian[
																	'sku_' + item.sku_id
																]" :key="key">
																<text v-if="mitem.discount_money">
																	{{ mitem.limit }}减{{
																		mitem.discount_money
																	}}
																</text>
																<text class="interval"
																	v-if="mitem.discount_money"></text>
															</block>
														</scroll-view>
													</view>
 -->
												</view>
											</view>
											<view class="discount-wrap" v-if="manjian && manjian['sku_' + item.sku_id]">
												<text class="discount-tag">满减</text>
												<scroll-view scroll-x="true" class="scroll-view">
													<block v-for="(mitem, key) in manjian[
															'sku_' + item.sku_id
														]" :key="key">
														<text v-if="mitem.discount_money">
															{{ mitem.limit }}减{{
																mitem.discount_money
															}}
														</text>
														<text class="interval" v-if="mitem.discount_money"></text>
													</block>
												</scroll-view>
											</view>
										</view>
									</block>
								</u-swipe-action-item>
							</u-swipe-action>
						</view>
					</view>

					<view class="cart-wrap invalid" v-if="invalidGoods.length">
						<view class="cart-header">
							<view class="num-wrap">
								<text class="font-size-base">
									失效商品{{ invalidGoods.length }}件
								</text>
							</view>
							<view class="cart-action color-base-text" @click="clearInvalidGoods">
								清空
							</view>
						</view>
						<block v-for="(goodsItem, goodsIndex) in invalidGoods" :key="goodsIndex">
							<view class="cart-goods invalid-goods">
								<view class="goods-wrap">
									<view class="iconfont icon-yuan_checked color-tip"></view>
									<view class="goods-img">
										<image :src="$util.img(goodsItem.sku_image, { size: 'mid' })" mode="aspectFill">
										</image>
									</view>
									<view class="goods-info">
										<view class="goods-name">{{ goodsItem.sku_name }}</view>
										<!-- <image
											style="width: 80rpx;height: 40rpx;"
											:src="$util.img('public/uniapp/index/VIP.png')"
										></image> -->
										<view>
											<view class="sku">
												<view class="goods-spec" v-if="goodsItem.sku_spec_format.length">
													<block v-for="(x, i) in goodsItem.sku_spec_format" :key="i">
														{{ x.spec_name }}:{{ x.spec_value_name }}
														{{
															i < goodsItem.sku_spec_format.length - 1
																? '; '
																: ''
														}}
													</block>
												</view>
											</view>
										</view>
										<view class="goods-sub-section">
											<text class="goods-price price-style large">
												<template v-if="
														goodsItem.member_price > 0 &&
															goodsItem.member_price <
																goodsItem.discount_price
													">
													<text class="unit price-style small">¥</text>
													{{
														parseFloat(goodsItem.member_price)
															.toFixed(2)
															.split('.')[0]
													}}
													<text class="unit price-style small">
														.{{
															parseFloat(goodsItem.member_price)
																.toFixed(2)
																.split('.')[1]
														}}
													</text>
												</template>
												<template v-else>
													<text class="unit price-style small">¥</text>
													{{
														parseFloat(goodsItem.discount_price)
															.toFixed(2)
															.split('.')[0]
													}}
													<text class="unit price-style small">
														.{{
															parseFloat(goodsItem.discount_price)
																.toFixed(2)
																.split('.')[1]
														}}
													</text>
												</template>
											</text>
											<text class="invalid-mark">已失效</text>
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</block>
				<block v-else>
					<view class="cart-empty">
						<!-- <image :src="$util.img('public/uniapp/cart/empty.png')" mode="aspectFit"></image>
						<view class="color-tip margin-top margin-bottom">{{ $lang('emptyTips') }}</view>
						<button type="primary" size="mini" class="button visit-the" v-if="token != ''" @click="$util.redirectTo('/pages/index/index')">去逛逛</button>
						<button type="primary" size="mini" class="button" v-else @click="toLogin">去登录</button> -->
						<ns-empty text="您的购物车是空的~" subText="赶紧去逛逛, 购买心仪的商品吧" :isIndex="Boolean(token)"></ns-empty>
						<button type="primary" size="mini" class="button" v-if="!token" @click="toLogin">
							去登录
						</button>
					</view>
				</block>
				<nsGoodsRecommend ref="goodrecommend" route="cart"></nsGoodsRecommend>

				<uni-popup ref="discountPopup" type="bottom">
					<view class="discount-popup popup" v-if="Object.keys(discount).length">
						<view class="popup-header">
							<text class="tit">优惠明细</text>
							<text class="iconfont icon-close" @click="toggleDiscountPopup"></text>
						</view>
						<view class="popup-body" :class="{ 'safe-area': isIphoneX }" @click="toggleDiscountPopup">
							<view class="detail-item">
								<view class="title">商品总额</view>
								<view class="money price-font">
									￥{{ discount.goods_money | moneyFormat }}
								</view>
							</view>
							<view class="detail-item" v-if="discount.coupon_money > 0">
								<view class="title">优惠券</view>
								<view class="money price-font reduce">
									-￥{{ discount.coupon_money | moneyFormat }}
								</view>
							</view>
							<view class="detail-item" v-if="discount.promotion_money > 0">
								<view class="title">满减</view>
								<view class="money reduce price-font">
									-￥{{ discount.promotion_money | moneyFormat }}
								</view>
							</view>
							<view class="detail-item total">
								<view class="title">合计</view>
								<view class="money price-font ">
									￥{{ discount.order_money | moneyFormat }}
								</view>
							</view>
						</view>
					</view>
				</uni-popup>

				<uni-popup ref="couponPopup" type="bottom" v-if="discount.coupon_info">
					<view class="coupon-popup popup">
						<view class="popup-header">
							<text class="tit">优惠券</text>
							<text class="iconfont icon-close" @click="$refs.couponPopup.close()"></text>
						</view>
						<view class="popup-body" :class="{ 'safe-area': isIphoneX }" @click="$refs.couponPopup.close()">
							<view class="coupon-item">
								<view class="coupon-info" :style="{
										backgroundColor:
											discount.coupon_info.receive_type != 'wait'
												? '#F2F2F2'
												: 'var(--main-color-shallow)'
									}">
									<view class="info-wrap">
										<image class="coupon-line" mode="heightFix"
											:src="$util.img('public/uniapp/coupon/coupon_line.png')"></image>
										<view class="coupon-money">
											<template v-if="discount.coupon_info.type == 'reward'">
												<text class="unit">¥</text>
												<text class="money">
													{{ parseFloat(discount.coupon_info.money) }}
												</text>
											</template>
											<template v-else-if="discount.coupon_info.type == 'discount'">
												<text class="money">
													{{ parseFloat(discount.coupon_info.discount) }}
												</text>
												<text class="unit">折</text>
											</template>
											<view class="at-least">
												<template v-if="discount.coupon_info.at_least > 0">
													满{{ discount.coupon_info.at_least }}可用
												</template>
												<template v-else>
													无门槛
												</template>
											</view>
										</view>
									</view>
									<view class="desc-wrap">
										<view class="coupon-name">
											{{ discount.coupon_info.coupon_name }}
										</view>
										<view v-if="
												discount.coupon_info.type == 'discount' &&
													discount.coupon_info.discount_limit > 0
											" class="limit">
											最多可抵￥{{ discount.coupon_info.discount_limit }}
										</view>
										<view class="time font-size-goods-tag"
											v-if="discount.coupon_info.validity_type == 0">
											有效期：{{
												$util.timeStampTurnTime(
													discount.coupon_info.end_time
												)
											}}
										</view>
										<view class="time font-size-goods-tag"
											v-else-if="discount.coupon_info.validity_type == 1">
											有效期：领取之日起{{
												discount.coupon_info.fixed_term
											}}天内有效
										</view>
										<view class="time font-size-goods-tag" v-else>
											有效期：长期有效
										</view>
									</view>

									<button type="primary" v-if="discount.coupon_info.receive_type != 'wait'" disabled>
										已领取
									</button>
									<button type="primary" v-else @click.stop="
											receiveCoupon(discount.coupon_info.coupon_type_id)
										">
										领取
									</button>
								</view>
							</view>
						</view>
					</view>
				</uni-popup>
			</scroll-view>

			<view class="cart-bottom" :class="{ active: isIphoneX }" v-if="cartData.length && cartBottomShow">
				<view class="all-election" @click="allElection">
					<view class="iconfont" :class="
							checkAll ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'
						"></view>
					<text>{{ $lang('allElection') }}</text>
					<text>共{{ totalCount }}件</text>
				</view>
				<view class="settlement-info" :style="{ visibility: isAction ? 'hidden' : 'visible' }">
					<view class="money">
						{{ $lang('total') }}：
						<text class="unit price-font">¥</text>
						<block v-if="Object.keys(discount).length">
							<text class="value price-font">
								{{
									parseFloat(discount.order_money)
										.toFixed(2)
										.split('.')[0]
								}}
							</text>
							<text class="unit price-font">
								.{{
									parseFloat(discount.order_money)
										.toFixed(2)
										.split('.')[1]
								}}
							</text>
						</block>
						<block v-else>
							<text class="value price-font">
								{{
									parseFloat(totalPrice)
										.toFixed(2)
										.split('.')[0]
								}}
							</text>
							<text class="unit price-font">
								.{{
									parseFloat(totalPrice)
										.toFixed(2)
										.split('.')[1]
								}}
							</text>
						</block>
					</view>
					<view class="detail" @click="toggleDiscountPopup" v-if="Object.keys(discount).length">
						优惠明细
						<text class="iconfont icon-unfold" :class="{ open: !discountPopupShow }"></text>
					</view>
				</view>
				<view class="action-btn" v-if="isAction">
					<button type="primary" size="mini" @click="collectCart()">移至收藏</button>
					<view style="width: 30rpx;"></view>
					<button type="primary" size="mini" @click="deleteCart('all')">
						{{ $lang('del') }}
					</button>
				</view>
				<view class="action-btn" v-else>
					<button type="primary" size="mini" @click="settlement"
						v-if="totalCount != 0 && order_limit_start_money <= totalPrice">
						{{
							discount.coupon_info && discount.coupon_info.receive_type == 'wait'
								? '领券'
								: '立即'
						}}结算
					</button>
					<button type="primary" size="mini" @click="settlement" disabled v-else>
						{{ $lang('settlement') }}
					</button>
				</view>
			</view>
		</view>

		<!-- 加载动画 -->
		<ns-goods-sku ref="selectSku" v-if="goodsSkuDetail" :goods-detail="goodsSkuDetail"
			:goods-id="goodsSkuDetail.goods_id" :max-buy="goodsSkuDetail.max_buy" :min-buy="goodsSkuDetail.min_buy"
			@refresh="refreshSkuDetail"></ns-goods-sku>

		<loading-cover ref="loadingCover"></loading-cover>
		<!-- 底部tabBar -->
		<view id="tab-bar"><diy-bottom-nav></diy-bottom-nav></view>
		<!-- 返回顶部 -->
		<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>

		<ns-login ref="login"></ns-login>
	</view>
</template>

<script>
	// import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
	// // import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
	// import toTop from '@/components/toTop/toTop.vue';
	// import scroll from '@/common/js/scroll-view.js';
	// import cart from './public/js/cart.js';
	// export default {
	// 	data() {
	// 		return {
	// 			startTime: 0,
	// 			startPosition: 0,
	// 			endPosition: 0,
	// 			slither: 1,
	// 			one: '',
	// 			index: '',
	// 			divTrue: true,
	// 		};
	// 	},

	import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
	// import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
	import toTop from '@/components/toTop/toTop.vue';
	import scroll from '@/common/js/scroll-view.js';
	import cart from './public/js/cart.js';
	export default {
		data() {
			return {
				startTime: 0,
				startPosition: 0,
				endPosition: 0,
				slither: 1,
				one: '',
				index: '',
				divTrue: true,
				cartBottomShow: true
			};
		},

		components: {
			nsGoodsRecommend,
			// uniNumberBox,
			toTop
		},
		mixins: [scroll, cart],
		methods: {},
		onHide() {
			// this.divTrue = false;
		},
		onShow() {
			// this.divTrue = true;
		},
		mounted() {}
	};
</script>

<style lang="scss">
	::v-deep {
		.del-box-touch-slideLeft {
			height: 98% !important;
			margin-top: 2rpx !important;
		}
	}

	// .container{
	// 	height: calc(93vh - var(--tab-bar-height)) !important;
	// }

	.ztsc {
		position: absolute;
		right: -332rpx;
		top: 0;

		.ztscone {
			width: 136rpx;
			height: 240rpx;
			background: #f08433;
			border-radius: 24rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			line-height: 40rpx;
			margin-right: 16rpx;

			.ztscone-one {}
		}

		.ztsctwo {
			width: 136rpx;
			height: 240rpx;
			background: #f33b50;
			border-radius: 24rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			line-height: 40rpx;
		}
	}

	.avc {
		background-color: $base-color;
		height: 400rpx;
		width: 100%;
	}

	/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		background: none;
		max-height: unset !important;
		overflow-y: hidden !important;
	}

	/deep/ .uni-popup__wrapper {
		border-radius: 20rpx 20rpx 0 0;
	}

	.modal_box {
		width: 100%;

		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		width: 540rpx;
		background: #ffffff;
		border-radius: 24rpx;

		.title {
			padding-top: 24rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #222222;
		}

		.desc {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #585858;
			padding: 32rpx 32rpx 0;
			line-height: 1.2;
		}

		.btn_box {
			margin: 56rpx 0 32rpx 0;
			display: flex;
			justify-content: space-evenly;

			.cancel {
				width: 206rpx;
				height: 72rpx;
				border-radius: 40rpx;
				border: 2rpx solid #e8e8e8;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				color: #222222;
			}

			.submit {
				width: 206rpx;
				height: 72rpx;

				border-radius: 40rpx;

				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #ffffff;
				line-height: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	@import './public/css/cart.scss';
</style>