<template>
	<view class="mall-detail-page">
		<!-- 页面内容 -->
		<view class="page-content">

			<!-- 返回和分享 -->
			<view class="jc-header">
				<!-- #ifdef APP-PLUS -->
				<view class="bg-ff" :style="'opacity:' + opacity + ';'" v-if="actual_scroll_view_top">
					<!-- 占位 view，避免页面内容出现在状态栏 -->
					<view class="height-status-bar"></view>
				</view>
				<!-- #endif -->

				<view class=" width-100p flex align-center justify-between"
					style="padding:19rpx 30rpx;">

					<!-- 返回 -->
					<view style="position: relative;z-index: 99999;">
						<!-- #ifdef APP-PLUS -->
						<view class="radius-50p text-center" style="width: 60rpx; height: 60rpx;"
							:style="{background: bg_color}"  @click="go(1,4)">
							<text class="tyIcon-un-return-o line-height-60 text-44" :style="{color: color}"
								style="opacity:1;"></text>
						</view>
						<!-- #endif -->
					</view>


					<!-- 吸顶tabs -->
					<view
						class="jc-header-status-bar line-height-header width-100p flex align-center justify-between bg-ff"
						:style="'opacity:' + opacity + ';padding: 0 90rpx;'" v-if="actual_scroll_view_top">
						<view class="flex-one position-relative" style="z-index: 9999;">
							<ty-tab-around :list="tabs_list" :list-key="list_key" :active.sync="tabs_index"
								@click="changeTabs">
							</ty-tab-around>
						</view>
					</view>

					<!-- #ifdef APP-PLUS|H5 -->
					<view style="position: relative;z-index: 99999;" v-if="!isWeixinEnv">
						<view class="radius-50p text-center" style="width: 60rpx; height: 60rpx;"
							:style="{background: bg_color}" @click="share_layer_show = true">
							<text class="tyIcon-fenxiang line-height-60 text-34" :style="{color: color}"
								style="opacity:1;"></text>
						</view>
					</view>
					<!-- #endif -->

					<!-- #ifdef MP-WEIXIN -->
					<button style="position: relative;z-index: 99999;" open-type="share">
						<view class="radius-50p text-center" style="width: 60rpx; height: 60rpx;"
							:style="{background: bg_color}">
							<text class="tyIcon-fenxiang line-height-60 text-34" :style="{color: color}"
								style="opacity:1;"></text>
						</view>
					</button>
					<!-- #endif -->

				</view>
			</view>

			<scroll-view class="scroll_block padding-bottom-safe-footer" :scroll-top="scroll_view_top" scroll-y
				@scroll="scroll" @scrolltolower="scrolltolower">
				<view class="" v-if="product.id && loadFinish">
					<view id="goods">
						<!-- 轮播图 -->
						<view class="swiper_block">
							<ty-swiper-swiper-detail :list="product.carousel"></ty-swiper-swiper-detail>
						</view>

						<!-- 简介 -->
						<view class="padding-lr-30 padding-top-30 padding-bottom-35 bg-ff">
							<view class="flex">
								<view class="line-height-40 text-price text-50 text-main text-bold">
									<text v-if="product.price_min == product.price_max">{{product.price_min}}</text>
									<text
										v-if="product.price_min != product.price_max">{{product.price_min}}-{{product.price_max}}</text>
								</view>
								<view class="margin-left-20 margin-top-15 line-height-25 text-24 text-b3 text-through">
									¥{{product.price_original}}</view>
							</view>

							<view class="margin-top-20 text-34 text-bold">{{product.name}}</view>

							<view class="margin-top-20 text-24 text-98">已售{{product.sales_number}}</view>
						</view>

						<!-- 服务保障 -->
						<view class="bg-ff" v-if="product.mallAttach.length">
							<!-- <ty-bar-attach :list="product.mallAttach"></ty-bar-attach> -->
							<!-- 组件内容 -->
							<view class="padding-lr-30 line-height-80 flex align-center bg-main-light"
								v-if="product.mallAttach.length" @click="isShowAttachServiceLayer = true">
								<text class="text-24 text-main text-bold">保障</text>
								<view class="margin-left-45 flex-one text-cut-one ">
									<block v-for="(item,index) in product.mallAttach" :key="index">
										<text class="margin-lr-15 text-24 text-main" v-if="index > 0">•</text>
										<text class="text-24 text-main">{{item.name}}</text>
									</block>
								</view>
								<text class="tyIcon-fanhui text-18 text-80"></text>
							</view>
						</view>

						<!-- 选择规格 -->
						<view class="padding-lr-30 line-height-100 flex align-center bg-ff"
							v-if="product.is_spec_open==1 && !single_page" @click='skuShow'>
							<view class="text-34 text-bold">规格</view>
							<view class="flex-one margin-left-30 text-right line-height-100 flex">
								<text class="text-28 text-98 text-cut-one flex-one">{{choose_sku_name}}</text>
								<text class="margin-left-15 tyIcon-fanhui text-18 text-80"></text>
							</view>
						</view>

					</view>


					<!-- 评价 -->
					<view id="review" class="margin-top-20 bg-ff">

						<view class="evaluate padding-tb-30" v-if="evalute.total">
							<view class="padding-lr-30 flex align-center">
								<text class="text-34 text-bold">商品评价</text>
								<text class="margin-left-20 text-30 text-main text-bold">{{evalute.total}}</text>
							</view>

							<view>
								<jc-mall-myEvaluateList :load_status="load_status" :list="evalute.data" type="1">
								</jc-mall-myEvaluateList>
							</view>

							<view class="block-center line-height-60 radius-30 border-ed text-center text-24 text-4d"
								style="width: 220rpx;" @click="go('/pages/mall/evaluateList?id='+id)">
								查看全部评价
							</view>
						</view>

						<view class="flex padding-30 bg-ff" v-else>
							<text class="text-28 text-98">暂无评价</text>
						</view>
					</view>

					<!-- 商品详情 -->
					<view id="detail">
						<view class="line-height-90 flex align-center justify-center">
							<view class="border_line"></view>
							<text class="margin-lr-15 text-24 text-98">商品详情</text>
							<view class="border_line"></view>
						</view>
						<view>
							<ty-text-rich-text :html="product.description"></ty-text-rich-text>
						</view>
					</view>

				</view>

				<view class="" v-else-if="!product.id && loadFinish">
					<ty-text-no-data text="商品已过期或已删除" @btnClick="go('/pages/mall/index',3)"></ty-text-no-data>
				</view>

				<!-- 推荐商品列表 -->
				<view class="margin-top-30" id="goods_list">
					<jc-mall-recommendProduct :list="list" :load_status="load_status" :type="type">
					</jc-mall-recommendProduct>
				</view>
			</scroll-view>

			<!-- 底部条 非朋友圈模式-->
			<block v-if="product.id && !single_page">
				<ty-bar-buy-bottom :collect="collect" :number="cart_number" @collect="collectProduct"
					@cart="go('/pages/mall/cart',3)" @account="account" @buy="skuShow">
				</ty-bar-buy-bottom>
			</block>

			<!-- 返回顶部和返回首页 -->
			<view class="btn-block">
				<ty-text-top-home :scroll-top="actual_scroll_view_top" @topClick="topClick"
					@homeClick="go('/pages/mall/index',3)"></ty-text-top-home>
			</view>

		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">
			<!-- 分享浮层 -->
			<ty-layer-share :show.sync="share_layer_show" :title="product.name" :href="product.h5_href"
				:image-url="product.cover_img"></ty-layer-share>

			<block v-if="product.id">
				<!-- 规格弹出框 -->
				<ty-layer-sku :product.sync="product" :show.sync="sku_layer_show" :btn-type="type" @confirm="confirm">
				</ty-layer-sku>

				<!-- 服务保障浮层 -->
				<ty-layer-attach-service :list="product.mallAttach" :show.sync="isShowAttachServiceLayer">
				</ty-layer-attach-service>
			</block>
		</view>
	</view>
</template>

<script>
	import mall from './api/mall.js'
	export default {
		data() {
			return {
				// 商品ID
				productId: '',
				// 商品详情
				product: {},
				// 是否加载完商品详情
				loadFinish: false,
				// 是否微信环境
				isWeixinEnv: false,
				// 服务保障浮层是否显示
				isShowAttachServiceLayer: false,
				// 加载状态
				load_status: '', 
				// 推荐商品列表
				list: [], 
				
				
				
				link_tel: '', //客服手机号
				
				type: 2, //SKU按钮加载样式
				scroll_view_top: 200, //scroll_view滚动距离
				actual_scroll_view_top: 0, //实时滚动的距离

				choose_sku_name: '选择您需要的规格', //选中的SKU名称
				collect: false, //是否收藏
				cart_number: 0, //购物车种类数量

				share_layer_show: false,
				sku_layer_show: false,

				buy_type: '', //购买方式 1--加入购物车 2--立即购买

				evalute: {}, //评论
				href: '',

				opacity: 0, //吸顶条的透明度
				bg_color: 'rgba(0, 0, 0, 0.3)',
				color: '#fff',
				tabs_index: 0,
				tabs_list: [{
					name: '商品',
					index: 0
				}, {
					name: '评价',
					index: 1
				}, {
					name: '详情',
					index: 2
				}, {
					name: '好物推荐',
					index: 3
				}],
				list_key: 'name',

				header_height: 0,
				goods_height: 0,
				review_height: 0,
				detail_height: 0,
				goods_list_height: 0,

				single_page: false,
				
			}
		},

		onLoad(options) {
			// #ifdef MP-WEIXIN
			// 小程序判断是否朋友圈单页模式打开
			this.single_page = getApp().globalData.scene == 1154 ? true : false
			// #endif

			this.productId = options.id || 0
		},

		onShow() {
			if (this.cn.isLogin()) {
				// 判断商品是否收藏
				this.rq.getData('mall/api/Collect/hasCollect', {
					product_id: this.productId
				}).then(res => {
					this.collect = res.data.collect
				})

				// 购物车数量
				this.rq.getData('mall/api/Cart/getCartNumber').then(res => {
					this.cart_number = res.data.cart_number
				})
			}
		},

		onReady() {
			if (this.cn.userAgent() == 'weixin') {
				// 微信公众号不能点击页面按钮分享
				this.isWeixinEnv = true
			}

			// 商品详情
			this.getDetail()

			//推荐列表
			this.loadList(1)

			//增加浏览记录
			if (this.cn.isLogin()) {
				this.browse(1)
			}

			//获取顶部栏高度
			// #ifdef APP-PLUS
			this.header_height = uni.getSystemInfoSync().statusBarHeight + this.cn.rpx2px(88)
			// #endif

			// #ifndef APP-PLUS
			this.header_height = this.cn.rpx2px(88)
			// #endif
		},

		// #ifdef MP-WEIXIN
		// 小程序分享给朋友
		onShareAppMessage(e) {
			if (e.from === 'button') { // 来自页面内分享按钮
				console.log(e.target)
			}
			return {
				title: this.product.name,
				path: 'pages/mall/detail?id=' + this.productId
			}
		},

		// 监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容	
		onShareTimeline() {
			return {
				title: this.product.name, //自定义标题，即朋友圈列表页上显示的标题
				query: 'id=' + this.productId, //自定义页面路径中携带的参数，如 path?a=1&b=2 的 “?” 后面部分
				imageUrl: this.product.cover_img
			}
		},
		// #endif


		methods: {
			// 商品详情
			getDetail() {
				mall.getProduct(this.productId).then(res => {
					this.loadFinish = true
					this.product = res.data.product

					if (this.product.id) {
						
						// 获取客服手机号
						this.getConfig()
			
						// 商品评论
						this.getEvaluate()
			
						// 微信公众号分享
						if (this.cn.userAgent() == 'weixin') {
							this.wx.share({
								title: this.product.name,
								desc: this.product.name,
								link: this.product.h5_href,
								imgUrl: this.product.cover_img
							})
						}
			
						setTimeout(res => {
							const query = uni.createSelectorQuery().in(this)
							query.select('#goods').boundingClientRect(data => {
								this.goods_height = data.height
							}).exec()
							query.select('#detail').boundingClientRect(data => {
								this.detail_height = data.height
							}).exec()
						}, 500)
					}
			
				})
			},
			
			// 切换标签栏
			changeTabs(e) {
				this.scroll_view_top = this.actual_scroll_view_top //将实时的高度传给scroll_view滚动距离
				// console.log(this.scroll_view_top)
				if (e.index == 0) {
					setTimeout(() => {
						this.scroll_view_top = 0.01
					}, 50)
					// this.$nextTick(() => {
					// 	this.scroll_view_top = 0.01

					// 	// this.scroll({
					// 	// 	detail: {
					// 	// 		scrollTop: this.scroll_view_top
					// 	// 	}
					// 	// })
					// });
				} else if (e.index == 1) {
					setTimeout(() => {
						this.scroll_view_top = this.goods_height - this.header_height + 1
					}, 50)
				} else if (e.index == 2) {
					setTimeout(() => {
						this.scroll_view_top = this.goods_height + this.review_height - this.header_height + 1
					}, 50)
				} else if (e.index == 3) {
					setTimeout(() => {
						this.scroll_view_top = this.goods_height + this.review_height + this.detail_height - this
							.header_height + 1
					}, 50)
				}
			},

			// 跟随滚动更改选中状态
			scroll(e) {
				this.actual_scroll_view_top = e.detail.scrollTop

				let height = this.cn.rpx2px(750)
				this.opacity = this.actual_scroll_view_top > height ? 1 : this.actual_scroll_view_top / height

				if (this.actual_scroll_view_top < this.goods_height - this.header_height) { //滚动高度
					this.tabs_index = 0
				} else if (this.actual_scroll_view_top < this.goods_height + this.review_height - this.header_height) {
					this.tabs_index = 1
					this.bg_color = 'rgba(0, 0, 0, 0)'
				} else if (this.actual_scroll_view_top < this.goods_height + this.review_height + this.detail_height - this
					.header_height) {
					this.tabs_index = 2
					this.bg_color = 'rgba(0, 0, 0, 0)'
				} else {
					this.tabs_index = 3
					this.bg_color = 'rgba(0, 0, 0, 0)'
				}

				if (this.actual_scroll_view_top < this.cn.rpx2px(750 / 2)) { //滚动高度
					this.bg_color = 'rgba(0, 0, 0, ' + 0.3 * (this.cn.rpx2px(750) - this.header_height - this
							.actual_scroll_view_top) /
						this.goods_height + ')'
					this.color = '#fff'
				} else if (this.actual_scroll_view_top < this.cn.rpx2px(750) - this.header_height) {
					this.bg_color = 'rgba(0, 0, 0, 0)'
					this.color = '#4d4d4d'
				} else {
					this.bg_color = 'rgba(0, 0, 0, 0)'
				}
			},


			// 滚动到底部，会触发 scrolltolower 事件
			scrolltolower() {
				this.loadList(0)
			},

			// 联系客服
			account() {
				this.cn.callPhone(this.link_tel)
			},

			// 浏览记录
			browse() {
				this.rq.getData('mall/api/Browse/browse', {
					product_id: this.productId
				})
			},

			

			//获取商城设置
			getConfig() {
				this.rq.getData('mall/api/Config/getLinkTel').then(res => {
					this.link_tel = res.data.link_tel
				})
			},

			//商品评论
			getEvaluate() {
				this.rq.getData('mall/api/Evaluate/getEvaluateList', {
					product_id: this.productId,
					page: 1,
					per_page_number: 1
				}).then(res => {
					this.evalute = res.data.list

					setTimeout(res => {
						const query = uni.createSelectorQuery().in(this)
						query.select('#review').boundingClientRect(data => {
							this.review_height = data.height + this.cn.rpx2px(20)
						}).exec()
					}, 1000)
				})
			},

			/**
			 * 获取推荐商品
			 * @param {int} isFirstPage 是否第一页 0--不是 1--是
			 * @date 2022-10-27
			 */
			loadList(isFirstPage) {
				mall.listProduct(this, isFirstPage, '', '', '', 1, '', '', 5)
			},

			// 收藏和取消收藏
			collectProduct() {
				if (!this.cn.isLogin()) {
					uni.navigateTo({
						url: '/pages/user/register/index'
					})
					return false
				}
				this.rq.getData('mall/api/Collect/collect', {
					product_id: this.productId,
					collect: this.collect ? 0 : 1
				}, {
					loading: true
				}).then(res => {
					if (res.code == 0) {
						this.cn.toast(res.msg);
						this.collect = res.data.collect
					}
				})
			},

			// 点击显示SKU浮层
			skuShow(e) {
				if (!this.cn.isLogin()) {
					uni.navigateTo({
						url: '/pages/user/register/index'
					})
					return false
				}
				this.sku_layer_show = true
				this.type = e.type == 1 || e.type == 2 ? 1 : 2
				this.buy_type = e.type == 1 || e.type == 2 ? e.type : ''
			},

			//确认下单
			confirm(e) {
				if (this.product.is_spec_open == 0 && this.product.stock == 0) {
					this.cn.toast('库存不足啦!')
					return false;
				}
				this.choose_sku_name = e.sku_name
				this.buy_type = e.type == 1 ? 1 : e.type == 2 ? 2 : this.buy_type

				if (this.buy_type == 1) { // 加入购物车
					this.rq.getData('mall/api/Cart/cartUpdate', {
						product_id: this.productId,
						sku: e.choose_sku,
						number: e.buy_number,
					}, {
						loading: true
					}).then(res => {
						if (res.code == 0) {
							this.sku_layer_show = false
							this.cn.toast(res.msg)
							this.cart_number = res.data.cart_number
						}
					})
				} else if (this.buy_type == 2) { // 立即购买
					uni.navigateTo({
						url: '/pages/mall/order?product_id=' +
							this.productId + '&sku=' +
							e.choose_sku + '&number=' + e.buy_number + '&buy_type=2'
					})
				}
			},

			// 返回顶部
			topClick() {
				this.changeTabs({
					index: 0
				})
			}
		}
	}
</script>

<style scoped>
	.page_content {
		/* padding-bottom: 108rpx; */
	}

	.scroll_block {
		height: 100vh;
	}

	/* 轮播图 */
	.swiper_block {
		width: 750rpx;
		height: 750rpx;
	}

	.border_line {
		width: 60rpx;
		height: 1rpx;
		background: #ccc;
	}

	.btn-block {
		position: fixed;
		z-index: 900;
		right: 30rpx;
		bottom: calc(var(--window-bottom) + var(--footerHeight) + 40rpx + env(safe-area-inset-bottom));
	}
</style>
