<template>
	<gui-page v-if="!isLoading">
		<view slot="gBody">
			<view style="position: fixed;top:0;z-index: 99;height: 80rpx;overflow: hidden;width: 100%;">


				<view
					style="position: fixed;z-index: 98;width: 100%;padding-left: 30rpx;background-color: #fff;padding: 10rpx 0;"
					:style="{opacity : !headerClass? 0 : 1}">
					<gui-switch-navigation
						:items="[{id:1,name:'商品'},{id:2,name:'购买须知'},{id:3,name:'评价'},{id:4,name:'详情'},{id:5,name:'推荐'}]"
						@change="navchange" :currentIndex="navIndex" textAlign="center" :isCenter="true"
						activeLineBg="linear-gradient(to right, #9E1A91, #4D0868)" activeDirection="center" :size="0"
						:margin="10" padding="30rpx"
						:activeLineClass="['gui-nav-scale','gui-gtbg-zhuse']"></gui-switch-navigation>
				</view>
			</view>
			<view style="position: relative;background-color: #fff;">


				<!-- 页面主体区域 01 -->
				<view class="mainitems">

					<view style="position: relative;">
						<view class="a" style="width: 750rpx;height: 562rpx; background-color: #fff; z-index: 1;">
							<SlideImage  :video="goods.video" :videoCover="goods.videoCover"
								:images="goods.goods_images" />

							<button @click="onShowShareSheet()"
								style="z-index: 998;position: absolute;top: 20rpx;right: 20rpx;padding: 10rpx 20rpx;background:linear-gradient(to right, #9E1A91, #4D0868;font-size: 23rpx;color: #fff;border-radius: 30rpx; line-height: 30rpx;">分享</button>
						</view>

						<view class="b boxbb"
							style="position: absolute; top: 580rpx; left: 0; width: 100%;   z-index: 1;padding: 0 20rpx;min-height: 140rpx;">
							<view style="background-color: #fff;padding: 20rpx;border-radius: 10rpx;">
								<view class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between">
									<view><text
											style="font-size: 32rpx;font-weight: bold;color: #b53190;">￥{{ goods.goods_price_min }}</text>
										<text v-if="goods.line_price_min > 0" class="original-price"
											style="margin-left: 10rpx;">￥{{ goods.line_price_min }}</text>
									</view>
									<view style="color: #9e9e9e;font-size: 23rpx;">已售{{ goods.goods_sales }}件</view>
								</view>
								<view style="font-size: 20rpx;">
									<text></text>未预约未核销随时退
								</view>
								<view style="margin: 10rpx 0;font-weight: bold;">
									{{goods.goods_name}}{{goods.goods_name.length}}
								</view>
							</view>

							<view style="margin-top: 20rpx;" v-if="goods.shop">
								<view style="background-color: #fff;padding: 20rpx;border-radius: 10rpx;"
									@click="handleTargetExtract(goods.shop.shop_id)">
									<view class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between">
										<view style="font-size: 28rpx;font-weight: bold;">适用门店</view>
										<view style="color: #9e9e9e;font-size: 24rpx;font-weight: bold;">联系商家</view>
									</view>
									<view style="margin:20rpx 0;display: flex;font-size: 24rpx;">
										<view>
											<image :src="goods.shop.logo_url"
												style="width: 80rpx;height: 80rpx;border-radius: 50%;margin-right:20rpx;">
											</image>
										</view>
										<view style="line-height: 40rpx;">
											<view>{{goods.shop.shop_name}}</view>
											<view style="color: #9e9e9e;"><text class="gui-icons "
													style="margin-right: 10rpx;">&#xe607; </text> 营业时间
												{{goods.shop.shop_hours}}
											</view>
										</view>
									</view>
									<view style="color: #9e9e9e;">

										<u-icon name="map"></u-icon><text>{{goods.shop.full_address}} </text>
										<u-icon name="arrow-right"></u-icon>
									</view>
								</view>
							</view>

							<view>
								<view class="mainitems" style="margin-top: 20rpx;">
									<view style="padding: 20rpx;border-radius: 10rpx;background-color: #fff;">
										<view
											class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between">
											<view style="font-size: 30rpx;font-weight: bold;padding-bottom: 30rpx;">购买须知
											</view>
										</view>
										<view>
											<view class="xz-item">
												<view style="font-weight: bold;">抢购日期</view>
												<view class="xz-content">即日 至 {{goods.become_time}}</view>
											</view>
											<view class="xz-item">
												<view style="font-weight: bold;">使用日期</view>
												<view class="xz-content">即日 至 {{goods.use_time}}</view>
											</view>
											<view class="xz-item">
												<view style="font-weight: bold;">可用时间</view>
												<view class="xz-content">{{goods.times.name}}</view>
											</view>
											<view class="xz-item">
												<view style="font-weight: bold;">使用方式</view>
												<view class="xz-content">{{goods.uses.name}}</view>
											</view>

											<view class="xz-item">
												<view style="font-weight: bold;">使用说明</view>
												<mp-html :content="goods.contents" />
											</view>

										</view>

									</view>
									<view style="height: 20rpx;"></view>
								</view>
								<view class="mainitems">
									<view style="border-radius: 10rpx;background-color: #fff;">
										<Comment v-if="!isLoading" :goods-id="goodsId" :limit="2" />
									</view>
									<view style="height: 20rpx;"></view>
								</view>
								<view class="mainitems">
									<view style="padding: 20rpx;border-radius: 10rpx;background-color: #fff;">
										<view
											class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between"
											style="margin-bottom: 20rpx;">
											<view style="font-size: 30rpx;font-weight: bold;">图文详情</view>
										</view>
										<mp-html :content="goods.content" />
										<view style="margin-top: 20rpx;text-align: center;line-height: 50rpx;"
											v-if="store && store.wxh">
											<view style="color: #A51480 ;font-weight: bold;">吉媒集团客服微信号：{{store.wxh}}
											</view>
											<view v-if="store.wxmc" style="font-weight: bold;">{{store.wxmc}}</view>
											<view v-if="store.gzsj">工作时间：{{store.gzsj}}</view>
											<view>更多订单详情咨询</view>
											<view>可添加吉媒婚恋专属客服微信</view>
										</view>
									</view>
									<view style="height: 20rpx;"></view>
								</view>
								<view class="mainitems">
									<recommended />
									<view style="height: 120rpx;"></view>
								</view>
							</view>
						</view>


					</view>

				</view>

			</view>
			<!-- 分享菜单 -->
			<share-sheet v-model="showShareSheet" :shareTitle="goods.goods_name" :shareImageUrl="goods.goods_image"
				:posterApiCall="posterApiCall" :posterApiParam="{ goodsId }" />
			<view style="height: 130rpx;"></view>
			<view class="footer-fixed">
				<view class="footer-container">
					<!-- 导航图标 -->
					<view class="foo-item-fast">
						<!-- 首页 -->
						<view class="fast-item fast-item--home" @click="onTargetHome">
							<view class="fast-icon">
								<text class="iconfont icon-shouye"></text>
							</view>
							<view class="fast-text">
								<text>首页</text>
							</view>
						</view>
						<!-- 客服 (仅微信小程序端显示) -->
						<!-- 	<button class="btn-normal" @click="zaixiankefu">
							<view class="fast-item" style="width: 160rpx;">
								<view class="fast-icon">
									<text class="iconfont icon-kefu1"></text>
								</view>
								<view class="fast-text">
									<text>在线客服助手</text>
								</view>
							</view>
						</button> -->
						<button class="btn-normal" @click="open1">
							<view class="fast-item" style="width: 160rpx;">
								<view class="fast-icon">
									<text class="iconfont icon-kefu1"></text>
								</view>
								<view class="fast-text">
									<text>专属客服通道</text>
								</view>
							</view>
						</button>
					</view>
					<!-- 操作按钮 -->
					<view class="foo-item-btn">
						<view class="btn-wrapper">
							<view class="btn-item" @click="onShowSkuPopup(3)"
								style="background: linear-gradient(to bottom, #90178b, #590b6e);color: #fff;">
								<text>立即抢购</text>
							</view>

						</view>
					</view>
				</view>
			</view>
			<gui-popup ref="guipopup1">
				<view class="gui-relative gui-box-shadow gui-img-in">
					<gui-image :src="goods.service" :width="580"></gui-image>
					<!-- 关闭按钮 -->
					<text class="gui-block-text demo-close gui-icons gui-color-white gui-absolute-rt"
						@tap.stop="close1">&#xe78a;</text>
				</view>
			</gui-popup>
			<!-- 商品SKU弹窗 -->
			<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart" />
		</view>
		<shortcut bottom="120rpx" />
	</gui-page>
</template>
<script>
	var graceJS = require('@/GraceUI5/js/grace.js');
	import {
		getSceneData
	} from '@/core/app'
	import * as SettingApi from '@/api/setting'
	import * as GoodsApi from '@/api/goods'
	import * as CartApi from '@/api/cart'
	import Recommended from '@/components/recommended'
	import ShareSheet from '@/components/share-sheet'
	import SlideImage from './components/SlideImage'
	import SkuPopup from './components/SkuPopup'
	import Comment from './components/Comment'
	import Service from './components/Service'

	export default {
		components: {
			Recommended,
			ShareSheet,
			SlideImage,
			SkuPopup,
			Comment,
			Service
		},
		data() {
			return {
				// 正在加载
				isLoading: true,
				// 当前商品ID
				goodsId: null,
				// 商品详情
				goods: {},
				// 购物车总数量
				cartTotal: 0,
				// 显示/隐藏SKU弹窗
				showSkuPopup: false,
				// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
				skuMode: 1,
				// 显示/隐藏分享菜单
				showShareSheet: false,
				// 获取商品海报图api方法
				posterApiCall: GoodsApi.poster,
				// 导航元素
				navItems: [{
					id: 1,
					name: '导航标签 1'
				}, {
					id: 2,
					name: '导航标签 2'
				}, {
					id: 3,
					name: '导航标签 3'
				}, {
					id: 4,
					name: '导航标签 4'
				}],
				// 激活导航的索引
				navIndex: 0,
				// 页面滚动延迟 timer
				timer: null,
				// 窗口高度
				winHeight: 100,
				// 滚动条位置
				pageScrollTop: 0,
				// 是否为点击滚动
				isTapScroll: false,
				headerClass: false,
				store: '',
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 记录query参数
			this.onRecordQuery(options)
			// 加载页面数据
			this.onRefreshPage()
			this.getSetting()
		},

		onPageScroll: function(e) {
			// 页面滚动时检查页面元素滚动位置
			// 从而决定对应激活的导航
			if (e.scrollTop > 10) {
				// 此处 custom-header-bg 来自 custom.scss
				this.headerClass = true;
			} else {
				this.headerClass = false;
			}
			if (this.isTapScroll) {
				return;
			}
			if (this.timer != null) {
				clearTimeout(this.timer);
			}
			this.timer = setTimeout(() => {
				graceJS.selectAll('.mainitems', (items) => {
					for (let i = 0; i < items.length; i++) {
						if (items[i].top >= 0) {
							this.navIndex = i;
							break;
						}
					}
				});
			}, 200);
		},

		methods: {
			zaixiankefu() {
				window.location.href = 'https://work.weixin.qq.com/kfid/kfc6206617a5de54b2d'; // 跳转到相对路径下的网页
			},
			open1: function() {

				if (this.goods.service) {
					this.$refs.guipopup1.open();
				}
			},
			close1: function() {
				this.$refs.guipopup1.close();
			},
			getSetting() {
				let _this = this
				SettingApi.data()
					.then(result => {
						_this.store = result.data.setting.store


					})

			},
			handleTargetExtract(shopId) {
				this.$navTo('pages/shop/detail', {
					shopId
				})
			},
			fanhui() {
				uni.navigateBack()
			},
			navchange: function(index) {
				this.navIndex = index;
				// 调整滚动条
				this.isTapScroll = true;
				var needTop = 0;
				graceJS.selectAll('.mainitems', (items) => {
					for (let i = 0; i < this.navIndex + 1; i++) {
						if (i > 0) {
							needTop += items[i].height;
						}
					}
					uni.pageScrollTo({
						scrollTop: needTop,
						duration: 300
					});
					setTimeout(() => {
						this.isTapScroll = false;
					}, 300);
				});
			},

			// 记录query参数
			onRecordQuery(query) {
				const scene = getSceneData(query)
				this.goodsId = query.goodsId ? parseInt(query.goodsId) : parseInt(scene.gid)
			},

			// 刷新页面数据
			onRefreshPage() {
				const app = this
				app.isLoading = true
				Promise.all([app.getGoodsDetail(), app.getCartTotal()])
					.finally(() => app.isLoading = false)
			},

			// 获取商品信息
			getGoodsDetail() {
				const app = this
				return new Promise((resolve, reject) => {
					GoodsApi.detail(app.goodsId)
						.then(result => {
							app.goods = result.data.detail





							resolve(result)
						})
						.catch(reject)
				})
			},

			// 获取购物车总数量
			getCartTotal() {
				const app = this
				return new Promise((resolve, reject) => {
					CartApi.total()
						.then(result => {
							app.cartTotal = result.data.cartTotal
							resolve(result)
						})
						.catch(reject)
				})
			},

			// 更新购物车数量
			onAddCart(total) {
				this.cartTotal = total
			},

			/**
			 * 显示/隐藏SKU弹窗
			 * @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
			 */
			onShowSkuPopup(skuMode = 1) {
				this.skuMode = skuMode
				this.showSkuPopup = !this.showSkuPopup
			},

			// 显示隐藏分享菜单
			onShowShareSheet() {
				this.showShareSheet = !this.showShareSheet
			},

			// 跳转到首页
			onTargetHome(e) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},

			// 跳转到购物车页
			onTargetCart() {
				this.$navTo('pages/cart/index')
			},

		},

		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			const app = this
			// 构建页面参数
			const params = app.$getShareUrlParams({
				goodsId: app.goodsId,
			})
			return {
				title: app.goods.goods_name,
				path: `/pages/goods/detail?${params}`
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			const app = this
			// 构建页面参数
			const params = app.$getShareUrlParams({
				goodsId: app.goodsId,
			})
			return {
				title: app.goods.goods_name,
				path: `/pages/goods/detail?${params}`
			}
		}
	}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}
</style>
<style lang="scss" scoped>
	.xz-item {
		padding-top: 10rpx;
	}

	.xz-content {
		font-size: 24rpx;
		color: #c8c8c8;
		padding: 10rpx 0;
		padding-left: 10rpx;
	}

	.demo-close {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		opacity: 0.88;
		text-align: center;
		font-size: 58rpx;
	}

	.demo-lr {
		flex: 1;
		height: 200rpx;
	}

	.demo-lr-items {
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		overflow: hidden;
	}

	@import "./detail.scss";
</style>