<template>
	<view class="good_detail_page" v-show="data.goodsImageUrl">
		<view class="current_goods">
			<img class="main_img" :src="data.goodsImageUrl" />
			<view class="current_goods_text">
				<text class="goods_title">{{data.goodsDesc}}</text>
				<view class="price">
					<text>￥{{(data.minGroupPrice - data.couponDiscount) / 100 }} 
					<text class="yuanjia">团购价￥{{data.minGroupPrice/100}}
							原价￥{{data.minNormalPrice/100}}</text></text>
				</view>

				<view class="biaoqian">
					<text v-for="(item,index) in data.unifiedTags" :key="index" class="biaoqian_text" v-if="item">{{item}}</text>
				</view>

				<view class="goods_dp">
					<image class="goodsa_dp_img" :src="data.mallImgUrl" mode="aspectFit"></image>
					<view class="goodsa_dp_name">
						<view>{{data.goodsName}}</view>
						<view class="hot">已拼{{data.salesTip}}件</view>
					</view>
				</view>
			</view>
			<view v-for="(item,index) in data.goodsGalleryUrls" :key="index">
				<image class="current_imgs" :src="item" mode="aspectFill"></image>
			</view>
		</view>
		<view type="warn" class="buy_btn">
			<view class="topbtn" @click="toTop()">↑TOP</view>
			<view class="price">
				<view><text class="juanhou">券后</text>
					￥{{(data.minGroupPrice - data.couponDiscount) / 100 }}</view>
				<view class="yuanjia">原价￥{{data.minNormalPrice/100}} 团购价￥{{data.minGroupPrice/100}}
					券￥{{data.couponDiscount/100}}</view>
				<button @click="buy" type="warn" class="btn">领劵购买</button>
			</view>
		</view>
		<!-- #ifdef APP -->
		<view class="fenxiang" @click="fenxiang()">分享</view>
		<!-- #endif -->
		<view class="tuijian_list">
			<view class="tuijian_title">为您推荐</view>
			<scroll-view style="width: 100%;height: 100%;" scroll-y="true" @scrolltolower="getList()">
				<view class="tuijian_item" v-for="(item,index) in list" :key="index">
					<good :data="item" :search_id="item.search_id" :pid="pid"></good>
				</view>
				<uni-load-more :status="moreStatus" color="#FE5353"></uni-load-more>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import good from './good_com/good.vue'
	import { pddDetail,pddLink } from '@/api/store'
	import fenxiang  from './utils/share.js'
	export default {
		components: {
			good
		},

		data() {
			return {
				goodSign:"",
				hasLogin: true,
				data: {},
				id: '',
				list: [],
				page: 1,
				moreStatus: '',
				search_id: '',
				pid: ''
			};
		},
		computed: {
			price() {
				if (!this.data) {
					return;
				}
				if (this.data.coupon_discount && this.data.min_group_price) {
					return (this.data.min_group_price - this.data.coupon_discount) / 100
				}
				return this.data.min_group_price / 100 || ''
			}
		},
		// #ifdef APP
		onBackPress({
			from
		}) {
			if (from == 'backbutton') {
				this.$nextTick(function() {
					uniShare.hide()
				})
				return uniShare.isShow;
			}
		},
		// #endif

		onReachBottom() {
			if (this.moreStatus != 'nomore') {
				this.getList()
			}
		},
		mounted() {
			this.goodSign = this._route.query.goodSign;
			this.getData();
		},
		methods: {
			async buy() {
				pddLink(this.goodSign).then(res=>{

					uni.navigateToMiniProgram({
						appId: res.data.weAppInfo.appId,
						path: res.data.weAppInfo.pagePath
					})
				})
				

				
			},
			doWeb() {
				pddApi.promotion_url_generate(this.data.goods_sign, this.pid, this.search_id).then(
					res => {
						let data = res.data.goods_promotion_url_generate_response
							.goods_promotion_url_list[0]
						console.log('普通链接：', data)
						uni.setStorageSync('webUrl', data.mobile_url)
						// #ifndef MP
						uni.navigateTo({
							url: '/uni_modules/aliea-goods/pages/webview/webview'
						})
						// #endif

						// #ifdef MP
						uni.navigateToMiniProgram({
							appId: data.we_app_info.app_id,
							path: data.we_app_info.page_path
						})
						// #endif
					})
			},
			getData() {
				pddDetail(this.goodSign).then(res=>{
					console.log(res);
					this.data = res.data;
					// this.getList();
					uni.setNavigationBarTitle({
						title: this.data.goodsDesc
					})
					this.toTop()
				})
				
			},
			getList() {
				this.moreStatus = 'loading'
				pddApi.goodsRecommend(this.data.cat_ids[0], this.id, this.pid, this.list.length).then(res => {
					res.data.goods_basic_detail_response.list.forEach((item, index) => {
						item.search_id = res.data.goods_basic_detail_response.search_id
						this.list.push(item)
					})
					if (this.list.length == 0) {
						this.moreStatus = 'nomore'
					} else {
						this.moreStatus = 'more'
					}
				}).catch(err => {
					this.moreStatus = 'error'
				})
			},

			toTop() {
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0
				})
			},
			async fenxiang() {
				//#ifdef APP
				let url = "/#/uni_modules/aliea-goods/pages/goods/goodDetail?id=" + this.id +
					"&search_id=" + this.search_id
				if (this.pid) {
					url += '&p_id=' + this.pid
				}

				fenxiang(this.data.mall_name, url, this.data.goods_desc, this.data.goods_thumbnail_url)
				//#endif
			}
		}
	}
</script>

<style lang="scss">
	.good_detail_page {
		width: 100%;
		height: auto;
		background-color: antiquewhite;

		.fenxiang {
			position: fixed;
			display: flex;
			flex-direction: column;
			right: 15rpx;
			bottom: 270rpx;
			width: 60rpx;
			line-height: 60rpx;
			background-color: #ff5500;
			border-radius: 50%;
			z-index: 1000;
			border: #55aa00 10rpx dashed;
			color: #ffffff;
			padding: 15rpx;
			text-align: center;
			font-size: 28rpx;

		}

		.current_goods {
			width: 100%;
			background-color: antiquewhite;
			display: block;

			.main_img {
				width: 100%;
			}

			.current_imgs {
				width: 750rpx;
				height: 750rpx;
				margin: 10rpx 0rpx;
			}

			.current_goods_text {
				// border: #ccc 1px solid;
				margin: 30rpx;
				padding: 30rpx;
				border-radius: 20rpx;
				background-color: #fff;

				.price {
					position: relative;
					margin: 20rpx 0;
					font-size: 60rpx;
					font-weight: 600;
					color: red;

					.yuanjia {
						margin-left: 20rpx;
						text-decoration: line-through;
						font-size: 28rpx;
						color: #868686;
						font-weight: normal;
					}
				}



				.biaoqian {

					position: relative;

					.biaoqian_text {
						display: inline-block;
						background-color: #ff5500;
						padding: 10rpx;
						margin: 5rpx;
						color: #fff;
						border-radius: 15rpx;
						line-height: 35rpx;
						font-size: 28rpx;
					}
				}

				.goods_title {
					margin-bottom: 20rpx;
					line-height: 40rpx;
					font-weight: bold;
					font-size: 30rpx;
				}

				.goods_dp {
					width: 100%;
					margin-top: 30rpx;
					font-size: 28rpx;
					font-weight: bold;

					.goodsa_dp_img {
						width: 100rpx;
						height: 100rpx;
						vertical-align: top;
						margin-right: 10rpx;
					}

					.goodsa_dp_name {
						display: inline-block;
						line-height: 50rpx;
						font-size: 26rpx;

						.hot {
							color: #ff0000;
							font-weight: bold;
						}
					}

				}
			}
		}

		.buy_btn {

			position: fixed;
			background-color: #ff634e;
			text-align: center;
			z-index: 10;
			width: 750rpx;
			height: 230rpx;
			bottom: 0;
			color: #fff;
			padding: 30rpx;

			.topbtn {
				position: absolute;
				right: 40rpx;
				top: 0rpx;
				width: 100rpx;
				height: 45rpx;
				background-color: #e20000;
				font-size: 28rpx;
				padding: 0;
				line-height: 45rpx;
				color: #fff;
			}

			.price {
				color: #fff;
				font-size: 45rpx;

				.btn {
					width: 250rpx;
					line-height: 60rpx;
					border: #efefef 1px solid;
					border-radius: 20rpx;
					background-color: #ec0000;
					font-size: 38rpx;
				}

				.juanhou {
					color: #fff;
					font-size: 26rpx;
				}

				.yuanjia {
					margin-left: 20rpx;
					font-size: 26rpx;
					color: #e7e7e7;
					font-weight: normal;
					margin: 10rpx auto;
				}
			}
		}

		.tuijian_list {
			margin-top: 20rpx;
			width: 100%;
			height: 100%;

			.tuijian_title {
				width: 100%;
				line-height: 40rpx;
				background-color: #fff;
				padding: 20rpx;
				margin-bottom: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
				border-top: #cfcfcf 1px solid;
				border-bottom: #cfcfcf 1px solid;
			}

			.tuijian_item {
				display: inline-block;
				width: 355rpx;
				margin: 10rpx;
			}
		}



	}
</style>