<template>
	<uni-popup ref="posterRef" type="center" :safe-area="false">
		<view class="container" @click="close">
			<view id="img-box" style="width: 100%;height: calc(100vh - 200rpx);overflow: hidden;padding-top: 32rpx;">
				<image :src="url" mode="widthFix" style="width: 100%;border-radius: 12rpx;"
					show-menu-by-longpress="true"></image>
			</view>
			
		</view>
		<view class="flex justify-around margin-tb bg-white" style="width: 100vw;">
			<view class="btn" @click="savePic">存为图片</view>
			<view class="btn" @click="share">微信好友</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "createPoster",
		data() {
			return {};
		},
		props: {
			url: {
				type: String,
				default: '',
				required: true,
			},
		},
		methods: {
			open() {
				// uni.hideTabBar({
				// 	fail() {

				// 	}
				// })
				this.$refs.posterRef.open()
			},
			close() {
				this.$refs.posterRef.close()
				// uni.showTabBar()
				this.$emit('close')
			},
			share() {
				uni.showShareImageMenu({
					path: this.url,
				})
			},
			// 保存到相册
			savePic() {

				uni.getSetting({
					success: (res) => {
						console.log(res)
						// 判断是否拥有此权限进行拉起授权  和 重新授权功能
						if (!res.authSetting['scope.writePhotosAlbum']) {
							// 未授权此项权限 拉起授界面
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: () => {
									// 授权成功后 就可以执行 需要权限的  操作函数了
									uni.saveImageToPhotosAlbum({
										filePath: this.url,
										success: (res) => {
											uni.showToast({
												title: '保存成功',
												icon: 'success',
											})
										},
										fail: (err) => {
											uni.showToast({
												title: '保存失败',
												icon: 'none',
											})
										},

									})
								},
								fail: (err) => {
									/*
									 第一次拒绝授权后必须在 uni.authorize的fail中使用
									 uni.openSetting 才能进入设置界面打开授权按钮
									 */

									// 这里必须经过一个confirm 不然也会出现问题（啥问题我也不知道）
									uni.showModal({
										title: '是否重新授权相册功能',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success() {
														console.log('开启权限成功');
													},
													fail() {
														console.log('开启权限失败');
													}
												});
											} else if (res.cancel) {
												console.log('拒绝开启开启权限');
											}
										}
									});
								}
							});
						} else {
							uni.saveImageToPhotosAlbum({
								filePath: this.url,
								success: (res) => {
									uni.showToast({
										title: '保存成功',
										icon: 'success',
									})
								},
								fail: (err) => {
									uni.showToast({
										title: '保存失败',
										icon: 'none',
									})
								},

							})
						}
					}
				});

			},
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		width: 90vw;
		margin: 32rpx auto 0;
		// height: 500rpx;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.btn {
		width: 130rpx;
		height: 200rpx;
		// padding: 20rpx;
		border-radius: 12rpx;
		background: #FFFFFF;
		font-family: Roboto;
		font-size: 24rpx;
		text-align: center;
		line-height: 200rpx;
		color: #0B0E26;
		// border: 1px solid #fff;
	}
</style>