<template>
	<view class="we-run-page">
		<view class="contant">
			<image src="../../static/img/run/bg.png" class="bg" mode="widthFix"></image>
			<view class="we-run-container">
				<image src="../../static/img/run/runBg.png" class="run-logo" mode="widthFix"></image>
				<view class="run-step-number">
					<text class="title">今日步数</text>
					<view class="steps" v-if="unregistered">
						<text class="num">{{todayNum}}</text>
						<text>步</text>
					</view>
					<view v-else class="steps-empower">
						<u-button  open-type="getPhoneNumber" @getphonenumber="getInfoPhoneNumber" type="primary" size="mini" color="#00c791" :plain="true" text="授权查看"></u-button>
					</view>
				</view>
				<image src="../../static/img/run/ranking_btn.png" class="ranking_btn" mode="widthFix"></image>
			</view>
		</view>
		<u-tabbar :value="tabBarVal" @change="changeTabBar" :fixed="true" :placeholder="true" activeColor="#00c791" :safeAreaInsetBottom="true">
			<u-tabbar-item text="步数" name="步数">
				<image class="u-page__item__slot-icon" slot="active-icon" src="../../static/img/run/tabbar_Index1.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../static/img/run/tabbar_Index.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="商城"  name="商城">
				<image class="u-page__item__slot-icon" slot="active-icon" src="../../static/img/run/tabbar_shop1.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../static/img/run/tabbar_shop.png">
				</image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>
<script>
	import http from '@/shopro/request/index';
	import store from '@/shopro/store';
	import {
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				unregistered:false,
				tabBarVal: '步数',
				registerPopup:true,
				form:{name:'xxx'},
				tips: '获取',
				seconds: 10
			}
		},
		computed: {
			...mapGetters(['userInfo','todayNum'])
		},
		methods: {
			...mapActions(['getPhoneNumber','registerInfoFn','getWeRunDataFn','authCheck','getUserInfo']),
			// 切换底部tab;
			changeTabBar(name){
				this.tabBarVal = name;
				if(name == '商城') {
					if(!this.unregistered) {
						this.$u.toast("点击授权进行注册");
						return false;
					}
					uni.navigateTo({
						url: '/pages/h5/index',
					})
				} 
			},
			// 获取手机号
			async getInfoPhoneNumber (e) {
				let number = await this.getPhoneNumber(e);
				let register = await this.registerInfoFn();
				if(register){ //注册成功，再掉获取步数接口
					let runData = await this.getWeRunDataFn();
					runData && (this.unregistered = true);
				}
			},
			async getAuth(){
				let token = uni.getStorageSync('token');
				// 如果有缓存信息
				if (token) {
					let auth = await this.authCheck();
					if(auth == 0) {
						let runData = await this.getWeRunDataFn();
						runData && (this.unregistered = true);
					}else if(auth == 2001){
						this.unregistered = false;
					}
				} else { 
					let getUserInfo = await this.getUserInfo();
				}
			}
		},
		onHide(){
		},
		onShow() {
			this.tabBarVal = "步数";
			// uni.hideTabBar();
		},
		onReady() {
			this.getAuth();
		}
	}
</script>
<style lang="scss" scoped>
	.we-run-page {
		background-color: #fff;

		.contant {
			height: calc(100% - 100px - env(safe-area-inset-bottom));
			box-sizing: border-box;
			position: relative;

			.bg {
				width: 100%;
			}

			.we-run-container {
				position: absolute;
				top: 250rpx;
				text-align: center;
				width: 100%;

				.run-logo {
					width: 425rpx;

				}

				.run-step-number {
					position: absolute;
					transform: translateX(-50%);
					left: 50%;
					top: 175rpx;

					.title {
						font-size: 25rpx;
					}

					.steps {
						font-size: 25rpx;

						.num {
							font-size: 57rpx;
							font-weight: bold;
						}
					}

					.steps-empower {
						margin-top: 30rpx;
						font-size: 20rpx;
					}
				}

				.ranking_btn {
					margin-top: 100rpx;
					height: 120rpx;
				}
			}
		}

		.registre-popup{
			margin:60rpx 0;
			padding:0 40rpx;
			.btn{
				
			}
		}
	}

	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}
</style>
