<template>
	<!-- 销售分享模板 -->
	<view>
		<up-overlay :show="showShareSwiper" @click="closeSwiper" z-index="1001">
			<view class="share">
				<swiper class="share-swiper" :indicator-dots="true" :circular="true" indicator-active-color="#fff"
					indicator-color="rgba(255, 255, 255, 0.4)" previous-margin='100rpx' next-margin='100rpx'
					:current="choose" @change="changeChoose">
					<swiper-item v-for="(item, index) in saleShareImg" :key="index">
						<button class="share-swiper-item" :open-type="index === choose ? 'share' : ''">
							<view class="shop" v-if="goodsInfo.shop">
								<image class="img" :src="goodsInfo.shop.logo"></image>
								<text>{{goodsInfo.shop.name}}</text>
							</view>
							<view class="title">{{goodsInfo.description}}</view>
							<image class="image" :src="item.image" mode="widthFix"></image>
							<view class="text">
								<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/07/01/0jXVQFuf0rVJA0c8qLSAyCDsDtiHzOgodoIR0Fo3.png"
									mode="widthFix" class="img"></image>
								小程序
							</view>
						</button>
					</swiper-item>
				</swiper>
			</view>
		</up-overlay>
	</view>
</template>

<script>
	import { ref, reactive, toRefs, watch } from 'vue'
	import { post } from '../../api/request.js'
	export default {
		props: {
			showShareSwiper: {
				type: Boolean,
				default: false
			},
			saleShareImg: Array,
			goodsInfo: Object
		},
		setup(props, context) {
			const data = reactive({
				choose: 0
			})
			const changeChoose = (e) => {
				data.choose = e.detail.current
				let img = props.saleShareImg[data.choose].image
				context.emit('changeShareImg', img)
			}
			const shareBtn = () => {}

			const close = () => {
				context.emit('close')
			}
			const closeSwiper = () => {
				context.emit('closeSwiper')

			}
			return {
				...toRefs(data),
				changeChoose,
				closeSwiper
			}
		}
	}
</script>

<style lang="scss" scoped>
	.share {
		position: relative;
		width: 100%;
		height: 100%;

		.share-swiper {
			position: absolute;
			transform: translate(-50%, -50%);
			top: 45%;
			left: 50%;
			width: 100%;
			height: 50%;
			.share-swiper-item {
				width: 80%;
				margin: auto;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 30rpx 30rpx 0;
				text-align: start;
				line-height: 30rpx;
				.shop {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #b3b3b3;
					.img {
						width: 50rpx;
						height: 50rpx;
						background-color: #b3b3b3;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}

				.title {
					margin: 20rpx 0;
					font-size: 30rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.image {
					width: 100%;
					margin-bottom: 15rpx;
					border-radius: 10rpx;
				}

				.text {
					border-top: 2rpx solid #e1e1e1;
					padding-top: 10rpx;
					font-size: 26rpx;
					color: #b3b3b3;
					padding-bottom: 25rpx;
					.img {
						width: 20rpx;
					}
				}
			}
		}
	}
</style>
