<template>
	<!-- 分享海报 -->
	<div class="content">
		<div class="share">
			<image class="poster" :src="posterImg" show-menu-by-longpress="{{true}}"
				@load="imgLoad"
				:style="{ width: imgWidth + 'px', height: imgHeight + 'px' }"
			></image>
			<view class="close" @click="closeShow"><up-icon name="close" color="#fff" size="26"/></view>
			<text>长按图片分享好友</text>
		</div>
	</div>
</template>

<script>
import { ref, reactive, toRefs, watch } from 'vue'
export default {
	props: {
		posterImg: String
	},
	setup(props, context) {
		const data = reactive({
			imgWidth: 1,
			imgHeight: 1
		})

		// 关闭
		function closeShow() {
		  context.emit('closeShow')
		}
		
		function imgLoad(e) {
			let imgWidth = e.detail.width
			let imgHeight = e.detail.height
			let pWid = uni.getSystemInfoSync().windowWidth
			let pHig = uni.getSystemInfoSync().windowHeight
			let imgRate = imgWidth / imgHeight
			let pRate = pWid / pHig
			// 先判断图片宽高值
			if(imgWidth > imgHeight) {
				// 如果图片宽度大于屏幕宽度，就把图片宽度设为屏幕的宽度，高度设为其比例
				if(imgWidth > pWid) {
					data.imgWidth = pWid
					data.imgHeight = (pWid / imgRate).toFixed(2)
				} else {
					data.imgWidth = imgWidth
					data.imgHeight = imgHeight
				}
			} else {
				if(imgHeight > pHig * 0.65) {
					data.imgWidth = (pHig * 0.65 * imgRate).toFixed(2)
					data.imgHeight = (pHig * 0.65).toFixed(2)
				} else {
					data.imgWidth = imgWidth
					data.imgHeight = imgHeight
				}
			}
		}
		
		return {
			...toRefs(data),
			closeShow,
			imgLoad
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba($color: #000000, $alpha: 0.7);
	z-index: 1001;
	display: flex;
	align-items: center;
	justify-content: center;
	.share{
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.close{
			position: absolute;
			right: 0;
			top: -70rpx;
		}
		text{
			font-size: 26rpx;
			color: #fff;
			margin-top: 20rpx;
		}
		.poster{
			border-radius: 16rpx;
		}
	}
}
</style>
