<template>
	<view>
		<!-- 商品详情 -->
		<swiper class="goodsImgswiper-box " :indicator-dots="true" :autoplay="true">
			<swiper-item v-for="(imgItem, index) in productInfo.images" :key="index">
				<image class="goodsImg default-img u-skeleton-fillet" :src="imgItem"></image>
			</swiper-item>
		</swiper>
		<!-- 分享 -->
		<view class="share-box flex-items-plus" @click="shareMenuShow">
			<image class="share-img" src="../../../static/images/origin/shareBut.png"></image>
			<label class="fs24 mar-left-5">分享</label>
		</view>
		<view class="goodgDes-box flex-start flex-column">
			<view
				v-if="skuSelect.activityType === 0"
				class="priceBuyNum-box flex-items u-skeleton-fillet flex-sp-between mar-left-30"
			>
				<view class="flex-items">
					<label class="fs36 font-color-C83732">¥</label>
					<label class="fs36 fs-bold font-color-C83732 mar-left-10">{{ skuSelect.price || 0 }}</label>
					<view class="flex-column-plus mar-left-20">
						<text
							style="padding: 6upx 12upx;background-color: #f0f0f0;font-size: 28upx;color: #fa5151;border-radius: 22upx;vertical-align: middle;"
						>
							可使用{{ Math.ceil(Number(skuSelect.originalPrice || 0)) }}代金券抵扣
						</text>
						<label class="fs24 font-color-999 discountsPriceLine mar-left-20">
							¥ {{ skuSelect.originalPrice || 0 }}
						</label>
					</view>
				</view>
				<label class="fs24 font-color-999">{{ productInfo.users || 0 }}人付款</label>
			</view>
			<view v-else-if="skuSelect.activityType === 8" class="sceneMarketingBox">
				<view class="flex-row-plus flex-items-plus mar-left-30 mar-top-10">
					<label class="fs30 font-color-FFF">¥</label>
					<label class="fs42 mar-left-5 font-color-FFF">{{ skuSelect.price || 0 }}</label>
					<label class="fs28 mar-left-10 discountsPriceLine font-color-CCC">
						¥
						{{ skuSelect.originalPrice || 0 }}
					</label>
				</view>
				<view class="sceneNameBox">{{ productInfo.sceneName }}</view>
			</view>
			<view v-else class="seckill-box">
				<view v-if="skuSelect.activityType === 9" class="flex-items flex-sp-between">
					<view class="vipImg flex-items">
						<image class="vip-icon" src="../../../static/images/origin/vipDetail.png" mode="">
						</image>
					</view>
					<view class="flex-row-plus flex-items-plus mar-left-30 mar-top-10">
						<label class="fs30 font-color-FFF">¥</label>
						<label class="fs42 mar-left-5 font-color-FFF">{{ skuSelect.price || 0 }}</label>
						<label class="fs28 mar-left-10 discountsPriceLine font-color-999">
							¥
							{{ skuSelect.originalPrice || 0 }}
						</label>
					</view>
				</view>
				<view v-else class="flex-items flex-row flex-sp-between">
					<view class="flex-column-plus">
						<image
							v-if="[2, 4].includes(skuSelect.activityType)" class="seckill-icon"
							src="../../../static/images/origin/seckillicon.png" mode=""
						></image>
						<image
							v-if="[3, 5].includes(skuSelect.activityType)" class="discount-icon"
							src="../../../static/images/origin/discounticon.png" mode=""
						></image>
						<image
							v-if="skuSelect.activityType === 1" class="spell-icon"
							src="../../../static/images/origin/spellicon.png" mode=""
						></image>
						<view class="flex-row-plus flex-items mar-top-10">
							<label class="fs30 font-color-FFF">¥</label>
							<label class="fs42 mar-left-5 font-color-FFF">{{ skuSelect.price || 0 }}</label>
							<label class="fs28 mar-left-10 discountsPriceLine font-color-999">
								¥
								{{ skuSelect.originalPrice || 0 }}
							</label>
						</view>
					</view>
					<view v-if="[1, 2, 3, 4, 5].includes(skuSelect.activityType)" class="countdown flex-column-plus">
						<view v-if="timeActiveType">
							<label class="fs28">距离结束剩余</label>
							<view class="flex-row-plus fs34 flex-items-plus mar-top-10">
								<view class="countdown-box flex-items-plus">{{ activeTimeObj.day }}</view>
								<view class="font-color-999">天</view>
								<view class="countdown-box flex-items-plus">{{ activeTimeObj.hour }}</view>
								<view class="font-color-999">:</view>
								<view class="countdown-box flex-items-plus">{{ activeTimeObj.min }}</view>
								<view class="font-color-999">:</view>
								<view class="countdown-box flex-items-plus">{{ activeTimeObj.sec }}</view>
							</view>
						</view>
						<view v-else>
							<label class="fs28 mar-right-20">即将开始：{{ skuSelect.startTime }}</label>
							<!--              <view class="fs28 mar-right-20 mar-top-20">{{productInfo.startTime}}</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="nameContainer">
				<view class="goodsName-box overflowNoDot mar-top-30 mar-left-30 u-skeleton-fillet">
					<label class="goodsName fs32 mar-left-20 ">{{ productInfo.productName }}</label>
				</view>
				<view class="collectBox " @click="handleCollect">
					<image
						v-if="productInfo.ifCollect === 1" class="store-icon  "
						src="../../../static/images/origin/shoucangActive1.png"
					></image>
					<image v-else class="store-icon" src="../../../static/images/origin/shoucang2x.png">
					</image>
					<label class="fs22">收藏</label>
				</view>
			</view>
			<view
				v-if="markTools.length > 0 || shopMarkTools.length > 0" class="activity-box mar-top-10"
				@click="couponShowClick"
			>
				<label class="fs24 font-color-999">优惠</label>
				<view class="activity-content mar-left-30 flex-items flex-sp-between flex-row">
					<view class="fs20 overflow" style="width: 500rpx;">
						{{ productInfo.couponSplicing }}
					</view>
					<view class="flex-items">
						<label class="fs24 font-color-C5AA7B">领券</label>
						<image class="coupon-arrow" src="../../../static/images/origin/arrow.png"></image>
					</view>
				</view>
			</view>
		</view>

		<!--  分享弹出  -->
		<u-action-sheet v-model="shareObj.actionShow" :list="shareObj.actionList" @click="handleShareSelect"></u-action-sheet>

		<ShareSpell
			ref="shareSpell" :url="shareObj.url" :img="shareObj.image" :title="shareObj.title"
			@shareCancel="shareCancel"
		>
		</ShareSpell>
	</view>
</template>

<script>
import { TimeFormatting } from '../../../utils/timeUtil'
import NET from '../../../utils/request'
import API from '../../../config/api'
import shareSpell from '../../../component/share.vue'

export default {
	name: 'GoodActivityDetail',
	components: { ShareSpell: shareSpell },
	props: {
		// 商品信息
		productInfo: {
			type: Object,
			default: () => ({})
		},
		// 当前选中的sku
		skuSelect: {
			type: Object,
			default: () => ({})
		},
		timeActiveType: {
			type: Boolean,
			default: () => false
		},
		markTools: {
			type: Array,
			default: () => []
		},
		shopMarkTools: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			// 活动倒计时
			timeDifference: 0,
			activeTimeObj: {
				day: '00',
				hour: '00',
				min: '00',
				sec: '00'
			},
			countdownInterval: null,
			// 分享
			shareObj: {
				url: '',
				image: '',
				title: '好友分享了一个很棒的商品',
				actionList: [
					{ text: '生成分享海报' },
					{ text: '邀请好友' }
				],
				actionShow: false
			}
		}
	},
	methods: {
		/**
		 * 初始化活动倒计时
		 * @param endTimestamp
		 */

		handleGetCountDownNumber(endTimestamp) {
			endTimestamp = endTimestamp.substring(0, 19).replace(/-/g, '/')
			// 与当前时间的时间差（秒）
			const timeDifference = (new Date(endTimestamp).getTime() - new Date().getTime()) / 1000
			this.timeDifference = timeDifference
			this.activeTimeObj = TimeFormatting(timeDifference)
			this.handleCountDown()
		},

		/**
		 * 开始倒计时
		 */

		handleCountDown() {
			if (this.countdownInterval) {
				return
			}
			this.countdownInterval = setInterval(() => {
				if (this.timeDifference <= 0) {
					clearInterval(this.countdownInterval)
					uni.showToast({
						title: '活动结束',
						duration: 2000,
						icon: 'none'
					})
					this.$emit('activityEnd', 0)
				} else {
					this.timeDifference--
					this.activeTimeObj = TimeFormatting(this.timeDifference)
				}
			}, 1000)
		},

		/**
		 * 拉起父组件优惠券
		 */

		couponShowClick() {
			this.$emit('couponClick')
		},

		/**
		 * 收藏
		 */

		handleCollect() {
			if (this.productInfo.ifCollect === 0) {
				NET.request(API.collect, {
					productId: parseInt(this.productInfo.productId)
				}, 'POST').then((res) => {
					this.productInfo.ifCollect = 1
					uni.showToast({
						title: '收藏成功',
						icon: 'success'
					})
				})
			} else {
				NET.request(API.cancelCollect, {
					ids: [ this.productInfo.productId ]
				}, 'PUT').then((res) => {
					this.productInfo.ifCollect = 0
					uni.showToast({
						title: '取消收藏成功',
						icon: 'success'
					})
				})
			}
		},

		/**
		 * 海报分享
		 */

		sharePoster() {
			let system
			// #ifdef APP
			system = 1
			// #endif

			// #ifdef H5
			system = 3
			// #endif

			// #ifdef MP-WEIXIN
			system = 2
			// #endif

			// #ifdef MP-ALIPAY
			system = 4
			// #endif
			uni.showLoading({
				mask: true,
				title: '请稍候...'
			})
			NET.request(API.getSharePic, {
				productId: this.productInfo.productId,
				shopId: this.productInfo.shopId,
				skuId: this.skuSelect.skuId,
				terminal: system
			}, 'GET').then((res) => {
				uni.hideLoading()
				// 推广商品
				uni.navigateTo({
					url: `/pages_category_page1/distributionModule/shareProduct?shareType=2&productImage=${this.productInfo.images[0]}&shopId=${this.productInfo.shopId}&productId=${this.productInfo.productId}&skuId=${this.skuSelect.skuId}&productName=${this.productInfo.productName}&price=${this.productInfo.price}&headImage=${res.data.headImage}&shareName=${res.data.name}&shareImg=${res.data}`
				})
			})
				.catch((res) => {
					uni.hideLoading()
				})
		},
		shareMenuShow() {
			this.shareObj.actionShow = true
		},
		shareCancel() {
			this.$refs.shareSpell.shareShow = false
		},
		handleShareSelect(index) {
			if (index === 0) {
				this.sharePoster()
			} else {
				this.shareObj.url = '/pages_category_page1/goodsModule/goodsDetails?shopId=' + this.productInfo.shopId + '&productId=' + this.productInfo.productId + '&skuId=' + this.skuSelect.skuId
				this.shareObj.image = this.productInfo.images[0]
				this.shareObj.title = `【shop】好友分享了一个好物给您！${this.productInfo.productName} ￥${this.productInfo.price} `
				this.$refs.shareSpell.shareShow = true
			}
		}
	}
}
</script>

<style
    lang="scss"
    scoped
>
.goodsImgswiper-box {
	width: 750upx;
	height: 750upx;

	.goodsImg {
		width: 750upx;
		height: 750upx;
	}
}

.share-box {
	width: 200upx;
	height: 60upx;
	background-color: #FFFFFF;
	border-radius: 30upx 0 0 30upx;
	position: absolute;
	top: 30upx;
	right: 0;
	z-index: 99;

	.share-img {
		width: 36upx;
		height: 36upx;
	}
}

.goodgDes-box {
	background-color: #FFFFFF;
	width: 100%;
	padding-bottom: 25upx;

	.priceBuyNum-box {
		width: 677upx;
		margin-top: 30upx;
	}

	.nameContainer {
		display: flex;

		.goodsName-box {
			width: 677upx;
			height: 85upx;

			.img618-cion {
				width: 70upx;
				height: 36upx;
			}
		}

		.collectBox {
			width: 80rpx;
			margin: 0 30rpx 0 15rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.store-icon {
			width: 48upx;
			height: 48upx;
		}
	}

	.discounts-box {
		margin-top: 20upx;

		.discounts-text {
			margin-left: 10upx;
			color: #FF7800;
			background-color: #FFE4CC;
			padding: 6upx 12upx;
			border-radius: 4upx;
		}
	}

	.activity-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-end;
		border-top: 1upx solid #EDEDED;

		.activity-content {
			width: 614upx;
			padding-top: 20upx;

			.activity-text {
				color: #FF7700;
				border: 1upx solid #FF7700;
				padding: 6upx 23upx;
			}

			.coupon-arrow {
				width: 16upx;
				height: 24upx;
				margin-left: 15upx;
			}
		}
	}
}

.seckill-box {
	width: 100%;
	background: url("../../../static/images/origin/storeTop_Img.png") no-repeat left top;
	padding: 35rpx 30rpx;

	.seckill-icon {
		width: 187rpx;
		height: 41rpx;
		background-size: contain;
	}

	.vip-icon {
		width: 187rpx;
		height: 41rpx;
		background-size: contain;
	}

	.discount-icon {
		width: 187rpx;
		height: 41rpx;
		background-size: contain;
	}

	.spell-icon {
		width: 182rpx;
		height: 37rpx;
		background-size: contain;
		margin-bottom: 20rpx;
	}

	.countdown {
		text-align: center;

		label {
			text-align: center;
			color: #CCCCCC;
		}
	}

	.countdown-box {
		padding: 0 8rpx;
		height: 48rpx;
		color: #FFEBC4;
		background-color: #525252;
		margin: 10rpx;
	}
}
</style>
