<template>
	<div class="shareBox" v-if="showShare" @click="close">
		<div class="box1">
			<view class="share">
				<view class="share-btn">
					<button class="share-btn-item" v-for="(item, index) in iconList" :key="index"
						@click="shareBtn(index)" :open-type="index === 5 ? 'share' : ''">
						<view class="icon" :class="item.icon" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
						<text>{{item.text}}</text>
					</button>
				</view>
				<view class="share-cancel" @click="close">取消</view>
			</view>
		</div>
	</div>
</template>

<script>
	import { ref, reactive, toRefs, watch } from 'vue'
	import { post } from '@/api/request.js'
	import { sp2 } from '@/components/img.js'
	
	export default {
		props: {
			showShare: {
				type: Boolean,
				default: false
			}
		},
		setup(props, context) {
			const data = reactive({
				sp2: sp2,
				iconList: [
					{ icon: 'wechat', text: '分享到微信' },
					{ icon: 'friends', text: '分享到朋友圈' },
					{ icon: 'link', text: '复制链接' }
				]
			})

			const shareBtn = (index) => {
				close()
				if (index === 0) {
					context.emit('getSaleShare')
				} else if (index === 1) {
					context.emit('creatShare')
				} else {
					context.emit('getLink')
				}
			}

			const close = () => {
				context.emit('close')
			}
			
			return {
				...toRefs(data),
				shareBtn,
				close
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shareBox{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		.box1 {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
		}
		.share {
			&-btn {
				display: flex;
				justify-content: space-around;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #d5d5d5;
				&-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					color: #666;
					.icon{
						width: 42px;
						height: 42px;
						background-repeat: no-repeat;
						background-size: 452px 408px;
						background-position: -15px -15.67px;
						&.wechat{
							background-position: -15px -15.67px;
						}
						&.friends{
							background-position: -68.33px -15.67px;
						}
						&.link{
							background-position: -121.33px -15.67px;
						}
					}
				}
			}
			&-cancel {
				height: 110rpx;
				text-align: center;
				line-height: 110rpx;
				font-size: 30rpx;
				color: #656565;
			}
		}
	}
</style>
