<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="goods_detail">
		<goods-detail-view :goodsSkuDetail="goodsSkuDetail" ref="goodsDetailView">
			<!-- 分享 TODO -->
			<view class="follow-and-share">
				<text class="follow iconfont icon-fenxiang" @click="openSharePopup()"></text>
			</view>
			<!-- 价格区域 -->
			<template v-slot:price>
				<!-- 限时折扣 【没用到】-->
				<view v-if="showDiscount && goodsSkuDetail.discountTimeMachine" class="goods-promotion">
					<view class="price-info">
						<view class="icon-box"><text class="iconfont icon-tutechan"></text></view>
						<view class="price-box">
							<view class="promotion-text">限时折扣</view>
							<view class="sale-num" v-if="goodsSkuDetail.sale_show">
								已售{{ goodsSkuDetail.sale_num }}{{ goodsSkuDetail.unit }}
							</view>
						</view>
					</view>

					<view class="countdown">
						<view class="txt">距结束仅剩</view>
						<view class="clockrun">
							<uni-count-down :day="goodsSkuDetail.discountTimeMachine.d"
								:hour="goodsSkuDetail.discountTimeMachine.h"
								:minute="goodsSkuDetail.discountTimeMachine.i"
								:second="goodsSkuDetail.discountTimeMachine.s" />
						</view>
					</view>
				</view>

				<!-- 秒杀 -->
				<view class="goods-promotion" v-if="Number(goodsType) === 3 && userInfo.show_price && token">
					<view class="price-info">
						<view class="price-box" style="display: flex;">
							<view class="promotion-text">
								秒杀价
								<text class="price-symbol price-font">¥</text>
								<text class="price price-font">
									{{
										parseFloat(seckillInfo.seckill_price)
											.toFixed(2)
											.split('.')[0]
									}}
								</text>
								<text class="price-symbol price-font">
									.{{
										parseFloat(seckillInfo.seckill_price)
											.toFixed(2)
											.split('.')[1]
									}}
								</text>
							</view>
							<view class="sale-num" style="text-decoration:line-through">
								原价
								<goodsPrice :goodsSkuDetail="goodsSkuDetail"></goodsPrice>
							</view>
						</view>
					</view>

					<view class="countdown">
						<view class="txt">限时秒杀</view>
						<view class="clockrun">
							<uni-count-down :day="seckillInfo.discountTimeMachine.d"
								:hour="seckillInfo.discountTimeMachine.h" :minute="seckillInfo.discountTimeMachine.i"
								:second="seckillInfo.discountTimeMachine.s" splitorColor="#ffffff"
								backgroundColor="#ffffff" />
						</view>
					</view>
				</view>

				<!-- 拼团 -->
				<view class="goods-promotion" v-if="Number(goodsType) === 4 && userInfo.show_price && token">
					<view class="price-info">
						<view class="price-box">
							<view class="promotion-text">
								拼团价
								<text class="price-symbol price-font">¥</text>
								<text class="price price-font">
									{{
										parseFloat(pintuanInfo.pintuan_price)
											.toFixed(2)
											.split('.')[0]
									}}
								</text>
								<text class="price-symbol price-font">
									.{{
										parseFloat(pintuanInfo.pintuan_price)
											.toFixed(2)
											.split('.')[1]
									}}
								</text>
							</view>
							<view class="sale-num" style="text-decoration:line-through">
								原价
								<goodsPrice :goodsSkuDetail="goodsSkuDetail"></goodsPrice>
							</view>
						</view>
					</view>

					<view class="countdown">
						<view class="txt">距结束仅剩</view>
						<view class="clockrun">
							<uni-count-down :day="pintuanInfo.discountTimeMachine.d"
								:hour="pintuanInfo.discountTimeMachine.h" :minute="pintuanInfo.discountTimeMachine.i"
								:second="pintuanInfo.discountTimeMachine.s" splitorColor="#ffffff"
								backgroundColor="#ffffff" />
						</view>
					</view>
				</view>

				<view class="group-wrap padding-top">
					<view class="goods-module-wrap" style="display: flex;" v-if="![3, 4].includes(Number(goodsType))">
						<view v-if="goodsSkuDetail.price > 0">
							<goodsPrice :goodsSkuDetail="goodsSkuDetail"></goodsPrice>
						</view>
						<view v-else>￥0</view>

						<!-- <view class="market-price-wrap" v-if="goodsSkuDetail.market_price_show">
							<text class="unit price-font" v-if="(showDiscount && goodsSkuDetail.price > 0) || goodsSkuDetail.market_price > 0">{{ $lang('common.currencySymbol') }}</text>
							<text class="money price-font" v-if="showDiscount && goodsSkuDetail.price > 0">{{ goodsSkuDetail.price }}</text>
							<text class="money price-font" v-else-if="goodsSkuDetail.market_price > 0">{{ goodsSkuDetail.market_price }}</text>
						</view> -->
						<view style="line-height:70rpx;margin-left: 70rpx; color: #aaa;text-decoration:line-through"
							v-if="
								goodsSkuDetail.discount_price != goodsSkuDetail.price &&
									userInfo.show_price &&
									token
							">
							原价:￥{{ goodsSkuDetail.price }}
						</view>
					</view>
					<!-- 商品详情 -->
					<view class="goods-module-wrap info">
						<view class="df aic jcsb">
							<text class="sku-name-wrap">{{ goodsSkuDetail.goods_name }}</text>

							<view style="display: flex;" v-if="userInfo.show_price && token" @click="share">
								<image class="imagesd" :src="$util.img('upload/weapp/user/share.png')"></image>
								<text style="font-size: 24rpx;color: #999999">分享</text>
							</view>
						</view>


						<view class="introduction" v-if="goodsSkuDetail.introduction">

							<!-- #ifdef MP -->
							<u-parse :content="goodsSkuDetail.introduction.replace('/<img/g', '<img  ')"></u-parse>
							<!-- #endif -->

							<!-- #ifndef MP -->
							<rich-text class="rich-text"
								:nodes="goodsSkuDetail.introduction.replace('/<img/g', '<img  class=\'custom-image\'')"
								@click="showImg($event)"></rich-text>
							<!-- #endif -->

						</view>
						<!-- 
						<text class="introduction " v-if="goodsSkuDetail.introduction">
							{{ goodsSkuDetail.introduction }}
						</text> -->







						<view class="booking df  jcsb">
							<view class="df">
								<view class="one">每满1元送1积分</view>
								<view class="two">1袋整倍起订</view>
							</view>
							<view class="sui">
								运费:{{ goodsSkuDetail.is_free_shipping? '包邮' : '自费' }}
							</view>
						</view>
						<view class="booking df">
							<view class="sui">
								<text v-if="goodsSkuDetail.address">
									产地：{{ goodsSkuDetail.address }}
								</text>
							</view>
						</view>
						<view class="booking df ">
							<text class="sui" v-if="goodsSkuDetail.business">
								生产企业：{{ goodsSkuDetail.business }}
							</text>
						</view>
						<view class="booking df">
							<text class="sui" v-if="goodsSkuDetail.execu_content">
								执行标准：{{ goodsSkuDetail.execu_content.title }}
							</text>
						</view>

						<view class="booking df jcsb">
							<text class="sui" v-if="goodsSkuDetail.sku_name">
								规格：{{ goodsSkuDetail.spec_name||'-' }}
							</text>
							<text class="sui" v-if="goodsSkuDetail.goods_code">
								商品编号：{{ goodsSkuDetail.goods_code }}
							</text>
						</view>
					</view>
				</view>
			</template>

			<!-- 入口区域 -->
			<template v-slot:entrance>
				<view class="item coupon" v-if="canUseCoupon" @click="openCouponPopup()">
					<view class="label">领券</view>
					<view class="coupon-list">
						<view class="coupon-item" v-for="(item, index) in couponList" :key="index" v-if="index < 3 ">
							<view class="">{{ item.coupon_name }}</view>
						</view>
					</view>
					<text class="iconfont icon-right"></text>
					<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
				</view>
				<view class="item delivery-type" @click="$refs.deliveryType.open()" v-if="goodsSkuDetail.express_info">
					<!-- v-if="goodsSkuDetail.is_virtual == 0" -->
					<view class="label">配送</view>

					<view class="box">
						<!-- <block v-for="(item, index) in deliveryType" :key="index">
								<text v-if="goodsSkuDetail.support_trade_type.indexOf(index) != -1"> -->
						{{ goodsSkuDetail.express_info.template_name }}
						<!-- 	</text>
							</block> -->
					</view>
					<text class="iconfont icon-right"></text>
				</view>
				<!-- 已选规格 -->
				<view class="item selected-sku-spec" v-if="goodsSkuDetail.sku_spec_format" @click="choiceSku">
					<view class="label">选择</view>
					<view class="box">
						<text v-for="(item, index) in goodsSkuDetail.sku_spec_format" :key="index">
							{{ item.spec_name }}/{{ item.spec_value_name }}
						</text>
					</view>
					<text class="iconfont icon-right"></text>
					<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
				</view>
				<view class="item free" v-if="manjian.rule_json !== null && addonIsExist.manjian"
					@click="openManjianPopup()">
					<view class="label">促销</view>
					<text class="free-tip color-base-text">满减</text>
					<text class="font-size-base value">{{ manjian.manjian_name }}</text>
					<text class="iconfont icon-right"></text>
					<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
				</view>
				<!-- 配送方式 -->
				<uni-popup ref="deliveryType" type="bottom" v-if="!goodsSkuDetail.is_free_shipping">
					<view class="deliverytype-popup-layer popup-layer">
						<view class="head-wrap" @click="$refs.deliveryType.close()">
							<text>配送</text>
							<text class="iconfont icon-close"></text>
						</view>
						<scroll-view scroll-y class="type-body">
							<block>
								<!-- {{goodsSkuDetail.express_info}} -->
								<!-- 	{{deliveryType}} -->
							</block>
							<block v-for="(item, index) in goodsSkuDetail.express_info.template_item" :key="index">
								<view class="type-item not-support">
									<!-- item.fee_type 1重量 2体积 3件 -->
									<view class="content" v-if="item.fee_type == 1">
										<view class="desc">可配送区域：{{ item.area_names }}</view>
										<view class="descRuler">
											<view>首重:{{ item.snum }}(kg)</view>
											<view>运费:{{ item.sprice }}(元)</view>
										</view>
										<view class="descRuler">
											<view>续重:{{ item.xnum }}(kg)</view>
											<view>续费:{{ item.xprice }}(元)</view>
										</view>
									</view>
									<view class="content" v-if="item.fee_type == 2">
										<view class="desc">可配送区域：{{ item.area_names }}</view>
										<view class="descRuler">
											<view>首体积:{{ item.snum }}(m³)</view>
											<view>运费:{{ item.sprice }}(元)</view>
										</view>
										<view class="descRuler">
											<view>续体积:{{ item.xnum }}(m³)</view>
											<view>续费:{{ item.xprice }}(元)</view>
										</view>
									</view>
									<view class="content" v-if="item.fee_type == 3">
										<view class="desc">可配送区域：{{ item.area_names }}</view>
										<view class="descRuler">
											<view>首件:{{ item.snum }}(个)</view>
											<view>运费:{{ item.sprice }}(元)</view>
										</view>
										<view class="descRuler">
											<view>续件:{{ item.xnum }}(个)</view>
											<view>续费:{{ item.xprice }}(元)</view>
										</view>
									</view>
								</view>
							</block>
						</scroll-view>
					</view>
				</uni-popup>
			</template>

			<!-- 业务区域 -->
			<template v-slot:business>
				<!-- SKU选择 -->
				<ns-goods-sku v-if="goodsSkuDetail.goods_id" ref="goodsSku" @refresh="refreshGoodsSkuDetail"
					:goods-id="goodsSkuDetail.goods_id" :goods-detail="goodsSkuDetail" :max-buy="goodsSkuDetail.max_buy"
					:min-buy="goodsSkuDetail.min_buy" @getSkuId="setSkuId"></ns-goods-sku>

				<!-- 组合套餐 -->
				<view v-if="bundling.length && bundling[0].bl_name && addonIsExist.bundling">
					<view class="group-wrap" @click="openBundlingPopup()">
						<view class="goods-cell" @click="openBundlingPopup()">
							<view class="box">
								<text class="tit">组合套餐</text>
								<text>{{ bundling[0].bl_name }}</text>
							</view>
							<text class="iconfont icon-right"></text>
							<!-- <view class="more-img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
						</view>
						<scroll-view class="combo-goods-wrap color-tip" scroll-x="true">
							<view class="goods-wrap">
								<view class="goods-item" @click="toGoodsDetail(skuId)" v-if="bundlingType == true">
									<view class="combo-img">
										<image :src="
												$util.img(goodsSkuDetail.sku_image, { size: 'mid' })
											" @error="imageError()" />
										<view class="price-wrap">
											<text class="unit price-font">
												{{ $lang('common.currencySymbol') }}
											</text>
											<text class="price price-font">
												{{ goodsSkuDetail.price }}
											</text>
										</view>
									</view>
									<text class="name">{{ goodsSkuDetail.goods_name }}</text>
								</view>
								<block v-for="(item, index) in bundling[0].bundling_goods" :key="index">
									<template v-if="index < 3">
										<view class="goods-item" @click="toGoodsDetail(item.sku_id)">
											<view class="combo-img">
												<image :src="
														$util.img(item.sku_image, { size: 'mid' })
													" @error="bundlingImageError(0, index)" />
												<view class="price-wrap">
													<text class="unit price-font">
														{{ $lang('common.currencySymbol') }}
													</text>
													<text class="price price-font">
														{{ item.price }}
													</text>
												</view>
											</view>
											<text class="name">{{ item.sku_name }}</text>
										</view>
									</template>
								</block>
							</view>
						</scroll-view>
					</view>

					<view @touchmove.prevent.stop>
						<uni-popup ref="bundlingPopup" type="bottom">
							<view class="bundling-popup-layer popup-layer">
								<view class="head-wrap" @click="closeBundlingPopup()">
									<text>组合套餐</text>
									<text class="iconfont icon-close"></text>
								</view>
								<scroll-view scroll-y class="bundling-body">
									<view class="bundling-view">
										<block v-for="(item, index) in bundling" :key="index">
											<view class="bundling-item">
												<view class="title" @click="toComoDetail(item.bl_id)">
													<text>{{ item.bl_name }}</text>
													<text class="iconfont icon-right"></text>
												</view>
												<scroll-view scroll-x>
													<view class="goods-wrap">
														<view class="goods-item" @click="toGoodsDetail(skuId)">
															<view class="combo-img">
																<image :src="
																		$util.img(
																			goodsSkuDetail.sku_image,
																			{ size: 'mid' }
																		)
																	" @error="imageError()" />
																<view class="price-wrap">
																	<text class="unit price-font">
																		{{
																			$lang(
																				'common.currencySymbol'
																			)
																		}}
																	</text>
																	<text class="price price-font">
																		{{ goodsSkuDetail.price }}
																	</text>
																</view>
															</view>
															<text class="name">
																{{ goodsSkuDetail.goods_name }}
															</text>
														</view>
														<block v-for="(goods,
															goods_index) in item.bundling_goods" :key="goods_index">
															<template v-if="goods_index < 3">
																<view class="goods-item" @click="
																		toGoodsDetail(goods.sku_id)
																	">
																	<view class="combo-img">
																		<image :src="
																				$util.img(
																					goods.sku_image,
																					{ size: 'mid' }
																				)
																			" @error="
																				bundlingImageError(
																					index,
																					goods_index
																				)
																			" />
																		<view class="price-wrap">
																			<text class="unit price-font">
																				{{
																					$lang(
																						'common.currencySymbol'
																					)
																				}}
																			</text>
																			<text class="price price-font">
																				{{ goods.price }}
																			</text>
																		</view>
																	</view>
																	<text class="name">
																		{{ goods.sku_name }}
																	</text>
																</view>
															</template>
														</block>
													</view>
												</scroll-view>
												<view class="bundling-price-wrap">
													<text class="label">套餐价</text>
													<text class="unit price-color">
														{{ $lang('common.currencySymbol') }}
													</text>
													<text class="price price-color">
														{{ item.bl_price }}
													</text>
													<button type="primary" size="mini"
														@click="toComoDetail(item.bl_id)">
														立即购买
													</button>
												</view>
											</view>
										</block>
									</view>
								</scroll-view>
							</view>
						</uni-popup>
					</view>
				</view>

				<!-- 优惠券 -->
				<!-- v-if="canUseCoupon" -->
				<view @touchmove.prevent.stop>
					<uni-popup ref="couponPopup" type="bottom">
						<view class="goods-coupon-popup-layer popup-layer">
							<view class="head-wrap" @click="closeCouponPopup()">
								<text>优惠券</text>
								<text class="iconfont icon-close"></text>
							</view>
							<scroll-view class="coupon-body" scroll-y>

								<view class="coupon-item ns-gradient-diy-goods-list" v-for="(item, index) in couponList"
									:key="index" v-if="hackReset">

									<view class="coupon-info" :style="{
											backgroundColor:
												item.useState == 2
													? '#F2F2F2'
													: 'var(--main-color-shallow)'
										}">
										<view class="info-wrap" :class="{ disabled: item.useState == 2 }">
											<image class="coupon-line" mode="heightFix" :src="
													$util.img(
														'public/uniapp/coupon/coupon_line.png'
													)
												"></image>
											<view class="coupon-money">
												<template v-if="item.type == 'reward'">
													<text class="unit">
														{{ $lang('common.currencySymbol') }}
													</text>
													<text class="money">
														{{ parseFloat(item.money) }}
													</text>
												</template>
												<template v-else-if="item.type == 'discount'">
													<text class="money">
														{{ parseFloat(item.discount) }}
													</text>
													<text class="unit">折</text>
												</template>
												<view class="at-least">
													<template v-if="item.at_least > 0">
														满{{ item.at_least }}可用
													</template>
													<template v-else>
														无门槛
													</template>
												</view>
											</view>
										</view>
										<view class="desc-wrap">
											<view class="coupon-name">{{ item.coupon_name }}</view>
											<view v-if="
													item.type == 'discount' &&
														item.discount_limit > 0
												" class="limit">
												最多可抵￥{{ item.discount_limit }}
											</view>
											<view class="time font-size-goods-tag" v-if="item.validity_type == 0">
												有效期：{{ $util.timeStampTurnTime(item.end_time) }}
											</view>
											<view class="time font-size-goods-tag" v-else-if="item.validity_type == 1">
												有效期：领取之日起{{ item.fixed_term }}天内有效
											</view>
											<view class="time font-size-goods-tag" v-else>
												有效期：长期有效
											</view>
										</view>

										<button type="primary" v-if="item.useState == 2" disabled>
											已抢光
										</button>
										<button type="primary" v-else-if="item.useState == 1" disabled>
											已领取
										</button>
										<button type="primary" v-else @click="receiveCoupon(item)">
											领取
										</button>
									</view>
								</view>
							</scroll-view>
							<view class="button-box">
								<button type="primary" @click="closeCouponPopup()">确定</button>
							</view>
						</view>
					</uni-popup>
				</view>

				<!-- 促销 -->
				<view @touchmove.prevent.stop v-if="addonIsExist.manjian">
					<uni-popup ref="manjianPopup" type="bottom">
						<view class="manjian-popup-layer popup-layer">
							<view class="head-wrap" @click="closeManjianPopup()">
								<text>促销</text>
								<text class="iconfont icon-close"></text>
							</view>
							<scroll-view scroll-y class="manjian-body">
								<view class="item" v-if="manjian.manjian != undefined" style="display: flex;">
									<view class="free-tip color-base-text color-base-border">
										满减
									</view>
									<text class="font-size-base">{{ manjian.manjian }}</text>
								</view>
								<view class="item" v-if="manjian.mansong != undefined">
									<text class="free-tip color-base-text color-base-border">
										满送
									</text>
									<text class="font-size-base">{{ manjian.mansong }}</text>
								</view>
								<view class="item" v-if="manjian.free_shipping != undefined" style="display: flex;">
									<view class="free-tip color-base-text color-base-border">
										包邮
									</view>
									<text class="font-size-base">{{ manjian.free_shipping }}</text>
								</view>
							</scroll-view>
							<view class="button-box">
								<button type="primary" @click="closeManjianPopup()">确定</button>
							</view>
						</view>
					</uni-popup>
				</view>

				<!-- 拼团  TODO 后台无数据-->
				<!-- <view class="pintuan" v-if="Number(goodsType) === 4">
					<div class="df aic jcsb">
						<div class="df aic">
							<div class="su"></div>
							<div class="pintuanname">拼团中<span>(自动成团)</span></div>
						</div>
						<div class="guiz" @click="zlsgz">规则</div>
					</div>
					<div class="img df aic jcsb">
						<div class="imgdiv df aic">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
						<div class="df aic jcsa qupin">去拼团</div>
					</div>
				</view> -->
			</template>

			<!-- 操作区域 -->
			<template v-slot:action>
				<!-- 商品底部导航 -->
				<ns-goods-action :safeArea="isIphoneX">
					<template v-if="goodsSkuDetail.goods_state == 1">
						<ns-goods-action-icon text="收藏" v-if="goodsType==2 && token" @click="editCollection()" :icon="
								whetherCollection == 1
									? 'icon-likefill color-base-text'
									: 'icon-guanzhu'
							" />
						<ns-goods-action-icon v-if="userInfo.show_price && token" text="客服"
							@click="service(goodsSkuDetail)" icon="icon-kefu" :send-data="contactData"
							:chatParam="chatRoomParams" />
						<ns-goods-action-icon v-if="userInfo.show_price && token" text="购物车"
							:cornerMarkBg="themeStyle.goods_detail.goods_cart_num_corner" icon="icon-gouwuche2"
							:corner-mark="cartCount > 0 ? cartCount + '' : ''" @click="goCart" />

						<block v-if="goodsSkuDetail.stock == 0">
							<ns-goods-action-button class="goods-action-button active3" disabled-text="库存不足"
								:disabled="true" />
							<!-- <ns-goods-action-button v-if="goodsSkuDetail.sku_spec_format" class="goods-action-button active3" disabled-text="库存不足" :disabled="true" @click="joinCart" /> -->
							<!-- <ns-goods-action-button v-else class="goods-action-button active3" disabled-text="库存不足" :disabled="true" /> -->
						</block>
						<block v-else-if="goodsType==3 && !isSeckill">
							<ns-goods-action-button class="goods-action-button active3" disabled-text="未在活动时间内"
								:disabled="true" />
						</block>

						<block v-else-if="
								goodsSkuDetail.is_limit == 1 &&
									goodsSkuDetail.limit_type == 2 &&
									goodsSkuDetail.max_buy != 0 &&
									goodsSkuDetail.purchased_num >= goodsSkuDetail.max_buy
							">
							<!-- (goodsSkuDetail.is_limit == 1 && goodsSkuDetail.limit_type == 1 && goodsSkuDetail.max_buy != 0) -->
							<ns-goods-action-button class="goods-action-button active3" disabled-text="已达最大限购数量"
								:disabled="true" />
						</block>
						<block v-else>
							<!-- :class="goodsSkuDetail.is_virtual == 0 ? 'active1' : ''" -->
							<ns-goods-action-button class="goods-action-button " text="加入购物车"
								:backgroundColor="themeStyle.goods_detail.goods_btn_color"
								:textColor="themeStyle.btn_text_color" @click="joinCart" v-if="
									goodsSkuDetail.is_virtual == 0 &&
										![3, 4].includes(Number(goodsType)) &&
										userInfo.show_price &&
										token &&
										goodsSkuDetail.stock
								" />
							<!-- :class="goodsSkuDetail.is_virtual == 0 ? 'active2' : 'active4'" -->
							<ns-goods-action-button v-else-if="userInfo.show_price && token && goodsSkuDetail.stock"
								class="goods-action-button" :backgroundColor="themeStyle.bg_color"
								:textColor="themeStyle.btn_text_color" text="立即购买" @click="buyNow" />
						</block>
					</template>
					<template v-else>
						<ns-goods-action-button class="goods-action-button active3" disabled-text="该商品已下架"
							:disabled="true" />
					</template>
				</ns-goods-action>
			</template>
		</goods-detail-view>
		<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
		<ns-login ref="login"></ns-login>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import nsGoodsAction from '@/components/ns-goods-action/ns-goods-action.vue';
	import nsGoodsActionIcon from '@/components/ns-goods-action-icon/ns-goods-action-icon.vue';
	import nsGoodsActionButton from '@/components/ns-goods-action-button/ns-goods-action-button.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
	import uniCountDown from '@/components/uni-count-down/uni-count-down.vue';
	import detail from './public/js/detail.js';
	import scroll from '@/common/js/scroll-view.js';
	import toTop from '@/components/toTop/toTop.vue';
	import goodsDetailBase from '@/common/js/goods_detail_base.js';
	import goodsDetailView from '../components/goods-detail-view/goods-detail-view.vue';
	import goodsPrice from '@/components/goodsPrice.vue';

	export default {
		components: {
			nsGoodsAction,
			nsGoodsActionIcon,
			nsGoodsActionButton,
			uniPopup,
			nsGoodsSku,
			uniCountDown,
			goodsDetailView,
			toTop,
			goodsPrice
		},
		provide() {
			return {
				goodsType: 0, // 商品类型
				seckillInfo: {}, // 秒杀信息
				pintuanInfo: {}, // 拼团信息
				showDiscount: this.showDiscount
			};
		},
		data() {
			return {
				index: 0,
				list: [],
				token: uni.getStorageSync('token'),
				showView: true
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		mixins: [goodsDetailBase, detail, scroll],
		onLoad(e) {
			this.index = e.goods_id;
		},
		onHide() {
			this.$nextTick(() => {
				this.$refs.goodsDetailView.showView = false
			})

		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.goodsDetailView.showView = true
			})

			// this.$api.sendRequest({
			// 	url: '/api/goodssku/pintuangoodsList',
			// 	data: {},
			// 	success: res => {
			// 		this.list = res.data.list[this.index]
			// 		console.log(res.data.list, '拼团商品');
			// 	}
			// })
		},

		methods: {
			share() {
				this.$refs.goodsDetailView.switchMedia = "img"
				this.$refs.goodsDetailView.openSharePopup();
			},
			service(item) {
				
				this.$util.diyRedirectTo(this.floatData.list[0].link)
				
				console.log(item);

				// let { goods_name, goods_id, goods_code } = { ...item };

				// uni.navigateTo({
				// 	url: `/pages_tool/news/chat?goods_name=${goods_name}&goods_id=${goods_id}&goods_code=${goods_code}`
				// });
			}
		}
	};
</script>
<style lang="scss">
	@import '@/common/css/goods_detail.scss';
	@import './public/css/detail.scss';
</style>
<style lang="scss" scoped>
	.goods_detail {


		/deep/ .action-icon-wrap .iconfont.icon-shouye1 {
			font-size: 40rpx;
		}

		/deep/ .uni-video-cover {
			background: none;
		}

		/deep/ .uni-video-cover-duration {
			display: none;
		}

		/deep/ .uni-video-cover-play-button {
			border-radius: 50%;
			border: 4rpx solid #fff;
			width: 120rpx;
			height: 120rpx;
			background-size: 30%;
		}

		.poster-layer /deep/.uni-popup__wrapper-box {
			max-height: initial !important;
		}

		/deep/ .sku-layer .uni-popup__wrapper-box {
			overflow-y: initial !important;
		}

		.goods-promotion .countdown .clockrun {
			/deep/.uni-countdown__number {
				min-width: 32rpx;
				height: 32rpx;
				text-align: center;
				line-height: 32rpx;
				border-radius: 4px;
				display: inline-block;
				padding: 4rpx;
				margin: 0;
				border: none;
			}
		}

		.goods-promotion .countdown .clockrun {
			/deep/.uni-countdown__splitor {
				width: 10rpx;
				height: 32rpx;
				line-height: 36rpx;
				text-align: center;
			}
		}

		.goods-promotion .countdown .clockrun {
			/deep/ .uni-countdown__splitor.day {
				width: initial;
			}
		}

		/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
			max-height: unset !important;
		}

		/deep/ .goods-action-button.active1 {
			padding-left: 10px;
		}

		/deep/ .goods-action-button.active2 {
			padding-right: 10px;
		}

		/deep/ .goods-action-button.active3 {
			padding: 0 10px;
		}

		/deep/ .goods-action-button.active4 {
			padding: 0 10px;
		}

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

		/deep/ .goods-action-button.active1 .action-buttom-wrap {
			height: 72rpx;
			line-height: 72rpx;
		}

		/deep/ .goods-action-button.active2 .action-buttom-wrap {
			height: 72rpx;
			line-height: 72rpx;
		}

		/deep/ .goods-action-button.active3 .action-buttom-wrap {
			height: 72rpx;
			line-height: 72rpx;
			margin: 20rpx 0;
		}

		/deep/ .goods-action-button.active4 .action-buttom-wrap {
			height: 72rpx;
			line-height: 72rpx;
		}

		.imagesd {
			width: 40rpx;
			height: 40rpx;
		}

		.booking {
			margin-top: 20rpx;

			.one {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #fff;
				line-height: 34rpx;
				padding: 2rpx 8rpx;
				background: var(--goods-btn-color);
				border-radius: 8rpx;
				box-sizing: border-box;
				// color: rgb(100, 166, 49) !important;
			}

			.two {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #fff;
				line-height: 34rpx;
				padding: 2rpx 8rpx;
				background: var(--goods-btn-color);
				box-sizing: border-box;
				border-radius: 8rpx;
				margin-left: 16rpx;
				// color: rgb(100, 166, 49) !important;
			}

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

		/* 拼团样式 */
		.pintuan {
			width: 702rpx;
			// height: 240rpx;
			background: #ffffff;
			border-radius: 24rpx;
			margin: 0 auto;
			margin-bottom: 26rpx;
			padding: 42rpx 32rpx;
			box-sizing: border-box;

			.su {
				width: 6rpx;
				height: 28rpx;
				background: linear-gradient(180deg, #21bbf3 0%, rgba(33, 187, 243, 0.14) 100%);
				border-radius: 4rpx;
				margin-right: 16rpx;
			}

			.pintuanname {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #222222;
				line-height: 48rpx;

				span {
					margin-left: 24rpx;
				}
			}

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

			.img {
				margin-top: 36rpx;

				.qupin {
					width: 144rpx;
					height: 72rpx;
					background: #f33b50;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #ffffff;
					line-height: 40rpx;
				}

				.imgdiv {
					position: relative;

					div {
						width: 80rpx;
						height: 80rpx;
						border: 4rpx solid red;
						border-radius: 50%;
						position: absolute;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
					}

					div:nth-child(2) {
						left: 70rpx;
					}

					div:nth-child(3) {
						left: 140rpx;
					}

					div:nth-child(4) {
						left: 210rpx;
					}

					div:nth-child(5) {
						left: 280rpx;
					}
				}
			}
		}

		// 秒杀样式
		.countdown {
			/deep/ .uni-countdown {
				transform: scale(0.9);
			}
		}

		/* 拼团样式 */
		.pintuan {
			width: 702rpx;
			// height: 240rpx;
			background: #ffffff;
			border-radius: 24rpx;
			margin: 0 auto;
			margin-bottom: 26rpx;
			padding: 42rpx 32rpx;
			box-sizing: border-box;

			.su {
				width: 6rpx;
				height: 28rpx;
				background: linear-gradient(180deg, #21bbf3 0%, rgba(33, 187, 243, 0.14) 100%);
				border-radius: 4rpx;
				margin-right: 16rpx;
			}

			.pintuanname {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #222222;
				line-height: 48rpx;

				span {
					margin-left: 24rpx;
				}
			}

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

			.img {
				margin-top: 36rpx;

				.qupin {
					width: 144rpx;
					height: 72rpx;
					background: #f33b50;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #ffffff;
					line-height: 40rpx;
				}

				.imgdiv {
					position: relative;

					div {
						width: 80rpx;
						height: 80rpx;
						border: 4rpx solid red;
						border-radius: 50%;
						position: absolute;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
					}

					div:nth-child(2) {
						left: 70rpx;
					}

					div:nth-child(3) {
						left: 140rpx;
					}

					div:nth-child(4) {
						left: 210rpx;
					}

					div:nth-child(5) {
						left: 280rpx;
					}
				}
			}
		}

		// 秒杀样式
		.countdown {
			/deep/ .uni-countdown {
				transform: scale(0.9);
			}
		}

		.descRuler {
			display: flex;

			view {
				color: #aaa;
				font-size: 13px;
				margin-right: 40rpx;
			}
		}
	}
</style>