<template>
	<view class="content" v-if="!loding">
		<!-- 轮播主图 -->
		<view class="goods-covers">
			<swiper class="swiper" indicator-dots indicator-active-color="#8b64fd">
				<block v-if="goodsObj.pictures.length > 0">
					<swiper-item v-for="(item, index) in goodsObj.pictures" :key="index">
						<image class="swiper-item" :src="item" mode="aspectFill" />
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 产品详情 -->
		<view class="goods-content">
			<view class="header">
				<view class="flex-box">
					<view class="price"><text>￥</text>{{goodsObj.price.show}} 
						<span class='shuijing' v-if='goodsObj.price.pv>0'>
							+ <span> {{goodsObj.price.pv}} </span><image style="width: 20rpx;" src="/static/icons/crystal-icon.png" mode="widthFix" /> 
						</span>
					</view>
					<!-- <view class="sales">累计交易{{goodsObj.sales}}次</view> -->
				</view>
				<view class="coupon" v-if="couponSee.length > 0" @click="couponsOpne">
					<view class="coupon-list" v-for="(item, index) in couponSee" :key="index">
						<view class="coupon-label">
							{{item.title}}
						</view>
					</view>
					<view class="coupon-btn">领券<uni-icons type="arrowright" size="12" color="#e1293f"></uni-icons></image>
					</view>
				</view>
				<view class="title">
					<view class="title-hot" v-if="goodsObj.specal_tags.is_allow_values">
						{{goodsObj.specal_tags.is_allow_values}}
					</view>
					<view class="title-hot" v-if="goodsObj.specal_tags.is_self">{{goodsObj.specal_tags.is_self}}</view>
					{{goodsObj.name}}
				</view>
				<!-- <view class="sub-title">{{goodsObj.description}}</view> -->
			</view>
			<!-- 商家信息 -->
			<view class="store">
				<image class="logo" :src="goodsObj.shop.cover" mode="aspectFill"></image>
				<view class="store-cont">
					<view class="store-title">{{goodsObj.shop.name}}</view>
					<view class="rate">
						<uni-rate :readonly="true" color="#ddd" active-color="#ee4c47" :value="goodsObj.company.star"
							:size="14" />
					</view>
					<view class="openbtn" @click="onOpenWechat">进店<image class="openbtn-img"
							src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="tooSee">
					<view class="tooSee-label"
						@click="$Router.push({name: 'GoodsChain', params: {id: goodsObj.goods_id}})">
						区块链证书
						<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png"
							mode="aspectFill"></image>
					</view>
					<view class="tooSee-label"
						@click="$Router.push({name: 'GoodsAttestation', params: {id: goodsObj.goods_id}})">
						商品认证
						<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png"
							mode="aspectFill"></image>
					</view>
					<view class="tooSee-label"
						@click="$Router.push({name: 'GoodstracedTo', params: {id: goodsObj.goods_id}})">
						权证溯源
						<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png"
							mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<!-- 产品规格 -->
			<view class="size">
				<view class="size-item nowrap">
					<label class="title">规格</label>
					{{goodsObj.skus[0].goods_name}}
				</view>
				<view class="size-item nowrap">
					<label class="title">说明</label>
					特价商品不可与优惠券叠加使用
				</view>
				<view class="size-item nowrap" v-if="goodsObj.services.length > 0">
					<label class="title">服务</label>
					<view class="goods-serve" @click="serveOpne">
						<image class="goods-serve-img" src="../../static/icons/goods_buy.png" mode="aspectFill"></image>
						<view class="nowrap goods-serve-name"><text v-for="(item, index) in goodsObj.services" :key='item.service_id'>{{item.name}}</text></view>
						<image class="goods-serve-img" src="../../static/icons/goods_spot.png" mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
			<!-- 产品详情 -->
			<view class="product">
				<block v-for="(item, index) in goodsObj.content" :key="index">
					<image :src="item" mode="widthFix"></image>
				</block>
			</view>
		</view>
		<!-- footer -->
		<view class="footer">
			<button class="btn" size="default" @click="buyGoods">立即购买</button>
		</view>

		<!-- 优惠券弹出 -->
		<uni-popup ref="couponsPopup">
			<view class="coupons-popup">
				<view class="coupons-header">
					<view class="title">优惠券</view>
					<image @click="couponsClose" class="close" src="../../static/icons/goods_close.png" mode=""></image>
				</view>
				<view class="coupons-cont">
					<view class="coupons-name">
						可领取的优惠券
					</view>
					<view class="coupons-list" v-for="(item , index) in coupons" :key="index">
						<view class="coupons-tips" v-if="item.type">
							<!-- value == 1服务券    value == 2代金券   value == 3提货券 -->
							<text class="coupons-tips-text" v-if="item.type.value == '1'">服务券</text>
							<text class="coupons-tips-text" v-else-if="item.type.value == '2'">代金券</text>
							<text class="coupons-tips-text" v-else>提货券</text>
						</view>
						<view class="coupons-left" v-if="item.type.value == '2'">
							<view class="coupons-number">
								<text>￥</text>{{item.price}}
							</view>
							<view class="coupons-full">
								满{{item.full}}可用
							</view>
						</view>
						<view class="coupons-left" v-if="item.type.value == '1' || item.type.value =='3'">
							<image :src="item.cover" mode="aspectFill" class="coupon-left-img" />
						</view>
						<view class="coupons-left" v-else-if="item.type.value == '3'">
							<view class="coupons-number coupons-small">
								提货券
							</view>
						</view>
						<view class="coupons-center">
							<view class="nowrap coupons-title">
								{{item.title}}
							</view>
							<view class="coupons-time" v-if="item.time">
								{{item.time.interval}}
							</view>
						</view>

						<view v-if="item.can.get" class="coupons-right" @click="drawCoupons(item.coupon_id, index)">
							领取
						</view>
						<view v-else class="coupons-right coupons-right-active">
							已领取
						</view>
					</view>
				</view>
				<view class="coupons-true" @click="couponsClose">
					确定
				</view>
			</view>
		</uni-popup>

		<!-- 服务保障弹出 -->
		<uni-popup ref="servePopup">
			<view class="coupons-popup">
				<view class="coupons-header">
					<view class="title">保障</view>
					<image @click="serveClose" class="close" src="../../static/icons/goods_close.png" mode=""></image>
				</view>
				<view class="serve-cont">
					<view class="serve-label" v-for="(item, index) in goodsObj.services" :key="index">
						<view class="serve-label-name">
							{{item.name}}
						</view>
						<view class="serve-label-text">
							{{item.content}}
						</view>
					</view>
				</view>
				<view class="coupons-true" @click="serveClose">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		goods,
		managesCoupons
	} from '@/apis/interfaces/goods'
	import userAuth from '@/public/userAuth'
	import UniShare from 'uni_modules/uni-share/js_sdk/uni-share.js'
	const uniShare = new UniShare()
	import {config} from '@/apis/index.js'
	export default {
		data() {
			return {
				loding: true,
				goodsObj: {},
				identity: '',
				company: {},
				coupons: {},
				couponSee: ""
			};
		},
		created() {
			goods(this.$Route.query.id).then(res => {
				this.loding = false
				this.goodsObj = res
				this.identity = res.identity.id || ''
				this.company = res.company
				this.couponSee = res.coupons.slice(0, 3)
				this.coupons = res.coupons
			})
		},
		methods: {
			// 提交购买单
			buyGoods() {
				let token = this.$store.getters.getToken
				if (token == '') {
					this.$Router.push({name: 'Login'})
					return
				}
				uni.navigateTo({
					url: '/pages/goods/confirmOrder?qty=1&type=2&goods_sku_id=' + this.goodsObj.skus[0].sku_id
				})
			},
			// 打开微信小程序
			onOpenWechat() {
				plus.share.getServices(res => {
					let sweixin = null;
					for (let val of res) {
						if (val.id === 'weixin') {
							sweixin = val
						}
					}
					/**  以此为例子 显示跳转引导页
					 *    'index_4'
					 *     index   跳小程序企业首页
					 *     4       企业id
					 **/
					if (sweixin != null) {
						sweixin.launchMiniProgram({
							id: this.company.original_id,
							path: 'pages/login/guide?scene=index_' + this.company.company_id
						})
					} else {
						uni.showToast({
							title: '当前环境不支持打开微信小程序',
							icon: 'none'
						})
					}
				})
			},

			// 领取优惠券
			drawCoupons(id,index) {
				let token = this.$store.getters.getToken
				if (token == '') {
					let userLogin = new userAuth()
					userLogin.Login()
					return
				}
				managesCoupons(id).then(res => {
					uni.showToast({
						title: '领取成功',
						type: 'primary',
						duration: 3000
					})
					this.coupons[index].can = res.can
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.message
					})
				})
			},

			// 选择优惠券-显示
			couponsOpne() {
				this.$refs.couponsPopup.open('bottom')
			},

			// 选择优惠券-隐藏
			couponsClose() {
				this.$refs.couponsPopup.close()
			},

			// 查看保障服务-显示
			serveOpne() {
				this.$refs.servePopup.open('bottom')
			},

			// 查看保障服务-隐藏
			serveClose() {
				this.$refs.servePopup.close()
			},
			// 顶部菜单点击了分享功能
			onNavigationBarButtonTap() {
				let invite = this.goodsObj.user_invite || ''
				let goods ='^GoodsId/$-?' + this.goodsObj.goods_id
				let shareCode = invite === '' ?goods:invite.slice(0,2) + '$InviTaTiOn$CoDe/$-?' + invite.substring(2)+goods
				uniShare.show({
					content: { 
						type: 0,
						href: 'https://www.lianshang.vip/app?invite=' + shareCode,
						title: '链商星球 共创未来，一起搭建 链商经济的世界~',
						summary: '链商星球APP你值得拥有~每日签到领贡献值~',
						imageUrl: config.apiUrls+'images/top_logo.png'
					},
					menus: [{
							"img": "/static/icons/payWay_icon_00.png",
							"text": "微信好友",
							"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
								"provider": "weixin",
								"scene": "WXSceneSession"
							}
						},
						{
							"img": "/static/icons/share-pyq.png",
							"text": "微信朋友圈",
							"share": {
								"provider": "weixin",
								"scene": "WXSenceTimeline"
							}
						}
					],
					cancelText: "取消分享",
				}, e => { 
					if(uniShare.isShow){
					  console.log('shareCode',shareCode)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		padding-top: 100%;

	}

	// 轮播图
	.goods-covers {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		padding-top: 100%;

		.swiper {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			.swiper-item {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 商品详情
	.goods-content {
		position: relative;
		z-index: 2;
		background-color: white;
		border-radius: $radius $radius 0 0;
		padding-bottom: calc((#{$padding} * 2) + (env(safe-area-inset-bottom) / 2) + 90rpx);
		padding-bottom: calc((#{$padding} * 2) + (constant(safe-area-inset-bottom) / 2) + 90rpx);

		// 详情
		.header {
			padding: 0 $padding $padding;

			.title {
				font-size: $title-size;
				font-weight: bold;
				line-height: 50rpx;

				.title-hot {
					display: inline-block;
					background-image: linear-gradient(to left, #fee195, #fee195);
					font-size: 24rpx;
					border-radius: 50rpx;
					padding: 0 10rpx;
					height: 34rpx;
					line-height: 36rpx;
					margin: 6rpx 10rpx 0 0;
				}
			}

			.sub-title {
				line-height: 40rpx;
				font-size: $title-size-sm;
				color: $text-gray;
				padding-bottom: $padding/3;
			}

			.flex-box {
				display: flex;
				justify-content: space-between;
				line-height: 90rpx;

				.price {
					font-weight: bold;
					color: $text-price;
					font-size: $title-size + 14;
					.shuijing{
						font-size: 26rpx;color: #999;font-weight: normal;padding-left: 20rpx;
					}
					text {
						font-size: 70%;
					}

					width: calc(60% - #{$padding});
				}

				.sales {
					font-size: $title-size-sm;
					color: $text-gray;
					width: 40%;
					text-align: right;
				}
			}

			// 新增优惠券
			.coupon {
				background-color: #fef2f2;
				color: #e1293f;
				border-radius: 8rpx;
				border: 1rpx solid #ffe5e5;
				padding: $padding - 15;
				box-sizing: border-box;
				display: flex;
				position: relative;
				margin-bottom: $margin - 10;

				.coupon-list {
					font-size: 22rpx;

					.coupon-label {
						display: inline-block;
						border: 1rpx solid #e998a1;
						border-radius: 50rpx;
						padding: 0 15rpx;
						height: 34rpx;
						line-height: 34rpx;
						margin-right: $margin - 10;
					}
				}

				.coupon-btn {
					position: absolute;
					right: $padding - 20;
					top: 0;
					line-height: 60rpx;
					font-size: 24rpx;
					display: flex;
					font-weight: 700;

					.coupon-btn-img {
						width: 22rpx;
						height: 22rpx;
						margin: 20rpx 0 0 4rpx;
					}
				}
			}
		}

		// 新增服务
		.goods-serve {
			display: flex;

			.goods-serve-img {
				width: 36rpx;
				height: 36rpx;
				margin-top: 26rpx;
			}

			.goods-serve-name {
				margin: 0 30rpx 0 20rpx;
				width: calc(100% - 122rpx);

				text {
					padding-right: $padding;
					position: relative;

					&:last-child {
						padding-right: 0;
					}
				}
			}
		}

		// 店铺
		.store {
			position: relative;
			margin: 0 $margin;
			background: #F8F8F8;
			border-radius: $radius/2;
			padding: $padding;
			min-height: 220rpx;

			.logo {
				position: absolute;
				left: $margin;
				top: $margin;
				width: 98rpx;
				height: 98rpx;
				border-radius: $radius/2;
			}

			.store-cont {
				position: absolute;
				width: 100%;
				left: 0;
				top: 0;
				padding-left: 150rpx;
				padding-top: 20rpx;
				box-sizing: border-box;
				height: 140rpx;
			}

			.tooSee {
				position: absolute;
				top: 150rpx;
				left: 0;
				font-size: 24rpx;
				padding-left: $padding;
				box-sizing: border-box;

				.tooSee-label {
					background-color: #fd683e;
					border-radius: 8rpx 4rpx 4rpx 6rpx;
					color: #FFFFFF;
					height: 48rpx;
					line-height: 48rpx;
					padding: 0 $padding - 15;
					box-sizing: border-box;
					display: inline-block;
					margin-right: $margin * 2;
					position: relative;

					&::after,
					&::before {
						content: '';
						position: absolute;
					}

					&::after {
						right: -40rpx;
						top: 0;
						background-color: #f64c37;
						width: 40rpx;
						height: 100%;
						border-radius: 4rpx 8rpx 8rpx 4rpx;
					}

					&::before {
						right: -1rpx;
						top: 5%;
						border: 1rpx dashed #fb745a;
						height: 90%;
						z-index: 2;
						box-sizing: border-box;
					}

					&:last-child {
						margin: 0;
					}

					&:first-child {
						background-color: #f2d7aa;
						color: #362507;
					}

					&:first-child::after {
						background-color: #f1d599;
					}

					&:first-child::before {
						border-color: #fae2b9;
					}

					.tooSee-label-img {
						position: absolute;
						right: -34rpx;
						top: 12rpx;
						width: 28rpx;
						height: 28rpx;
						z-index: 9;
					}

					&:first-child .tooSee-label-img {
						filter: brightness(.2)
					}
				}
			}

			.store-title {
				font-size: $title-size-lg;
				font-weight: bold;
				line-height: 60rpx;
				color: $text-color;
				margin-bottom: 10rpx;
			}

			// rate
			.openbtn {
				position: absolute;
				right: $margin - 10;
				top: $margin * 3.5;
				color: #848484;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: $title-size-m;
				margin-top: -30rpx;
				display: flex;

				.openbtn-img {
					width: 32rpx;
					height: 32rpx;
					filter: brightness(.5);
					margin-top: 14rpx;
				}
			}
		}

		// 产品规格
		.size {
			margin-top: $margin;
			border-top: solid 20rpx #F8F8F8;
			border-bottom: solid 20rpx #F8F8F8;

			.size-item {
				position: relative;
				padding: 0 $padding 0 ($padding + 100);
				line-height: 90rpx;
				font-size: $title-size-m;

				&::after {
					position: absolute;
					left: $margin;
					right: 0;
					bottom: 0;
					content: " ";
					height: 1rpx;
					background-color: $border-color;
				}

				&:last-child::after {
					display: none;
				}

				.title {
					position: absolute;
					left: $margin;
					top: 0;
					font-weight: bold;
				}
			}
		}

		// 产品详情
		.product {
			image {
				vertical-align: top;
				width: 100%;
			}
		}
	}

	// 立即购买
	.footer {
		padding: $padding;
		background: white;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		box-sizing: border-box;
		.btn[size='default'] {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			padding: 0;
			border-radius: 0;
			box-sizing: border-box;
			background: $mian-color;
			color: white;
			font-weight: bold;
			font-size: $title-size;
			margin-bottom: calc(env(safe-area-inset-bottom) / 2);
			margin-bottom: calc(constant(safe-area-inset-bottom) / 2);
		}
	}

	// 优惠券弹出样式
	.coupons-popup {
		background-color: #FFFFFF;
		border-radius: 40rpx 40rpx 0 0;
		padding: $padding;
		box-sizing: border-box;

		.coupons-header {
			text-align: center;
			position: relative;
			margin-bottom: $margin*1.5;

			.title {
				font-weight: 700;
			}

			.close {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 2;
				width: 38rpx;
				height: 38rpx;
			}
		}

		.coupons-cont {
			.coupons-name {
				color: #616065;
				font-size: 30rpx;
			}

			.coupons-list {
				border: 2rpx solid #d6b9be;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				margin-top: $margin;

				// background-color: red;
				.coupons-tips {
					// background-color: #211e17;
					background-image: linear-gradient(to right, #f8e5c0, #d6a46a);
					color: #8d4928;
					position: absolute;
					border-radius: 0 0 20rpx 0;
					padding: 0 8rpx;
					height: 34rpx;
					line-height: 34rpx;
					left: 0;
					top: 0;
					z-index: 10;

					.coupons-tips-text {
						font-size: 24rpx;
						transform: scale(.85);
						display: block;
					}
				}

				.coupons-left {
					background-color: #fdedee;
					color: #aa55ff;
					width: 190rpx;
					text-align: center;
					padding: $padding - 10 0;
					border-right: 2rpx dashed #eccdd4;

					.coupon-left-img {
						width: 180rpx;
						height: 100rpx;
						border-radius: 20rpx;
					}

					.coupons-number {
						font-size: 40rpx;
						font-weight: 600;

						text {
							font-size: 24rpx;
						}

						&.coupons-small {
							font-size: 32rpx;
							padding: 20rpx 0;
						}
					}

					.coupons-full {
						font-size: 24rpx;
					}
				}

				.coupons-center {
					position: absolute;
					width: 100%;
					left: 0;
					top: 0;
					padding: $padding - 10 130rpx 0 220rpx;
					box-sizing: border-box;
					font-size: 28rpx;

					.coupons-time {
						font-size: 24rpx;
						margin-top: 10rpx;
						color: #514c51;
					}
				}

				.coupons-right {
					position: absolute;
					right: 20rpx;
					top: 36rpx;
					width: 110rpx;
					text-align: center;
					background-color: #aa55ff;
					color: #FFFFFF;
					border-radius: 80rpx;
					font-size: 24rpx;
					line-height: 52rpx;

					&.coupons-right-active {
						background-color: #adadad;
						color: #FFFFFF;
					}
				}
			}
		}

		.coupons-true {
			background-image: linear-gradient(to right, #aa55ff, #aa55ff);
			color: #FFFFFF;
			border-radius: 80rpx;
			line-height: 84rpx;
			text-align: center;
			margin-top: $margin*5;
		}
	}

	// 新增服务保障样式
	.serve-label {
		margin-top: $margin + 10;
		font-size: 28rpx;

		.serve-label-name {
			font-weight: 700;
			margin-bottom: $margin - 10;
		}

		.serve-label-text {
			line-height: 44rpx;
		}
	}

	.serve-cont {
		height: 40vh;
		overflow-y: scroll;
	}
</style>
