<template>
	<view class="about-container">
		<user-info @handleRefresh="handleRefresh"></user-info>
		<view class="myrights">
			<view class="left">
				算力：<span class="times">{{ leftTimes }}</span>点
			</view>
			<view class="right" v-if="leftCutTimes">
				AI绘图插队权益：<span class="times">{{ leftCutTimes }}</span>次
			</view>
		</view>
		<view class="vip-wrap" v-if="!isVIP">
			<view class="left">
				<view class="p-up">加入AI降临派VIP</view>
				<view class="p-down">与AI畅聊，了解更多权益</view>
			</view>
			<view class="right">
				<view class="btn" @click="handleGoVip">立即开通</view>
			</view>
		</view>
		<view class="activites">
			<view class="title">
				<span class="sp1">热门活动(3月)</span>
				<!-- <span class="sptimes">剩余算力：<span class="times">{{leftTimes}}</span>点</span> -->
			</view>
			<view class="activity" v-for="(item, index) in list" :key="index">
				<view class="left">
					<p>{{item.p1}}</p>
					<p class="p2">{{item.p2 ? item.p2 : `加${item.vip && isVIP ? item.vip: settings[item.attr].addTimes}点算力`}}</p>
				</view>
				<view class="right">
					<button type="primary" v-if="item.type === 1" @click="checkIn">{{ item.btn }}</button>
					<button type="primary" v-if="item.type === 2" @click="handleAd">{{ item.btn }}</button>
					<button type="primary" v-if="item.type === 3" open-type="share">{{ item.btn }}</button>
					<button type="primary" v-if="item.type === 4" @click="handleOfficial">{{ item.btn }}</button>
					<button type="primary" v-if="item.type === 5" @click="showImage">{{ item.btn }}</button>
					<button type="primary" v-if="item.type === 6" open-type="contact">{{ item.btn }}</button>
					<button type="primary" v-if="item.type === 7" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">{{ item.btn }}</button>
				</view>
			</view>
		</view>
		<!-- <view class="official-view" v-if="showofficial">
			<official-account @bindload="bindload" @binderror="binderror"></official-account>
		</view> -->
		<view class="bottom-view">
			
			<!-- <ad unit-id="adunit-040904dd51f9c9ee"></ad> -->
			<button class="subbtn" open-type="contact" :session-from="`userId=${userId}`">在线客服</button>
			<!-- <button class="subbtn" type="default" @click="handlePopupAboutme">关于AI降临派</button> -->
		</view>
		<uni-popup ref="popupme" type="center">
			<view class="popup-container">
				关于AI降临派
			</view>
		</uni-popup>
		<uni-popup ref="popupwx" type="center">
			<view class="popup-container">
				<view class="">长按图片加入</view>
				<image mode="aspectFit" :src="settings.qrcode" style="width: 100%;height: 100%;" alt="" :show-menu-by-longpress="true"></image>
			</view>
		</uni-popup>
		<uni-popup ref="popupwxmp" type="center">
			<view class="popup-container2">
				<view class="">长按图片关注</view>
				<image mode="aspectFit" src="/static/ai/wxmp1.jpg" style="width: 100%;height: 100%;" alt="" :show-menu-by-longpress="true"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import UserInfo from '@/components/userinfo.vue'
	import { checkInSuccess, adSuccess, getUserinfo, getPhoneNumber } from '@/api/index.js'
	import { curVersion } from '@/common/config.js'
	var app = getApp();
	export default {
		data() {
			return {
				showofficial: false,
				list: [],
				videoAd: null
			}
		},
		components: {
			UserInfo
		},
		onLoad(option) {
			if (option.uid && option.uid != 'undefined') {
				this.setShareId(option.uid)
			}
			if (!this.chatToken || curVersion !== this.version) {
				// this.getCode()
				this.$store.dispatch('login').then(rst => {
					this.initList()
				})
			} else {
				this.initList()
			}
		},
		onShow() {
			this.updateUserinfo()
		},
		computed: {
			...mapState(['userId', 'settings', 'leftTimes', 'chatToken', 'version', 'isVIP', 'expireTime', 'leftCutTimes', 'finishPhone'])
		},
		mounted() {
			
			const that = this
			// 在页面onLoad回调事件中创建激励视频广告实例
			if (wx.createRewardedVideoAd) {
				let videoAd = wx.createRewardedVideoAd({
					adUnitId: 'adunit-3803c485a4334f76'
				})
				this.videoAd = videoAd
				videoAd.onLoad(() => {})
				videoAd.onError((err) => {})
				videoAd.onClose((res) => {
					if (res && res.isEnded) {
						// 正常播放结束，可以下发游戏奖励
						adSuccess().then((rst) => {
							if (rst.data && rst.data.now > rst.data.before) {
								that.setLeftTimes(rst.data.now)
								wx.showToast({
									title: `恭喜您，获得${that.settings.ad.addTimes}点算力`,
									icon: 'none',
									duration: 1500
								})
							}
						})
					} else {
						// 播放中途退出，不下发游戏奖励
					}
			  })
			}
		},
		methods: {
			...mapMutations(['setLeftTimes', 'setLoginInfo']),
			initList() {
				const list = [
					{ type: 1, vip: 20, attr: 'checkIn', btn: '去签到', p1: '每日签到免费领取' },
					{ type: 2, attr: 'ad', btn: '去观看', p1: '完整观看视频' },
					{ type: 3, attr: 'realShare', btn: '去邀请', p1: '邀请好友注册' },
					{ type: 4, attr: '', btn: '去关注', p1: '关注官方公众号', p2: '请搜索“AI降临派 | EAO”' },
					{ type: 5, attr: '', btn: '去加入', p1: '加入官方微信群', p2: '获取更多实时信息' }
					// { type: 6, attr: '', btn: '去联系', p1: '在线客服', p2: '获取更多帮助' },
					// { type: 7, attr: '', btn: '去绑定', p1: '绑定手机号', p2: '不走丢' },
				]
				if (!this.finishPhone) {
					list.push({ type: 7, attr: '', btn: '去绑定', p1: '绑定手机号', p2: '不走丢' })
				}
				
				this.list = list
			},
			handleGoVip() {
				uni.navigateTo({
					url: '/pages/about/vip/vip'
				})
			},
			handleRefresh() {
				this.updateUserinfo()
			},
			async checkIn() {
				const res = await checkInSuccess()
				if (res.code === 0) {
					this.setLeftTimes(res.data.now)
					if (res.data.now > res.data.before) {
						wx.showToast({
							title: `恭喜您，获得${this.isVIP?20:this.settings.checkIn.addTimes}点算力`,
							icon: 'none',
							duration: 1500
						})
					} else {
						wx.showToast({
							title: `今日已经签到`,
							icon: 'none',
							duration: 1500
						})
					}
				}
			},
			handleAd() {
				// 用户触发广告后，显示激励视频广告
				this.videoAd.show().catch(() => {
				    // 失败重试
				    this.videoAd.load()
						.then(() => this.videoAd.show())
						.catch(err => {
							console.log('激励视频 广告显示失败')
						})
				})
			},
			handleOfficial() {
				this.$refs.popupwxmp.open()
				// wx.showToast({
				// 	title: `敬请期待`,
				// 	icon: 'success',
				// 	duration: 1500
				// })
				// 以下进入场景可以触发公众号
				// const scenes = [1089, 1047, 1124, 1038]
				// if (scenes.includes(app.globalData.scene)) {
				// 	this.showofficial = !this.showofficial
				// } 
			},
			handlePopupAboutme() {
				this.$refs.popupme.open()
			},
			showImage() {
				this.$refs.popupwx.open()
				// uni.getImageInfo({
				// 	src: '/static/ai/group1.jpg'
				// }).then(res => {
				// 	const imgsrc = '/' + res[1].path
				// 	console.log(imgsrc)
				// 	wx.previewImage({
				// 	  current: imgsrc, // 当前显示图片的 http 链接
				// 	  urls: [imgsrc] // 需要预览的图片 http 链接列表
				// 	})
				// })
				// uni.previewImage({
				// 	urls: ['/static/ai/group1.jpg'],
				// 	longPressActions: {
				// 		itemList: ['发送给朋友', '保存图片', '收藏'],
				// 		success: function(data) {
				// 			console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				// 		},
				// 		fail: function(err) {
				// 			console.log(err.errMsg);
				// 		}
				// 	}
				// });
			},
			async getPhoneNumber(e) {
				if (e.detail.code) {
					const res = await getPhoneNumber(e.detail.code)
					if (res.code === 0) {
						this.updateUserinfo()
						wx.showToast({
							title: `已绑定`,
							icon: 'none',
							duration: 1500
						})
					}
				}
			},
			async updateUserinfo() {
				const res = await getUserinfo()
				if (res.code === 0) {
					this.setLoginInfo(res.data)
					this.initList()
					uni.stopPullDownRefresh();
				}
			},
			bindload(detail) {
				console.log(detail, 'bindload')
			},
			binderror(detail) {
				console.log(detail, 'binderror')
			},
			onShareAppMessage: function (obj) {
				let path = `/pages/ai/main/main?uid=${this.userId}`
				let title = '加入AI降临派，与AI真神对话！'
				return { title,	path };
			},
			onPullDownRefresh() {
				this.updateUserinfo()
			}
		}
	}
</script>

<style lang="less" scoped>

	.about-container {
		height: 100%;
		background-color: @mainBg;
		color: #FFF;
		overflow: auto;
		padding-bottom: 120rpx;
		box-sizing: border-box;
		.myrights {
			margin: 10rpx 40rpx 20rpx;
			padding: 24rpx 40rpx;
			display: flex;
			justify-content: space-between;
			border: 1px solid #43474f;
			border-radius: 8rpx;
			.left, .right {
				.times {
					color: @mainColor;
					font-weight: 600;
				}
			}
		}
		.vip-wrap {
			padding: 30rpx 40rpx;
			background-color: darken(@mainBg, 5%);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				.p-up {
					color: @mainColor;
					font-size: 32rpx;
				}
				.p-down {
					color: @fontColor;
					font-size: 28rpx;
				}
			}
			.right {
				width: 200rpx;
				
				.btn {
					.combtn(28rpx, 68rpx);
					font-weight: 600;
					position: relative;
					&::after {
						content: "VIP限时6折";
						position: absolute;
						border-radius: 4rpx;
						height: 36rpx;
						line-height: 36rpx;
						right: -40rpx;
						top: -20rpx;
						background-color: darken(@mainColor, 10%);
						color: #ffCF00;
						font-size: 24rpx;
						width: 140rpx;
						transform: scale(0.9);
					}
				}
			}
		}
		
		.activites {
			margin: 20rpx 40rpx;
			padding: 16rpx 40rpx  4rpx;
			border: 1px solid @borderColor;
			border-radius: 12rpx;
			.title {
				padding-bottom: 16rpx;
				border-bottom: 1px solid @borderColor;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.sp1 {
					color: @fontColor;
					font-weight: 600;
					font-size: 32rpx;
				}
				.sptimes {
					.times {
						color: @mainColor;
					}
				}
			}
			.activity {
				padding: 16rpx 0;
				display: flex;
				&:not(:last-child) {
					border-bottom: 1px solid @borderColor;
				}
				.left {
					flex: 1;
					.p2 {
						color: @mainColor;
						font-size: 26rpx;
					}
				}
				.right {
					// width: 180rpx;
					display: flex;
					align-items: center;
					button {
						.combtn(28rpx, 60rpx);
						// background-color: @mainColor;
						// border: none;
						// line-height: 60rpx;
						// color: #FFF;
						// font-size: 28rpx;
						// &:active {
						// 	background-color: lighten(@mainColor, 5%);
						// }
					}
				}
			}
			
		}
	
		.official-view {
			box-sizing: border-box;
			padding: 0 40rpx;
			width:100%;
			position:relative;
		}
		.bottom-view {
			display: flex;
			justify-content: space-around;
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 40rpx 40rpx;
			box-sizing: border-box;
			.subbtn {
				width: 240rpx;
				background: @mainBg;
				color: @mainColor;
				border:1px solid @mainColor;
				font-size: 28rpx;
				&:active {
					color: lighten(@mainColor, 5%);
				}
			}
		}
	}
	.popup-container {
		width: 560rpx;
		height: 840rpx;
		background-color: @borderColor;
		padding: 40rpx;
		text-align: center;
		border-radius: 8rpx;
	}
	.popup-container2 {
		width: 560rpx;
		height: 620rpx;
		background-color: @borderColor;
		padding: 40rpx;
		text-align: center;
		border-radius: 8rpx;
	}
</style>
