<template>
	<view class="pages-user-login " v-if="isLoad">
		<view class="page-height flex-center flex-column" v-if="launchFlag">
			<image mode="aspectFill" lazy-load class="logo-img mb-md" :src="base_info.app_logo"></image>
			<view class="f-caption c-caption">{{base_info.app_text}}</view>
			<view @tap="$refs.show_rule_item.open()" class="wechat-login flex-center f-title c-base"><i
					class="iconfont icon-weixin mr-sm"></i>微信登录
			</view>
		</view>
		<view v-else>
			<view class="swiper">
				<swiper class="swiper-list" interval="3000" :show-indicators="false" :autoplay="autoPlay"
					@change="sliderChange" :infinite="false" :forbid-slide-animation="false">
					<swiper-item class="swiper-item" v-for="(item, index) in base_info.app_banner" :key="index">
						<view @click="launchAppIndex" class="swiper-item-img">
							<image mode="aspectFill" lazy-load class="banner-img" :src="item" />
						</view>
					</swiper-item>
				</swiper>
				 <!-- @click="launchApp" -->
				<view class="swiper-to-home flex-center f-caption c-base radius abs" v-if="time>0">
					跳过 {{time}}s
				</view>
				<view class="dots" v-if="base_info.app_banner.length>1">
					<view class="dot"
						:style="{background:aindex==currIndex?primaryColor:'',width:aindex==currIndex?'30rpx':''}"
						v-for="(aitem,aindex) in base_info.app_banner" :key="aindex"></view>
				</view>
			</view>
		</view>
		<uni-popup ref="show_rule_item" type="center" :maskClick="false">
			<view class="common-popup-content fill-base pd-lg radius-34">
				<view class="title">温馨提示</view>
				<view class="f-desc c-title mt-lg">
					登录即表示您已详细阅读并同意<span @tap.stop="goDetail(1)" :style="{color:primaryColor}">
						《用户隐私协议》
					</span>与<span @tap.stop="goDetail(2)" :style="{color:primaryColor}">
						《个人信息保护指引》
					</span>
				</view>
				<view class="button">
					<view @tap.stop="$refs.show_rule_item.close()" class="item-child">取消</view>
					<view @tap.stop="wxLogin" class="item-child c-base"
						:style="{background: primaryColor,color:'#fff'}">确定</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				base_info: {},
				launchFlag: false,
				autoPlay: false,
				currIndex: 0,
				time: 5,
				timer: null
			}
		},
		async onLoad() {
			this.base_info = await this.$api.base.getConfig()
			this.isLoad = true
			let time = 5
			this.timer = setInterval(() => {
				if (time == 1) {
					this.launchApp()
				}
				if (time === 0) {
					clearTimeout(this.timer)
					return
				}
				time--
				this.time = time
			}, 1000)
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			autograph: state => state.user.autograph,
			appLogin: state => state.user.appLogin,
			push_id: state => state.user.push_id,
			userInfo: state => state.user.userInfo,
		}),
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo']),
			...mapMutations(['updateUserItem']),
			sliderChange(e) {
				this.currIndex = e.detail.current;
			},
			launchAppIndex() {
				if (this.base_info.app_banner.length == this.currIndex * 1 + 1) {
					// this.launchApp();
				} else {
					return;
				}
			},
			launchApp() {
				this.timer && clearTimeout(this.timer)
				let {
					autograph = '',
						appLogin = ''
				} = this
				if (autograph && appLogin) {
					this.toLogin(appLogin)
					return
				}
				this.launchFlag = true
			},
			//微信登录
			async wxLogin() {
				this.$refs.show_rule_item.close()
				try {
					let [providerErr, providerData] = await uni.getProvider({
						service: 'oauth',
					});
					let [loginErr, loginData] = await uni.login({
						provider: 'weixin'
					});
					let [infoErr, infoData] = await uni.getUserInfo({
						provider: 'weixin'
					})
					let {
						userInfo = {}
					} = infoData
					let {
						openId = ''
					} = userInfo
					if (!openId) return
					this.$util.showLoading({
						title: "登录中..."
					})
					userInfo.push_id = this.push_id
					try {
						console.log(userInfo, "=======userInfo")
						this.toLogin(userInfo)
					} catch (e) {
						this.$util.hideAll()
					}
				} catch (e) {
					this.$util.showToast({
						title: '请先安装微信或升级版本'
					});
				}
			},
			async toLogin(userInfo) {
				let user_info = await this.$api.base.logappLoginin({
					data: userInfo
				})
				this.updateUserItem({
					key: 'appLogin',
					val: userInfo
				})
				let {
					autograph,
					data
				} = user_info
				this.$util.hideAll()
				this.updateUserItem({
					key: 'userInfo',
					val: data
				})
				this.updateUserItem({
					key: 'autograph',
					val: autograph
				})
				let {
					phone = ''
				} = data
				this.$util.goUrl({
					url: phone ? `/pages/home` : `/mine/pages/phone`,
					openType: `reLaunch`
				})
			},
			goDetail(type) {
				let {
					siteroot
				} = siteInfo
				let href = siteroot.split('index.php')[0]
				let page = type == 1 ? 'protocol' : 'information'
				let url = `${href}${page}.html`
				this.$util.goUrl({
					url,
					openType: 'web'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.pages-user-login {

		.page-height {
			height: 100vh;
		}

		.logo-img {
			width: 160rpx;
			height: 160rpx;
		}

		.wechat-login {
			width: 522rpx;
			height: 98rpx;
			background: linear-gradient(90deg, #177541 0%, #00BF56 99%);
			box-shadow: 0 18rpx 9rpx 0 rgba(0, 188, 82, 0.07);
			border-radius: 49rpx;
			margin: 200rpx 0;
		}

		.swiper {
			width: 100%;
			height: 100vh;
			flex-direction: column;
			padding: 0;
			background-size: 100% auto;

			.swiper-list {
				width: 100%;
				height: 100%;

				.swiper-item {
					position: relative;
					display: flex;
					align-items: center;
					flex-direction: column;
					width: 100%;
					height: 100%;
					text-align: center;

					.swiper-item-img {
						justify-content: center;
						width: 100%;
						height: 100%;
						margin: 0 auto;

						.banner-img {
							width: 100%;
							height: 100%;
						}

					}
				}
			}


			.swiper-to-home {
				width: 122rpx;
				height: 47rpx;
				z-index: 999;
				right: 40rpx;
				top: 80rpx;
				background: rgba(0, 0, 0, 0.3);
			}

			.dots {
				position: absolute;
				z-index: 20rpx;
				text-align: right;
				width: 100%;
				transform: translateY(-68rpx);
				padding: 0 20rpx;
				text-align: center;

				.dot {
					display: inline-block;
					height: 12rpx;
					width: 12rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 12rpx;
					margin: 0 8rpx;
				}

				.cur {
					width: 20rpx;
				}
			}
		}

	}
</style>
