<template>
	<view class="introduce-section seckill-box-title">
		<view class="title flex" style="width: 100%;">
			<view class="title-left ">
				<view class="price-info">
					<view class="all-price">
						￥
						<text class="now-price">{{ goodsObjact.price }}</text>
						<text class="old-price">￥{{ goodsObjact.product_price }}</text>
						<text class="pt-num">{{ goodsObjact.people }}人团</text>
					</view>
				</view>
			</view>
			<button class="shop-share" open-type="share">
				<view class="share-icon"><image src="../../../static/icon/share.png" mode=""></image></view>
				<view class="share-title">拼团分享</view>
			</button>
		</view>
		<view class="mask" v-if="show"><image @click="onTap" src="../../../static/img/shareimg.png"></image></view>
	</view>
</template>

<script>
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
export default {
	components: {
		uniCountdown
	},
	props: {
		goodsObjact: {
			type: Object,
			default: function() {
				return {
					price: 0,
					product_price: 0,
					people: 0
				};
			}
		},
		seckillObj: {
			type: Object,
			default: function() {
				return {
					stopTime: 0, //结束时间
					stop: false, //是否结束
					stopTimeH: 0, //小时
					stopTimeM: 0, //分钟
					stopTimeS: 0, //秒钟
					stopTimeD: 0, //秒钟
					upTime: 0
				};
			}
		},
		pinkingNum: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			show: false
		};
	},
	methods: {
		callf() {
			this.show = true;
		},
		onTap() {
			console.log(this.callf);

			if (!this.callf) return;
			this.close();
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss">
/* 标题简介 */
.introduce-section {
	position: relative;
	background: #fff;
	// outline: 1rpx red solid;
	box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, 0.2);
	z-index: 998;
	.title {
		// background-color: #901b21;
		font-size: 32rpx;
		color: $font-color-dark;
		// background-color: #901b21;
		// box-shadow: 10px 10px 10px red !important;
		.tip-o {
			color: #ff3334;
			padding-left: 15rpx;
		}
		.title-left {
			// padding: 15rpx;
			width: 560rpx;
			background-color: #901b21;
			height: 121rpx;
			// padding: 25rpx 0 0 25rpx;
			line-height: 121rpx;
			color: #fff;
			.price-info {
			}
		}
	}
	.title-box {
		color: #ffffff;
		.title-o {
			.price {
				font-size: 32rpx !important;
				position: relative;
				top: 8rpx;
			}
		}
		.title-t {
			font-size: 20rpx !important;
			position: relative;
			top: 0rpx;

			// top: 10rpx;
			// background-color: #c9969a;
			// border-radius: 3rpx 3rpx;
			.peice-out {
				text-decoration: line-through;
			}
			.num {
				// margin-top: 10rpx;
				padding: 6rpx 8rpx 6rpx 130rpx;
				border: 6rpx solid #c9969a;
				background-color: #c9969a;
				color: #fff;
				border-radius: 20rpx 20rpx;
				padding: 0 5rpx;
				float: left;
			}
		}
	}
	.group {
		color: #ffffff;
		position: relative;
		top: 8rpx;
		image {
			width: 55rpx;
			height: 45rpx;
		}
		.text {
			font-size: 40rpx !important;
			padding-left: 10rpx;
		}
	}
	.timeStop {
		// background-color: #feeeee;
		background: #ddffdf;
		height: 120rpx;
		padding: 0 10rpx;
		position: relative;
		width: 0;
		flex-grow: 1;
		.timeStop-name {
			padding-top: 15rpx;
			text-align: center;
			// color: #ff3334;
			color: #5dbc7c;
			font-size: 20rpx;
		}
		.timeBox {
			// margin-left: -10rpx;
			position: absolute;
			top: 50rpx;
		}
		.item {
			height: 120rpx;
			width: 0;
			min-width: 100%;
			position: relative;
		}
	}
	.share-img {
		width: 30rpx;
		height: 30rpx;
		position: relative;
		top: 5rpx;
		left: 0;
		margin-right: 10rpx;
	}
	.shop-share {
		border: none;

		width: 146rpx;
		height: 121rpx;
		background: #ffffff;
		display: felx;
		align-items: center;
		// border-radius: 0 2rpx 2rpx 0;
		padding: 25rpx 0 0 0;
		.share-icon {
			width: 42rpx;
			height: 42rpx;
			margin: 0 auto 15rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.share-title {
			font-size: 24rpx;
			font-weight: bold;
			color: #262a35;
			margin: 0 auto;
			text-align: center;
			line-height: 1;
		}
	}
}
.seckill-box-title {
	// background:linear-gradient(14deg,rgba(254,107,38,1),rgba(255,50,40,1)) !important;
	// background: linear-gradient(270deg, #5dbc7c 0%, #5dbc7c 100%) !important;
	// background: #901b21;
	overflow: hidden;
	width: 694rpx;
	height: 121rpx;
	border-radius: 10rpx 10rpx;
	top: -60.5rpx;
	left: 28rpx;
	margin-bottom: -60.5rpx;
	.price,
	.m-price {
		color: #ffffff !important;
	}
	.price-tip {
		font-size: $font-base;
		color: #ffffff !important;
	}
	.tip-info {
		position: relative;
		top: 8rpx;
		font-size: 22rpx !important;
		padding-right: 4rpx;
		font-weight: bold;
	}
}
.price {
	font-size: 80rpx !important;
	font-weight: bold;
}
.all-price {
	font-size: 28rpx;
	font-weight: 500;
	.now-price {
		font-size: 48rpx;
		font-weight: bold;
		margin-right: 10rpx;
	}
	.pt-num {
		display: inline-block;
		font-size: 20rpx;
		line-height: 20rpx;
		background-color: #c9969a;
		padding: 8rpx 13rpx 6rpx 13rpx;
		border-radius: 20rpx 20rpx;
		position: relative;
		bottom: 8rpx;
	}
	.old-price {
		// display: inline;
		margin: 0 7rpx;
		text-decoration: line-through;
	}
}
.pt-title {
	font-size: 24rpx;
	font-weight: 500;
}
.mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        background-color: rgba(0, 0, 0, 0.4);
        image {
                width: 100%;
                height: 100%;
                opacity: 0.8;
        }
}
</style>
