<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view>
		<view>
			<view scroll-y="true" class="goods-detail" :class="isIphoneX ? 'active' : ''">
				<view class="goods-container">
					<!-- 商品媒体信息 -->
					<view class="goods-media">
						<!-- 商品图片 -->
						<view class="goods-img" :class="{ show: switchMedia == 'img' }">
							<swiper class="swiper" @change="swiperChange" :interval="swiperInterval"
								:autoplay="swiperAutoplay" autoplay="true" interval="4000" circular="true">
								<swiper-item v-for="(item, index) in goodsSkuDetail.sku_images" :key="index"
									:item-id="'goods_id_' + index">
									<view class="item" @click="previewMedia(index)">
										<image :src="$util.img(item)" @error="swiperImageError(index)"
											mode="aspectFit" />
									</view>
								</swiper-item>
							</swiper>
							<view class="img-indicator-dots">
								<text>{{ swiperCurrent }}</text>
								<text v-if="goodsSkuDetail.sku_images">
									/{{ goodsSkuDetail.sku_images.length }}
								</text>
							</view>
						</view>

						<!-- 商品视频 -->
						<view class="goods-video" :class="{ show: switchMedia == 'video' }">
							<video id="goodsVideo" :src="$util.img(goodsSkuDetail.video_url)"
								:poster="$util.img(goodsSkuDetail.sku_image)" objectFit="cover"
								:controls="true"></video>
						</view>

						<!-- 切换视频、图片 -->
						<view class="media-mode" v-if="goodsSkuDetail.video_url != ''" style="bottom:76rpx">
							<div class="media-mode-box">
								<text :class="{ 'color-base-bg': switchMedia == 'video' }"
									@click="switchMedia = 'video'">
									视频
								</text>
								<text style="margin-left: 0rpx;" :class="{ 'color-base-bg': switchMedia == 'img' }"
									@click="(switchMedia = 'img'), videoContext.pause()">
									图片
								</text>
							</div>
						</view>
					</view>

					<!-- 价格区域 -->
					<view class="goods-gression">
						<!-- 拼团 -->
						<view class="goods-promotion">
							<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(goodsSkuDetail.bl_price)
													.toFixed(2)
													.split('.')[0]
											}}
										</text>
										<text class="price-symbol price-font">
											.{{
												parseFloat(goodsSkuDetail.bl_price)
													.toFixed(2)
													.split('.')[1]
											}}
										</text>
									</view>
									<view class="sale-num">
										原价
										<text class="price-symbol price-font">¥</text>
										<text class="price price-font">
											{{
												parseFloat(goodsSkuDetail.goods_money)
													.toFixed(2)
													.split('.')[0]
											}}
										</text>
										<text class="price-symbol price-font">
											.{{
												parseFloat(goodsSkuDetail.goods_money)
													.toFixed(2)
													.split('.')[1]
											}}
										</text>
									</view>
								</view>
							</view>

							<view class="countdown">
								<view class="txt">距结束仅剩</view>
								<view class="clockrun"></view>
							</view>
						</view>

						<view class="group-wrap padding-top">
							<view class="goods-module-wrap">
								<text class="price-symbol price-font">¥</text>
								<text class="price price-font">
									{{
										parseFloat(goodsSkuDetail.goods_money)
											.toFixed(2)
											.split('.')[0]
									}}
								</text>
								<text class="price-symbol price-font">
									.{{
										parseFloat(goodsSkuDetail.goods_money)
											.toFixed(2)
											.split('.')[1]
									}}
								</text>
								<view class="follow-and-share">
									<text class="follow iconfont icon-fenxiang" @click="openSharePopup()"></text>
								</view>
							</view>
						</view>
					</view>

					<view class="newdetail margin-bottom">
						<view class="item delivery-type" v-if="goodsSkuDetail.is_virtual == 0"
							@click="$refs.deliveryType.open()">
							<view class="label">配送</view>
							<block v-if="deliveryType">
								<view class="box">
									<block v-for="(item, index) in deliveryType" :key="index">
										<text v-if="
												goodsSkuDetail.support_trade_type.indexOf(index) !=
													-1
											">
											{{ item.name }}
										</text>
									</block>
								</view>
								<text class="iconfont icon-right"></text>
							</block>
							<block v-else>
								<view class="box">商家未配置配送方式</view>
							</block>
						</view>
						<!-- 配送方式 -->
						<uni-popup ref="deliveryType" type="bottom">
							<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 v-for="(item, index) in deliveryType" :key="index">
										<view class="type-item" :class="{
												'not-support':
													goodsSkuDetail.support_trade_type.indexOf(
														index
													) == -1
											}">
											<text class="iconfont" :class="item.icon"></text>
											<view class="content">
												<view class="title">{{ item.name }}</view>
												<view class="desc">{{ item.desc }}</view>
											</view>
										</view>
									</block>
								</scroll-view>
							</view>
						</uni-popup>
						¸
						<view class="item service" @click="openMerchantsServicePopup()"
							v-if="goodsSkuDetail.goods_service.length">
							<view class="label">服务</view>
							<view class="list-wrap">
								<view class="item-wrap" v-for="(item, index) in goodsSkuDetail.goods_service"
									:key="index" v-if="index < 3">
									<view class="item-wrap-box">
										<view class="item-wrap-icon">
											<text class="iconfont icon-dui" v-if="
													!item.icon ||
														(!item.icon.imageUrl && !item.icon.icon)
												"></text>
											<image class="icon-img" v-else-if="item.icon.iconType == 'img'"
												:src="$util.img(item.icon.imageUrl)" />
											<diy-icon class="icon-box" v-else-if="item.icon.iconType == 'icon'"
												:icon="item.icon.icon"
												:value="item.icon.style ? item.icon.style : null"></diy-icon>
										</view>
										<text>{{ item.service_name }}</text>
									</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>

					<!-- 商品服务 -->
					<view @touchmove.prevent.stop>
						<uni-popup ref="merchantsServicePopup" type="bottom">
							<view class="goods-merchants-service-popup-layer popup-layer">
								<view class="head-wrap" @click="closeMerchantsServicePopup()">
									<text>商品服务</text>
									<text class="iconfont icon-close"></text>
								</view>
								<scroll-view scroll-y>
									<view class="item" :class="{ 'empty-desc': !item.desc }"
										v-for="(item, index) in goodsSkuDetail.goods_service" :key="index">
										<view class="item-icon" :class="{ 'empty-desc': !item.desc }">
											<text class="iconfont icon-dui color-base-text" v-if="
													!item.icon ||
														(!item.icon.imageUrl && !item.icon.icon)
												"></text>
											<image class="icon-img" v-else-if="item.icon.iconType == 'img'"
												:src="$util.img(item.icon.imageUrl)" />
											<diy-icon class="icon-box" v-else-if="item.icon.iconType == 'icon'"
												:icon="item.icon.icon"
												:value="item.icon.style ? item.icon.style : null"></diy-icon>
										</view>
										<view class="info-wrap">
											<text class="title">{{ item.service_name }}</text>
											<text class="describe" v-if="item.desc">
												{{ item.desc }}
											</text>
										</view>
									</view>
								</scroll-view>
								<view class="button-box">
									<button type="primary" @click="closeMerchantsServicePopup()">
										确定
									</button>
								</view>
							</view>
						</uni-popup>
					</view>

					<!-- 业务区域 -->
					<!-- 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>

					<view class="detail-community"
						v-if="goodsSkuDetail.qr_data && goodsSkuDetail.qr_data.qr_state == 1">
						<view class="community-box">
							<image :src="$util.img('public/uniapp/goods/detail_erweiImage.png')" mode="aspectFill">
							</image>
							<view class="community-content">
								<view class="community-title">
									{{ goodsSkuDetail.qr_data.qr_name }}
								</view>
								<view class="community-txt">
									{{ goodsSkuDetail.qr_data.community_describe }}
								</view>
							</view>
						</view>
						<view class="community-btn" @click="onCommunity()">添加</view>
					</view>

					<!-- 促销 -->
					<view class="community-model" @touchmove.prevent.stop @click.stop="onCloseCommunity()"
						v-show="isCommunity">
						<view class="community-model-content" @click.stop>
							<view class="community-model-content-radius">
								<view>添加社群</view>
							</view>
							<view class="community-model-content-draw"
								v-if="goodsSkuDetail.qr_data && goodsSkuDetail.qr_data.qr_img">
								<image :src="
										goodsSkuDetail.qr_data.qr_img != '' &&
										goodsSkuDetail.qr_data.qr_state == 1
											? $util.img(goodsSkuDetail.qr_data.qr_img)
											: $util.img('public/uniapp/goods/detail_erweiImage.png')
									" mode="aspectFill" show-menu-by-longpress="true"></image>
							</view>
							<view class="community-model-content-text">
								长按识别二维码，添加社群
							</view>
						</view>
						<view class="community-model-close" @click.stop="onCloseCommunity()">
							<text class="iconfont icon-close"></text>
						</view>
					</view>

					<!-- 详情 -->
					<view class="goods-detail-tab">
						<view class="detail-tab">
							<!-- <view class="tab-line"></view> -->
							<view class="tab-item">商品详情</view>
							<!-- <view class="tab-line"></view> -->
							<!-- <view v-if="service.is_display == 1" class="tab-item" :class="detailTab == 1 ? 'active color-base-text' : ''" @click="detailTab = 1">售后保障</view> -->
						</view>

						<view class="detail-content active">
							<view class="detail-content-item">
								<view class="goods-details" v-if="goodsSkuDetail.goods_content">
									<rich-text :nodes="goodsSkuDetail.goods_content" @click="showImg($event)"
										:data-nodes="goodsSkuDetail.goods_content"></rich-text>
								</view>
								<view class="goods-details active" v-else>
									该商家暂无上传相关详情哦！
								</view>
							</view>
							<!-- 	<block v-if="service">
							<view class="detail-content-item" v-show="detailTab == 1 && service.is_display == 1">
								<view class="goods-details" v-if="service.content">
									<rich-text :nodes="service.content" @click="showImg($event)" :data-nodes="service.content"></rich-text>
								</view>
								<view class="goods-details active" v-else>该商品暂无相关售后哦！</view>
							</view>
						</block> -->
						</view>
					</view>

					<!-- 商品推荐 -->
					<ns-goods-recommend :goodsID="goodsSkuDetail.goods_id" ref="goodrecommend"
						route="goodsdetail"></ns-goods-recommend>

					<ns-copyright></ns-copyright>

					<!-- 海报 -->
					<view @touchmove.prevent.stop>
						<uni-popup ref="posterPopup" type="bottom" class="poster-layer">
							<template v-if="poster != '-1'">
								<view>
									<view class="image-wrap">
										<image :src="$util.img(poster)" :show-menu-by-longpress="true" />
									</view>
									<!-- #ifdef MP || APP-PLUS  -->
									<view class="save" @click="saveGoodsPoster()">保存图片</view>
									<!-- #endif -->
									<!-- #ifdef H5 -->
									<view class="save">长按保存图片</view>
									<!-- #endif -->
								</view>
								<view class="close iconfont icon-close" @click="closePosterPopup()"></view>
							</template>
							<view v-else class="msg">{{ posterMsg }}</view>
						</uni-popup>
					</view>

					<!-- 分享弹窗 -->
					<view @touchmove.prevent.stop>
						<uni-popup ref="sharePopup" type="bottom" class="share-popup">
							<view>
								<view class="share-title">分享</view>
								<view class="share-content">
									<!-- #ifdef MP -->
									<view class="share-box">
										<button class="share-btn" :plain="true" open-type="share">
											<view class="iconfont icon-share-friend"></view>
											<text>分享给好友</text>
										</button>
									</view>
									<!-- #endif -->

									<!-- #ifdef MP-WEIXIN -->
									<view class="share-box" v-if="goodsCircle">
										<button class="share-btn" :plain="true" @click="openBusinessView">
											<view class="iconfont icon-haowuquan"></view>
											<text>分享到好物圈</text>
										</button>
									</view>
									<!-- #endif -->

									<view class="share-box" @click="openPosterPopup">
										<button class="share-btn" :plain="true">
											<view class="iconfont icon-pengyouquan"></view>
											<text>生成分享海报</text>
										</button>
									</view>
									<!-- #ifdef H5 -->
									<view class="share-box" @click="copyUrl">
										<button class="share-btn" :plain="true">
											<view class="iconfont icon-fuzhilianjie"></view>
											<text>复制链接</text>
										</button>
									</view>
									<!-- #endif -->
								</view>
								<view class="share-footer" @click="closeSharePopup">
									<text>取消分享</text>
								</view>
							</view>
						</uni-popup>
					</view>
				</view>
			</view>

			<!-- 操作区域 -->
			<!-- 商品底部导航 -->
			<ns-goods-action :safeArea="isIphoneX">
				<template v-if="goodsSkuDetail.goods_state == 1">
					<ns-goods-action-icon text="收藏" @click="editCollection()" :icon="
							whetherCollection == 1
								? 'icon-likefill color-base-text'
								: 'icon-guanzhu'
						" />
					<ns-goods-action-icon text="客服" @click="service()" icon="icon-kefu" :send-data="contactData"
						:chatParam="chatRoomParams" />
					<ns-goods-action-icon 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 && !goodsSkuDetail.sku_spec_format">
						<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="
							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 ? 'active2' : 'active4'" -->
						<ns-goods-action-button 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>
		</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 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 goodsPrice from '@/components/goodsPrice.vue';

	import xiaoStarComponent from '../components/xiao-star-component/xiao-star-component.vue';
	// 商品详情视图
	import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
	import pengpaiFadeinOut from '@/components/pengpai-fadein-out/pengpai-fadein-out.vue';
	import detailView from '../components/goods-detail-view/detail.js';

	export default {
		components: {
			nsGoodsAction,
			nsGoodsActionIcon,
			nsGoodsActionButton,
			uniPopup,
			nsGoodsSku,
			uniCountDown,
			toTop,
			goodsPrice,
			nsGoodsRecommend,
			pengpaiFadeinOut
		},
		provide() {
			return {
				showDiscount: this.showDiscount
			};
		},
		data() {
			return {
				index: 0,
				list: [],

				//是否开启预览，0：不开启，1：开启
				preview: 0,
				token: '',
				videoContext: '',

				// 解决每个商品SKU图片数量不同时，无法切换到第一个，导致轮播图显示不出来
				swiperInterval: 1,
				swiperAutoplay: false,
				swiperCurrent: 1,
				switchMedia: 'img',

				isIphoneX: false, //判断手机是否是iphoneX以上
				// 商品详情
				goodsSkuDetail: {
					goods_id: 0,
					goods_service: []
				},

				deliveryType: null,

				//组合套餐
				bundlingType: false,
				bundling: [{
					bundling_goods: {
						bl_name: '',
						sku_image: ''
					}
				}],

				// 是否可分享到好物圈
				goodsCircle: false,
				memberId: 0,
				shareUrl: '', // 分享链接
				source_member: 0, //分享人的id
				isCommunity: false, //社群弹窗

				poster: '-1', //海报
				posterMsg: '', //海报错误信息
				posterHeight: 0,
				posterParams: {}, //海报所需参数
				detailTab: 0,
				goodsRoute: '',
				posterApi: ''
			};
		},
		mixins: [scroll],
		onLoad(data) {
			this.preview = data.preview || 0;
			this.token = uni.getStorageSync('token');
			this.isIphoneX = this.$util.uniappIsIPhoneX();
			this.blId = data.bl_id || 0;

			// 分享关系
			if (data.source_member) {
				uni.setStorageSync('source_member', data.source_member);
				this.source_member = data.source_member;
			}
			if (this.token && uni.getStorageSync('source_member')) {
				this.$util.onSourceMember(uni.getStorageSync('source_member'));
			}
			// 小程序扫码进入
			if (data.scene) {
				var sceneParams = decodeURIComponent(data.scene);
				sceneParams = sceneParams.split('&');
				if (sceneParams.length) {
					sceneParams.forEach(item => {
						if (item.indexOf('m') != -1)
							uni.setStorageSync('source_member', item.split('-')[1]);
						if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
					});
				}
			}
			// #ifdef MP-WEIXIN
			this.getShareImg();
			// #endif
		},
		async onShow() {
			if (!this.token) return;

			//同步获取商品详情
			await this.getGoodsSkuDetail();

			// 开启预览，禁止任何操作和跳转
			if (this.preview == 0) {
				//组合套餐
				this.getBundling();
			}
		},
		methods: {
			service() {
				uni.navigateTo({
					url: '/pages_tool/news/chat'
				});
			},
			zlsgz() {
				uni.navigateTo({
					url: '/page_goods/components/goods-detail-view/guiz'
				});
			},
			// 获取商品详情
			async getGoodsSkuDetail() {
				let res = await this.$api.sendRequest({
					url: '/bundling/api/bundling/detail',
					async: false,
					data: {
						bl_id: this.blId
					}
				});
				let data = res.data;
				// 没有商品详情
				if (!data) {
					this.$util.redirectTo('/pages_tool/goods/not_exist', {}, 'redirectTo');
				}

				this.goodsSkuDetail = data;
				// 分享参数、链接
				this.shareQuery = 'bl_id=' + this.goodsSkuDetail.bl_id;
				this.shareUrl = this.goodsRoute + '?' + this.shareQuery;
				// 海报参数
				this.posterParams = {
					bl_id: this.goodsSkuDetail.bl_id
				};

				// 处理商品数据
				this.handleGoodsSkuData();

				// 隐藏loading
				if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
			},
			init(params) {
				this.bl_id = params.bl_id;
				this.preview = params.preview;
				this.source_member = params.source_member;
				this.whetherCollection = params.whetherCollection;
				this.posterParams = params.posterParams;

				this.shareUrl = params.shareUrl;
				this.memberId = params.memberId;
				this.goodsRoute = params.goodsRoute;
				this.posterApi = params.posterApi;
				this.getService();

				// 评价设置
				this.videoContext = uni.createVideoContext('goodsVideo');

				// #ifdef MP-WEIXIN
				this.goodsSyncToGoodsCircle();
				// #endif
			},
			//获取当前商品关联的组合套餐
			getBundling() {
				this.$api.sendRequest({
					url: '/bundling/api/bundling/lists',
					data: {
						sku_id: this.skuId
					},
					success: res => {
						this.bundling = res.data;
						if (res.data && res.data.length) {
							for (var i = 0; i < this.bundling[0].bundling_goods.length; i++) {
								if (this.bundling[0].bundling_goods[i].sku_id == this.skuId) {
									this.bundlingType = true;
									break;
								} else {
									this.bundlingType = false;
								}
							}

							for (var i = 0; i < this.bundling.length; i++) {
								for (var j = 0; j < this.bundling[i].bundling_goods.length; j++) {
									if (this.bundling[i].bundling_goods[j].sku_id == this.skuId) {
										this.bundling[i].bundling_goods.splice(j, 1);
									}
								}
							}
						}
					}
				});
			},
			// 处理商品详情数据
			handleGoodsSkuData() {
				this.$langConfig.title(this.goodsSkuDetail.bl_name);

				// 初始化商品详情视图数据
				this.init({
					bl_id: this.goodsSkuDetail.bl_id,
					preview: this.preview,
					source_member: this.source_member,
					posterParams: this.posterParams,
					posterApi: this.posterApi,
					shareUrl: this.shareUrl,
					memberId: this.memberId,
					goodsRoute: this.goodsRoute
				});

				//媒体
				if (this.goodsSkuDetail.video_url) this.switchMedia = 'video';
				this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || '件';

				if (this.goodsRoute != '/page_goods/detail/detail') this.setPublicShare();
				if (this.goodsSkuDetail.is_virtual == 0) this.getEnabledExpressType();
			},

			refreshGoodsSkuDetail(data) {
				this.goodsSkuDetail = Object.assign({}, this.goodsSkuDetail, data);
				if (this.$refs.goodsPromotion)
					this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
				if (this.$refs.goodsDetailView) {
					// 初始化商品详情视图数据
					this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || '件';

					// 解决轮播图数量不一致时，切换到第一个
					if (this.swiperCurrent > this.goodsSkuDetail.sku_images.length) {
						this.swiperAutoplay = true;
						this.swiperCurrent = 1;
						setTimeout(() => {
							this.swiperAutoplay = false;
						}, 40);
					}
				}
				this.$langConfig.title(this.goodsSkuDetail.sku_name);
			},
			/**
			 * 设置公众号分享
			 */
			setPublicShare() {
				let shareUrl = this.$config.h5Domain + this.shareUrl;
				if (this.memberId) shareUrl += '&source_member=' + this.memberId;

				this.$util.setPublicShare({
					title: this.goodsSkuDetail.bl_name,
					desc: '',
					link: shareUrl,
					imgUrl: typeof this.goodsSkuDetail.bundling_goods[0]
				});
			},
			/**
			 * 查询启用的配送方式
			 */
			getEnabledExpressType() {
				this.$api.sendRequest({
					url: '/api/config/enabledexpresstype',
					success: res => {
						if (res.code == 0 && res.data) this.deliveryType = res.data;
					}
				});
			},
			//售后保障查询
			getService() {
				this.$api.sendRequest({
					url: '/api/goods/aftersale',
					success: res => {
						if (res.code == 0 && res.data) {
							this.service = res.data;
						}
					}
				});
			},
			//-------------------------------------社群-------------------------------------
			//添加福利群
			onCommunity() {
				this.isCommunity = true;
			},
			onCloseCommunity() {
				this.isCommunity = false;
			},
			/**
			 *	将商品同步到微信圈子
			 */
			goodsSyncToGoodsCircle() {
				this.$api.sendRequest({
					url: '/goodscircle/api/goods/sync',
					data: {
						goods_id: this.goodsSkuDetail.goods_id
					},
					success: res => {
						if (res.code == 0) {
							this.goodsCircle = true;
						}
					}
				});
			},
			//-------------------------------------分享-------------------------------------
			// 打开分享弹出层
			openSharePopup() {
				this.$refs.sharePopup.open();
			},
			// 关闭分享弹出层
			closeSharePopup() {
				this.$refs.sharePopup.close();
			},
			copyUrl() {
				let text = this.$config.h5Domain + this.shareUrl;
				if (this.memberId) text += '&source_member=' + this.memberId;
				this.$util.copy(text, () => {
					this.closeSharePopup();
				});
			},
			//-------------------------------------海报-------------------------------------
			// 打开海报弹出层
			openPosterPopup() {
				this.getGoodsPoster();
				this.$refs.sharePopup.close();
				this.$refs.posterPopup.open();
				if (this.poster != '-1') {
					setTimeout(() => {
						let view = uni
							.createSelectorQuery()
							.in(this)
							.select('.poster-layer .image-wrap');
						view.fields({
								size: true
							},
							data => {
								let posterWhith = data.width;
								let ratio = parseFloat((740 / posterWhith).toFixed(2));
								if (this.token != '') {
									this.posterHeight = parseInt(1240 / ratio);
								} else {
									this.posterHeight = parseInt(1100 / ratio);
								}
							}
						).exec();
					}, 100);
				}
			},
			// 关闭海报弹出层
			closePosterPopup() {
				this.$refs.posterPopup.close();
			},
			//生成海报
			getGoodsPoster() {
				uni.showLoading({
					title: '海报生成中...'
				});
				//活动海报信息
				if (this.memberId) this.posterParams.source_member = this.memberId;

				this.$api.sendRequest({
					url: this.posterApi,
					data: {
						page: this.goodsRoute,
						qrcode_param: JSON.stringify(this.posterParams)
					},
					success: res => {
						if (res.code == 0) {
							this.poster = res.data.path + '?time=' + new Date().getTime();
						} else {
							this.posterMsg = res.message;
						}
						uni.hideLoading();
					},
					fail: err => {
						uni.hideLoading();
					}
				});
			},
			// 预览图片
			previewMedia(index) {
				var paths = [];
				for (let i = 0; i < this.goodsSkuDetail.sku_images.length; i++) {
					paths.push(
						this.$util.img(this.goodsSkuDetail.sku_images[i])
					);
				}
				uni.previewImage({
					current: index,
					urls: paths
					// longPressActions: {
					// 	itemList: ['发送给朋友', '保存图片', '关注'],
					// 	success: function(data) {
					// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 	},
					// 	fail: function(err) {
					// 		console.log(err.errMsg);
					// 	}
					// }
				});
			},
			swiperImageError(index) {
				this.goodsSkuDetail.sku_images[index] = this.$util.getDefaultImage().goods;
				this.$forceUpdate();
			}
		}
	};
</script>
<style lang="scss">
	@import '@/common/css/goods_detail.scss';
	@import './public/css/detail.scss';
</style>
<style lang="scss" scoped>
	/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 {
		.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;
	}

	/* 拼团样式 */
	.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;
				}
			}
		}
	}
</style>
