<template>
	<div class="box" 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="img" :class="'img' + index" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
						<text>{{item}}</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({
			iconList: ['分享到朋友圈', '复制链接'],
			sp2: sp2
		})

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

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

<style lang="scss" scoped>
.box {
	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;
		.img{
			width: 42px;
			height: 42px;
			background-repeat: no-repeat;
			background-size: 452px 408px;
			background-position: -15px -15.67px;
			&.img1{
				background-position: -121.33px -15.67px;
			}
		}
	}
}
.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: 26rpx;
			color: #666;
			image {
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 15rpx;
			}
		}
	}
	&-cancel {
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
		font-size: 36rpx;
		color: #656565;
	}
}
</style>
