<template>
	<view class="container">

		<block v-if="type==2">
			<image style="width: 80%;" :src="qrcode" mode="widthFix"></image>
		
			<view class="hg120">
				
			</view>
			<view class="btm-btn-block">
				<view class="content flex-row-between">
					<block>
						<view class="btn btn22" @click="dofile">下载二维码</view>
						<view class="btn btn11" @click="setup" data-index="index">修改</view>
					</block>
				</view>
			</view>
		</block>

		<block v-else>
			
			<view class="header_success">
				<image class="header_success_icon" src="../../static/images/success.png" mode=""></image>
				<view class="header_success-tip">
					智能替换成功
				</view>
			</view>
			
			<view class="header_success_bg">
				<view class="flex-center header_success_title">
					<image src="../../static/images/line.png" mode=""></image>
					替换图片
					<image src="../../static/images/line.png" mode=""></image>
				</view>

				<image style="width: 60%;" :src="qrcode" mode="widthFix"></image>

				<view class="flex-center" @click="dofile">
					<view class="btm-btn">
						<image class="dofile-icon" src="../../static/images/file.png" mode=""></image>下载图片
					</view>
				</view>

			</view>
		</block>

	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	import saveImgToPhotosAlbum from "@/static/js/saveImgToPhotosAlbum.js";
	// #endif
	export default {
		data() {
			return {
				qrcode: "",
				type: 1,
				info: "",
				card_num:"",				
				URL: getApp().globalData.URL,
			}
		},

		onLoad(e) {
			console.log(e)
			this.type = e.type;
			if (e.type == 2) {
				this.card_num=e.card_num;
				this.edit_detail();
			}else{
				this.qrcode = uni.getStorageSync("qrcode");
			}
		},


		onShareAppMessage(e) {

		},

		methods: {

			edit_detail(e) {
				this.request({
					url: "picture/edit_detail",
					data: {
						card_num: this.card_num,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.qrcode = res.data.re_url;
					}
				}).catch((res) => {

				});
			},
			
			setup(e) {
				uni.redirectTo({
					url: 'replace?card_num='+this.card_num,
				})
			},

			dofile(e) {
				// #ifdef H5
				uni.showModal({
					title: '提示',
					content: '请长按二维码图片进行保存',
					showCancel: false,
					confirmText: '好的',
				});
				// #endif
				// #ifdef MP-WEIXIN 
				var url = this.qrcode;
				saveImgToPhotosAlbum.saveImgToPhotosAlbum(url).then((res) => {
					//成功的逻辑
					console.log(res, "保存成功")
					wx.showToast({
						title: '保存成功',
						icon: 'none',
						mask: true,
					})
				}).catch((err) => {
					console.log(err, "保存失败")
					if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg ===
						"saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
						// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
						uni.showModal({
							title: '提示',
							content: '需要您授权保存相册',
							showCancel: false,
							success: modalSuccess => {
								uni.openSetting({
									success(settingdata) {
										console.log("settingdata", settingdata)
										if (settingdata.authSetting['scope.writePhotosAlbum']) {
											uni.showModal({
												title: '提示',
												content: '获取权限成功,再次点击图片即可保存',
												showCancel: false,
											})
										} else {
											uni.showModal({
												title: '提示',
												content: '获取权限失败，将无法保存到相册哦~',
												showCancel: false,
											})
										}
									},
									fail(failData) {
										console.log("failData", failData)
									},
									complete(finishData) {
										console.log("finishData", finishData)
									}
								})
							}
						})
					}
					// 失败后的逻辑
				})


				// #endif	
			},
		}
	}
</script>


<style>
	.hg120{
		height: 120rpx;
	}
	.container {
		text-align: center;
	}

	.header_success {
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #181818;
	}

	.header_success_icon {
		width: 144rpx;
		height: 144rpx;
	}

	.header_success-tip {
		padding: 20rpx 0 32rpx 0;
	}

	.header_success_bg {
		width: 670rpx;
		background: linear-gradient(180deg, #f4f8ff, #ffffff);
		border-radius: 16rpx 16rpx 0px 0px;
		margin: 0 auto;
		text-align: center;
	}

	.header_success_title {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #3488ff;
		padding: 40rpx 0;
	}

	.header_success_title image {
		width: 17rpx;
		height: 24rpx;
		margin: 0 15rpx;
	}

	.btm-btn {
		width: 670rpx;
		height: 98rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		color: #fff;
		line-height: 98rpx;
		margin: 0 auto;
		margin-top: 100rpx;
	}

	.dofile-icon {
		width: 31rpx;
		height: 31rpx;
	}
    .btm-btn-block{
		position: fixed;
		bottom: 30rpx;
		width: 100%;
	}

	.btm-btn-block .content {
	  padding: 0rpx 40rpx;
	}

	.btm-btn-block .content .btn {
		flex: none;
		width: 325rpx;
		height: 98rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 98rpx;
		font-size: 32rpx;
		font-weight: 500;
	}

	.btm-btn-block .content .btn11 {
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		box-shadow: 0 0 8rpx 0 rgba(51, 135, 255, 0.2);
		color: #fff;
	}

	.btm-btn-block .content .btn22 {
		box-shadow: 0px 0px 8px 0px rgba(207, 219, 234, 0.4);
		color: #3387FF;	
		background: #FFFFFF;
	}
</style>
