<template>
	<view class='container'>

		<view class="mar-24 flex-1" style="position: relative;">
			<image class="full" :src="$config.cdnUrl+thwjImg"></image>
		</view>
		<view class="h-100 mtb-30 mlr-24">
			<view class="numberbtn">
				<view style="background-color: #0F0F0F;border: solid 1rpx #FE42C2 ;color: #FE42C2;"
					@click="$wskj.to('/pagesMine/pages/user_thwjjh')">
					查看头号玩家计划
				</view>
				<view @click="show=true" style="background-color: #FE42C2; color: #fff;">
					<text>生成推广海报</text>
				</view>
			</view>

			<u-popup :show="show" round="10" @close="show = false" bgColor="#00000000">
				<view class="flex-center-center flex-column"
					style="background-color: transparent;border-radius: 20rpx 20rpx 0rpx 0rpx;">
					<view class="flex-center-center h-997">
						<image class="w-560 h-997 " :src="$config.cdnUrl+shareImg"></image>
					</view>
					<view class="flex-center-center br-48 w-256 h-77 mt-30 mb-200"
						style="background-color: #FE42C2;color: white;" @click="onSave">
						<text>保存本地</text>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				shareImg: '',
				thwjImg: '',
			};
		},
		onLoad() {
			this.getImg(1)
			this.getImg(3)
		},
		methods: {
			getData() {
				const params = {
					url: '/system/member/playersPlanText' + Number(this.orderId),
					method: "GET",
					data: {}
				}
				this.$request(params).then(res => {
					this.data = res.data
				})
			},
			onSave() {
				if (!this.shareImg) {
					this.$wskj.toast('未获取到地址，暂时不能保存')
					return
				}
				const _than = this;
				// 先下载图片
				uni.downloadFile({
					url: this.shareImg,
					success: (res) => {
						if (res.statusCode === 200) {
							// 假设已经成功下载图片，获取到了 tempFilePath
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: () => {
											_than.$wskj.toast('图片保存成功')
										},
										fail: (err) => {
											_than.$wskj.toast('图片保存成功失败')
										}
									});
								},
								fail() {
									// 用户拒绝授权，可以引导用户去设置中开启权限
									uni.showModal({
										content: '需要从设置中开启保存图片到相册的权限',
										showCancel: false
									});
								}
							});
						}
					},
					fail: (err) => {
						this.$wskj.toast('下载图片失败')
					}
				});
			},
			getImg(id) {
				//1 分享 2 客服二维码 3 头号玩家背景 4 定卡邀请函背景 5 拼卡邀请函背景
				const params = {
					url: '/system/member/gbImg?bgId=' + id,
					data: {}
				}
				this.$request(params).then(res => {
					if (id == 1) {
						this.shareImg = res.data.bgImg
					} else if (id == 3) {
						this.thwjImg = res.data.bgImg
					}
				})
			},
		},
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		background: #0F0F0F;
		background-color: ;
		display: flex;
		flex-direction: column;
	}

	.sv-y {
		flex: 1;
		/* 自动占满剩余的空间 */
		overflow-y: auto;
		/* 允许纵向滚动 */
	}

	.numberbtn {
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.numberbtn>view {
		width: 328rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		border-radius: 48rpx;
	}
</style>