<template>
	<view class="container">

		<view class="header">
			<image src="../../static/images/skm_fn_bg.png" mode="aspectFill" class="bg-img"></image>
			<view class="info-block flex-row-between">
				<view class="info">
					<view class="title" :data-type="type">
					{{type==7?'游戏':type==6?'视频':type==1?'收款码':type==2?'公众号':type==4?'二维码':'网站'}}{{$test.$test}}</view>
					<view class="desc">{{$test.$desc}}</view>
				</view>
				<view class="btn" @click="setup">修改</view>
			</view>
		</view>

		<view class="main">
			<view class="page-title flex-row-between">
				<view class="title">推广详情</view>
				<view class="btn-block flex-row">
					<view class="name">使用</view>
					<switch :checked="info.state==2?false:true" @change="onChangeType" style="transform:scale(0.7)" />
				</view>
			</view>

			<view class="cell flex-row-start">
				<view class="name">二维码ID</view>
				<view class="content">{{info.code}}</view>
			</view>

			<view class="cell flex-row-start" v-if="info.url">
				<view class="name">访问地址</view>
				<view class="content">{{info.url}}</view>
			</view>
			
			<view class="cell flex-row-start" v-if="info.moshi">
				<view class="name">模式设置</view>
				<view class="content">{{info.moshi==1?'普通模式':'高级模式'}} <block v-if="info.moshi==2">-{{info.moshi_type==2?'时间方式':'轮询方式'}} </block></view>
			</view>

			<view class="cell flex-row-start">
				<view class="name">分享链接</view>
				<view class="content">{{info.qrurl}} <text @click="copy" style="color:#00BFFF;margin-left: 20rpx;">复制</text></view>
			</view>

			<view class="cell flex-row-start">
				<view class="name">{{$test.$test}}次数</view>
				<view class="content">{{info.scan_num}}次
					| <text style="color:#000;margin-left: 20rpx;" @click="detail(1)">查看明细</text>
				</view>
			</view>

<block v-if="info.type!=7">
			<view class="cell flex-row-start">
				<view class="name">换量联盟</view>
				<view class="content" style="color:#000;">{{info.is_exchange=='Y'?'已加入':'未加入'}}</view>
			</view>
			
			<view class="cell flex-row-start">
				<view class="name">换量效益</view>
				<view class="content">{{info.exchange_num}}次
					| <text style="color:#000;margin-left: 20rpx;" @click="detail(2)">查看明细</text>
				</view>
			</view>	
</block>		
	
	
			<view  v-if="info.type==7" class="cell flex-row-start">
				<view class="name">游戏名称</view>
				<view class="content">{{info.game==1?'大转盘':'砸金蛋'}}
				</view>
			</view>	
	
			
			<view class="cell flex-row-start">
				<view class="name">生成时间</view>
				<view class="content">{{info.create_time}}</view>
			</view>

			<view class="cell flex-row-start" v-if="info.description">
				<view class="name">{{$test.$test}}备注</view>
				<view class="content">{{info.description}}</view>
			</view>
			<image :src="info.qrcode" mode="aspectFit" class="code-img"></image>
		</view>

		<view class="btm-btn-block">
			<view class="content flex-row-between">
				<!-- #ifdef H5 -->
				<block v-if="type==1||type==4">
					<view class="btn btn22" @click="upCode">下载二维码</view>
					<view class="btn btn11" @click="setup" data-index="index">修改</view>
				</block>
				<block v-else>
					<view class="btn btn22" style="background: #07c160;color: #FFFFFF;" @click="Wechat">分享好友/朋友圈</view>
					<view class="btn btn11" @click="setup" data-index="index">修改</view>
				</block>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<block>
					<view class="btn btn22" @click="upCode">下载二维码</view>
					<view class="btn btn11" @click="setup" data-index="index">修改</view>
				</block>
				<!-- #endif -->
			</view>
		</view>
		<view class="model" @click="close" v-if="isdown">
			<view class="model-home">
				<image class="model-img" src="/static/images/jt.png" />
				<view>1.请点击右上角
					<block>选择分享好友或者朋友圈</block>
				</view>
			</view>
			<view class="model-close">
				2.点击关闭遮盖层
			</view>
		</view>
	</view>
</template>
<script>
	// #ifdef H5
	import getWXSign from "@/static/js/config.js";
	// #endif 
	// #ifdef MP-WEIXIN
	import saveImgToPhotosAlbum from "@/static/js/saveImgToPhotosAlbum.js";
	// #endif
	export default {
		data() {
			return {
				$test: this.$test.$test,
				useing: false,
				info: {
					code: "",
					url: "",
					qrurl: "",
					qrurl: "",
					scan_num: "",
					create_time: "",
					description: "",
				},
				wx_content: {},
				type: 1,
				isdown: false,
			}
		},
		onLoad(e) {
			console.log(e, "e")
			this.card_num = e.card_num;
			this.type = Number(e.type);
		},

		onShow(e) {
			this.funeng_detail();
		},

		methods: {
			
			share(e) {
				var ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					getWXSign().then(res => {
						if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
							var imgUrl=this.wx_content.wximg_url?this.wx_content.wximg_url:getApp().globalData.URL + this.wx_content.wx_img;
							this.$wx.updateAppMessageShareData({
								title: this.wx_content.wx_title?this.wx_content.wx_title:"", // 分享标题
								desc: this.wx_content.wx_desc?this.wx_content.wx_desc:"", // 分享描述
								link: this.info.qrurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: imgUrl, // 分享图标
								success: (res) => {
									// 设置成功
									console.log("设置成功", res)
								}
							})
							this.$wx.updateTimelineShareData({
								title: this.wx_content.wx_title?this.wx_content.wx_title:"", // 分享标题
								link: this.info.qrurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: imgUrl, // 分享图标
								success: (res) => {
									// 设置成功
									console.log("设置成功", res)
								}
							})
						} else {
							this.$wx.onMenuShareTimeline({
								title: this.wx_content.wx_title?this.wx_content.wx_title:"", // 分享标题
								desc: this.wx_content.wx_desc?this.wx_content.wx_desc:"", // 分享描述
								link: this.info.qrurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl:imgUrl, // 分享图标
								success: function() {
									// 用户点击了分享后执行的回调函数
								}
							})
							this.$wx.onMenuShareAppMessage({
								title: this.wx_content.wx_title?this.wx_content.wx_title:"", // 分享标题
								desc: this.wx_content.wx_desc?this.wx_content.wx_desc:"", // 分享描述
								link: this.info.qrurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl:imgUrl, // 分享图标
								success: function() {
									// 用户点击了分享后执行的回调函数
								}
							})
						}
					})
				}
			},

			Wechat(e) {
				this.isdown = true;
			},

			close() {
				this.isdown = false;
			},

			copy(e) {
				// #ifdef MP-WEIXIN 
				uni.setClipboardData({
					data: this.info.qrurl,
					success: function() {
						console.log('success');
					}
				});
				// #endif
				// #ifdef H5
				let content = this.info.qrurl;
				if (!document.queryCommandSupported('copy')) {
					// 不支持
					return false
				}
				let textarea = document.createElement("input")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				textarea.remove();
				uni.showToast({
					title: "复制成功",
					icon: 'none'
				})
				return result
				// #endif
			},

			setup(e) {
				console.log("eeee", this.type)
				var type = this.type;
				let url =type==7 ?'/pages/index/games': type ==6 ?'/pages/index/video': type == 1 ? '/pages/index/enable' : type == 2 ? '/pages/index/public' : type == 4 ?
					'/pages/index/standard' : '/pages/index/article'
				uni.navigateTo({
					url: url + '?card_num=' + this.card_num,
				})
			},

			upCode(e) {
				// #ifdef H5
				uni.showModal({
					title: '提示',
					content: '请长按二维码图片进行保存',
					showCancel: false,
					confirmText: '好的',
				});
				// #endif

				// #ifdef MP-WEIXIN 
				var url = this.info.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			
			},

			funeng_detail() {
				this.request({
					url:"funeng/funeng_detailnew",
					data: {
						card_num: this.card_num,
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.info = res.data;
						this.wx_content = res.data;
						if (res.data.type==3&&!res.data.wx_title) {
							// #ifdef H5
							// this.Crawler(res.data.url);
							// #endif
						} else {
							console.log("res.data")
							// this.wx_content = res.data;
							if(res.data.type!=1){
								// #ifdef H5
								this.share();
								// #endif	
							}
								
						}
					}
				});
			},
			
            Crawler(url){
				this.request({
					url:"Exchange/Crawler",
					data: {
						url: url,
						token: uni.getStorageSync("token"),
					},
					method:"GET",
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
							var wx_content = {
								wx_title: res.data.title,
								wx_desc:  res.data.desc,
								wximg_url: res.data.img,
							}
							this.wx_content = wx_content;
							// #ifdef H5
							this.share();
							// #endif
					}
				}).catch((err)=>{
					console.log(err,"errr")
					// #ifdef H5
					this.share();
					// #endif
				});
			},

			detail(type) {
				uni.navigateTo({
					url: "../createRecordsDetail/createRecordsDetail?card_num=" + this.info.card_num+'&type='+type
				})	
			},

			
			onChangeType(e) {
				console.log(e)
				this.request({
					url: "funeng/save_state",
					data: {
						code: this.info.code,
						state: e.detail.value ? 1 : 2
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {

					}
				});
			}
		}
	}
</script>

<style>
	
	.header {
		width: 100%;
		height: 198rpx;
		position: relative;
	}

	.header .bg-img {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		z-index:1;
		width: 100%;
		height: 198rpx;
	}

	.header .info-block {
		padding: 0 40rpx 0 48rpx;
		height: 198rpx;
		 position: relative;
		 z-index: 2; 
	}

	.header .info-block .title {
		font-size: 36rpx;
		color: #fff;
		font-weight: 500;
		line-height: 50rpx;
	}

	.header .info-block .desc {
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;
		line-height: 40rpx;
		margin-top: 8rpx;
	}

	.header .info-block .btn {
		width: 120rpx;
		height: 56rpx;
		border: 2rpx solid #fff;
		border-radius: 28rpx;
		background-color: rgba(255, 255, 255, 0.2);
		text-align: center;
		line-height: 52rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;
	}

	.main {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		margin-top: -20rpx;
		padding: 20rpx 40rpx 0;
		z-index: 3;
        position: relative;
	}

	.main .page-title {
		padding: 28rpx 0 40rpx;
	}

	.main .page-title .title {
		font-size: 36rpx;
		color: #262626;
		line-height: 50rpx;
		font-weight: 600;
	}

	.main .page-title .btn-block .name {
		font-size: 28rpx;
		color: #7e7e7e;
		line-height: 50rpx;
		font-weight: 400;
	}

	.main .page-title .btn-block .switch-btn {
		width: 72rpx;
		height: 36rpx;
		border-radius: 18rpx;
		margin-left: 10rpx;
		position: relative;
	}

	.main .page-title .btn-block .switch-btn::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: #E8EEFF;
		border-radius: 18rpx;
	}

	.main .page-title .btn-block .switch-btn::after {
		content: "";
		display: block;
		width: 36rpx;
		height: 36rpx;
		background-color: #fff;
		border-radius: 18rpx;
		position: absolute;
		left: 0;
		top: 0;
		box-shadow: 0 0 20rpx #ccc;
		transition: all 0.3s ease-out;
	}

	.main .page-title .btn-block .switch-btn.checked::after {
		left: 36rpx;
		background-color: #3387FF;
		box-shadow: 0 0 20rpx #3387FF;
	}

	.main .cell {
		font-size: 30rpx;
		line-height: 42rpx;
		color: #666;
		margin-bottom: 24rpx;
	}

	.main .cell .name {
		flex: none;
		width: 176rpx;

	}

	.main .code-img {
		display: block;
		width: 400rpx;
		height: 400rpx;
		margin: 90rpx auto 126rpx;
	}

	.content {
		word-wrap: break-word;
		word-break: break-all;
	}

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

	.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(255, 255, 255, 0.4);
		color: #3387FF;
	}



	.model {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 9999;
		background: rgba(0, 0, 0, 0.5);
		font-size: 18px;
	}

	.model-home {
		width: 135px;
		height: 100px;
		position: fixed;
		right: 24px;
		top: 32px;
		text-align: center;
		color: #FFFFFF;
	}

	.model-close {
		width: 100%;
		height: 100px;
		position: fixed;
		right: 24px;
		top: 200px;
		text-align: right;
		color: #FFFFFF;
	}

	.model-img {
		width: 50px;
		height: 50px;
	}
</style>
