<template>
	<view class="head df jcsb aic pa" :style="{ width: screenWidth(), top: bottomSafeAreaHeight() }">
		<image @click="goBack('/pages/shop/shop')" class="back" :src="back" />
		<view class="df">
			<image @click="open('share')" class="share" :src="share" />
			<image @click="open('more')" class="more" :src="more" />
		</view>
	</view>
	<uni-popup ref="share_more" type="bottom" borderRadius="20px 20px 0 0">
		<view class="popup-content">
			<view class="df fjc item">
				<view class="df fdc aic " v-for="(item, index) in more_share_data" :key="index" @click="handle_share(item)">
					<image :src="item.icon" />
					<text class="title">{{ item.title }}</text>
				</view>
			</view>
			<p class="cancel" @click="share_more.close()" :style="{ bottom: bottomSafeAreaHeight() }">取消</p>
		</view>
	</uni-popup>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import back from '@/static/back.png'
	import share from '@/static/share1.png'
	import more from '@/static/more.png'

	import news from '@/static/news.png'
	import home from '@/static/home.png'
	import individual from '@/static/individual.png'
	import order from '@/static/order.png'

	import linkage from '@/static/linkage.png'
	import download from '@/static/download.png'
	import wx from '@/static/wx.png'
	import qq from '@/static/qq.png'
	import {
		screenWidth,
		bottomSafeAreaHeight,
		goBack
	} from '@/components/public/Mixins.js'
	const share_more = ref(null)
	const more_share_data = ref([])
	// 分享弹窗
	const more_share = {
		more: [{
				icon: news,
				title: '信息'
			},
			{
				icon: home,
				title: '回到首页'
			},
			{
				icon: individual,
				title: '个人中心'
			},
			{
				icon: order,
				title: '我的订单'
			}
		],
		share: [{
				icon: linkage,
				title: '复制链接'
			},
			{
				icon: download,
				title: '保存图片'
			},
			{
				icon: wx,
				key: 'weixin',
				title: '微信'
			},
			{
				icon: qq,
				key: 'qq',
				title: 'QQ'
			}
		]
	}
	// 

	const open = (val) => {
		more_share_data.value = more_share[val]
		share_more.value.open()
	}

	// 分享
	function handle_share(item) {
		// 如果是分享
		if (['weixin', 'qq'].includes(item.key)) {
			uni.getProvider({
				service: 'share',
				success: res => {
					const shareInfo = store.state.shareInfo; // 分享数据

					let data = {
						provider: item.key,
						/**
						 * 0 图文 1纯文字 2图片 3音乐 4视频 5小程序
						 * qq只支持 123
						 */
						type: 2,
						// 图片
						imageUrl: '',
						// 分享标题
						title: "来自",
						// 分享内容 自定义文案
						summary: `分享给您`,
						// h5链接
						href: ``,
					}

					uni.share({
						...data,
						complete: (rs) => {
							console.log('uni share', rs, data)
						}
					})

				},
			})
		}
	}
</script>
<style lang="scss" scoped>
	.head {
		// 固定在屏幕顶部
		position: fixed;
		padding: 20rpx 0;
		height: 56rpx;
		z-index: 2;

		image {
			margin: 0 20rpx;
			width: 56rpx;
			height: 56rpx;
		}
	}

	.popup-content {
		width: 100%;
		height: 600rpx;
		background: #F0F0F0; //上面两个圆角
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.item {
			position: absolute;
			top: 60rpx;
			margin: 0 10rpx;
		}

		image {
			margin: 0 20rpx;
			width: 100rpx;
			height: 100rpx;
		}

		.title {
			margin-top: 20rpx;
			color: $uni-text-color-grey;
			font-size: $uni-font-size-sm;
		}

		.cancel {
			position: absolute;
			bottom: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 20rpx 20rpx 20rpx;
			width: 700rpx;
			height: 80rpx;
			border-radius: 2314rpx;
			background: $uni-bg-color;
		}
	}
</style>