<template>
	<view class="content">
		
		<view class="step">
			<uni-steps active-color="#3387FF" :options="[{title: '扫码授权',url:'./qrCode'}, {title: '小程序配置',url:'./deploy'}, 
			{title: '提交版本',url:'./addVersion'},
		    {title: '提交审核',url:'./addExamine'},{title: '版本管理',url:'./Versioning'} ]" :active="0"></uni-steps>
		</view>
		<view  style="height: 130rpx;"></view>
		
		<view class="hg72"></view>
		<view class="home-content">
			<view class="home-content-title flex-center">
				支付宝授权二维码
			</view>
			<view class="home-content-code flex-center">
				<view class="">
					<tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="qrcodeVal" :size="size" :unit="unit"
						:background="background" :foreground="foreground" :pdground="pdground" :icon="icon"
						:iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true"
						@result="qrR"/>
				</view>
			</view>
		</view>
		<view class="bottom-bar" style="background: none;">
			<button @click="upCode">
				下载二维码
			</button>
		</view>
		
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	import saveImgToPhotosAlbum from "@/static/js/saveImgToPhotosAlbum.js";
	// #endif
	import tkiQrcode from "../components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode,
		},
		data() {
			return { //二维码相关参数
				ifShow: true,
				val: '二维码', // 要生成的二维码值
				size: 350, // 二维码大小
				unit: 'upx', // 单位
				background: '#000000', // 背景色
				foreground: '#ffffff', // 前景色
				pdground: '#ffffff', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				info: {},
				id: "",
				URL: getApp().globalData.URL,
				qrcodeVal: "",
				wxqr: 1,
				qrcodeImg:'',
			}
		},
		
		onLoad(e) {
			this.http();
		},

		methods: { 
			
			//传入组件的方法
			
			qrR(e) {
				this.qrcodeImg=e;
				console.log(e, "ee")
			},
			
			http() {
				this.request({
					url: 'Smdcshop/alipay_shouquan',
					data: {
						admin_id: uni.getStorageSync("admin_id"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === "200") {
						this.qrcodeVal = res.data
						setTimeout(()=>{
							this.$refs.qrcode._makeCode()
						},50)
					}
				});
			},

			upCode(e) {
				// #ifdef H5
				uni.showModal({
					title: '提示',
					content: '请长按二维码图片进行保存',
					showCancel: false,
					confirmText: '好的',
				});
				// #endif
				// #ifdef MP-WEIXIN 
				this.$refs.qrcode._saveCode()
				
				return
				
				var url = this.qrcodeImg;
				console.log(url, "url")
				saveImgToPhotosAlbum.saveImgToPhotosAlbum(url).then((res) => {
					//成功的逻辑
					console.log(res, "保存成功")
					uni.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>
	page {
		background: #F5F7FA;
	}

	.hg72 {
		height: 72rpx;
	}

	.home-content {
		background: #FFFFFF;
		width: 670rpx;
		height: 843rpx;
		margin: 0 auto;
		position: relative;

	}

	.home-content-title {
		width: 100%;
		height: 154rpx;
		background: linear-gradient(180deg, #449efb, #3387ff);
		border-radius: 16rpx 16rpx 0px 0px;
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #ffffff;
	}

	.home-content-code {
		width: 100%;
		height: 689rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #464646;
		text-align: center;
	}

	.home-content-code image {
		width: 400rpx;
		height: 400rpx;
		margin-bottom: 64rpx;
	}

	.home-content-code-title {
		padding: 0 30rpx;
		color: red;
	}

	.code-btn {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #3c8cff;
		margin-bottom: 35rpx;
	}

	.bottom-bar {
		position: fixed;
		/* bottom: 50rpx; */
		width: 100%;
		z-index: 1000;
		padding: 30rpx 0;

	}

	.bottom-bar button {
		text-align: center;
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(132deg, #3387FF 0%, #3387FF 100%);
		box-shadow: 0px 2rpx 12rpx #3387FF;
		opacity: 1;
		border-radius: 10rpx;
		color: #fff;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		font-weight: 500;
		color: #ffffff;
	}
</style>
