<template>
	<view class="life">
		<!-- 账户信息 -->
		<view class="life-header">
			<view class="life-header-flex">
				<view class="life-header-item">{{glz}}<text>GLF</text></view>
			</view>
		</view>
		<!-- 共力人生 -->
		<view class="life-cover">
			<view class="life-sign">
				<view class="life-sign-icon number-float" @click="onSign">
					<view class="life-sign-icon-text">{{isSign ? 'GLF': '签到'}}</view>
					<image class="life-sign-icon-image" :src="require('@/static/icon/sign_btn.png')" alt="签到"></image>
				</view>
				<view v-show="isSign">
					<view class="life-sign-num">{{base_hour}}</view>
					<view class="life-sign-unit">GLF/h</view>
					<view class="life-sign-time">
						<u-count-down ref="countDown" :time="nextSignAt" format="HH:mm:ss" :autoStart="false" @change="TimeDown" @finish="TimeFinish">
							<view class="time">
								<text class="time__item">{{ timeData.hours > 9 ? timeData.hours: '0'+timeData.hours}}:</text>
								<text class="time__item">{{ timeData.minutes > 9 ? timeData.minutes: '0'+timeData.minutes }}:</text>
								<text class="time__item">{{ timeData.seconds > 9 ? timeData.seconds: '0'+timeData.seconds }}</text>
							</view>
						</u-count-down>
					</view>
				</view>
			</view>
			<image class="life-cover-back" :src="require('@/static/life/back.png')"></image>
			<view class="life-role">
				<image class="life-role-src" :src="figurePath" mode="widthFix"/>
				<view class="life-role-content">
					<view class="life-role-nick">{{nickname || '-'}}</view>
					<view class="life-role-card">
						<image :src="identity.button_cover_url" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 功能入口 -->
		<view class="life-flex">
			<view class="life-flex-item house" @click="onNav({name: 'Store'}, 'tab')">
				<view class="house-content">
					<view class="house-title">DT商城</view>
					<view class="house-subtitle">共力共慧</br>健康生活馆</view>
				</view>
				<image src="../../static/img/house_back.jpg" mode="aspectFill"></image>
			</view>
			<view class="life-flex-item both">
				<view class="both-item team" @click="onToast('共力文娱暂未开放尽情期待')">
					<view class="team-content">
						<view class="team-title">共力文娱</view>
						<view class="team-subtitle">文娱短视频近期开放</view>
					</view>
					<image src="../../static/img/text_back.jpg" mode="aspectFill"></image>
				</view>
				<view class="both-item team" @click="onNav({name: 'Team'}, '')">
					<view class="team-content">
						<view class="team-title">共力团队</view>
						<view class="team-subtitle">
							近期{{children.indirect}}人成为伙伴</br>
							近期{{children.recommend}}人加入家族
						</view>
					</view>
					<image src="../../static/img/team_back.jpg" mode="aspectFill"></image>
				</view>
			</view>
			<!-- <view class="life-flex-item other" @click="onToast('消息中心暂未开放尽情期待')">
				<view class="other-title">
					<image src="../../static/life/icon_05.png" mode="widthFix"></image>
					消息中心
				</view>
				<view class="other-subtitle">{{message > 0 ? message + '条未读消息': '暂无消息'}}</view>
				<image class="other-back" src="../../static/life/icon_07.png"></image>
			</view> -->
			<view class="life-flex-item other" @click="onNav({name: 'Invitation'}, '')">
				<view class="other-title">
					<image src="../../static/life/icon_03.png" mode="widthFix"></image>
					邀请朋友
				</view>
				<view class="other-subtitle">加速共力分增长</view>
				<image class="other-back" src="../../static/life/icon_08.png"></image>
			</view>
			<view class="life-flex-item other" @click="onNav({name: 'Order',params:{index:0}})">
				<view class="other-title">
					<image src="../../static/life/icon_04.png" mode="widthFix"></image>
					我的订单
				</view>
				<view class="other-subtitle">{{order.all || '暂无订单'}}</view>
				<image class="other-back" src="../../static/life/icon_09.png"></image>
			</view>
			<!-- <view class="life-flex-item other" @click="onToast('共力好友暂未开放尽情期待')">
				<view class="other-title">
					<image src="../../static/life/icon_06.png" mode="widthFix"></image>
					共力好友
				</view>
				<view class="other-subtitle">在线即时互动</view>
				<image class="other-back" src="../../static/life/icon_10.png"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	import { life, sign } from '@/apis/interfaces/life.js'
	
	var account;
	
    export default {
        data() {
            return {
                nickname: '',
				figurePath: '',
				identity: {
					button_cover_url: ''
				},
				children: {
					recommend: 0,
					indirect : 0
				},
				message: 0,
				order: {
					all			: 0,
					init		: 0,
					pay			: 0,
					delivered	: 0
				},
				nextSignAt	: 0,
				glz			: 0,
				base_hour	: 0,
				base_seconds: 0,
				timeData	: {},
				isSign		: false,
            };
        },
		onShow() {
			this.getLife()
		},
		methods: {
			// 倒计时
			TimeDown(e){
				this.timeData = e
			},
			// 倒计时结束
			TimeFinish(){
				this.isSign = false
				clearInterval(account)
			},
			// 共力人生
			getLife(){
				life().then(res => {
					this.glz    		= res.account.glz
					this.base_hour		= res.account.base_hour
					this.base_seconds	= res.account.base_seconds
					this.nextSignAt 	= res.next_sign_at * 1000
					this.nickname   	= res.nickname
					this.figurePath 	= res.figure_path
					this.identity   	= res.identity
					this.children   	= res.children
					this.message		= res.message
					this.order			= res.order
					this.isSign			= res.is_sign
					if(res.is_sign){
						this.outTime()
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 计时器
			outTime(){
				this.$nextTick(() => {
					try{
						// 计算数值
						account = setInterval(() =>{
							let newGlz = (Number(this.glz) + this.base_seconds)
							this.glz = newGlz.toFixed(4)
						}, 1000)
						// 签到开始倒计时
						this.$refs.countDown.start();
					}catch(e){
						uni.showToast({
							title: e,
							icon : 'none'
						})
					}
				})
			},
			// 签到
			onSign(){
				if(this.isSign){
					this.$Router.push({name: 'Capacity'})
					return
				}
				uni.showLoading({
					title: '签到中..'
				})
				sign().then(res => {
					uni.showToast({
						title: '签到成功',
						icon : 'none'
					})
					this.getLife()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 我的订单
			onNav(name, type){
				if(type){
					this.$Router.pushTab({...name})
					return
				}
				this.$Router.push({...name})
			},
			// 开发中提示
			onToast(title){
				uni.showToast({
					title,
					icon : 'none'
				})
			}
		},
		onHide() {
			clearInterval(account)
			this.$refs.countDown.pause();
		}
    }
</script>

<style scoped>
	/* 气泡漂浮 */
	.number-float{
		animation: 4s octfloat infinite;
	}
	@keyframes octfloat{
		0%{
			margin-top: 0;
		}
		50%{
			margin-top: 15rpx;
		}
		100%{
			margin-top: 0;
		}
	}
</style>

<style lang="scss" scoped>
	.life{
		min-height: 100vh;
		background: #f8f8f8;
	}
	// 功能栏目
	.life-flex{
		padding: 30rpx 20rpx 30rpx;
		border-radius: 30rpx;
		margin-top: -30rpx;
		background: $window-color;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		z-index: 1;
		.life-flex-item{
			background: white;
			border-radius: 20rpx;
			width: calc(50% - 20rpx);
			margin: 10rpx;
			padding: 30rpx;
			box-sizing: border-box;
			&.house{
				height: 400rpx;
				position: relative;
				overflow: hidden;
				background-color: #555;
				image{
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					opacity: .5;
				}
				.house-content{
					position: relative;
					z-index: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.house-title{
						color: white;
						font-size: 36rpx;
						font-weight: bold;
					}
					.house-subtitle{
						color: white;
						font-size: 26rpx;
					}
				}
			}
			&.nav{
				width: calc(33.33% - 20rpx);
				height: 150rpx;
				position: relative;
				overflow: hidden;
				background-color: #555;
				image{
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					opacity: .5;
				}
				.nav-content{
					position: relative;
					z-index: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.nav-title{
						color: white;
						font-size: 40rpx;
						font-weight: bold;
					}
				}
			}
			&.both{
				background: none;
				padding: 0;
				border-radius: 0;
				.both-item{
					background: white;
					height: 190rpx;
					border-radius: 20rpx;
					padding: 20rpx;
					box-sizing: border-box;
					&:first-child{
						margin-bottom: 20rpx;
					}
					&.team{
						position: relative;
						overflow: hidden;
						background-color: #555;
						image{
							position: absolute;
							width: 100%;
							height: 100%;
							top: 0;
							left: 0;
							opacity: .5;
						}
						.team-content{
							position: relative;
							z-index: 1;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.team-title{
								color: white;
								font-size: 36rpx;
								font-weight: bold;
							}
							.team-subtitle{
								color: white;
								font-size: 24rpx;
							}
						}
					}
				}
			}
			&.other{
				height: 160rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.other-back{
					width: 150rpx;
					height: 150rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}
				.other-title{
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					image{
						width: 36rpx;
						vertical-align: middle;
						margin-bottom: 4rpx;
						margin-right: 10rpx;
					}	
				}
				.other-subtitle{
					font-size: 26rpx;
					color: gray;
				}
			}
		}
	}
	// 入口模块
	.life-nav{
		padding: 20rpx 20rpx 10rpx;
		display: flex;
		&-item{
			margin: 10rpx;
			border-radius: 20rpx;
			width: 33.33%;
			padding: 30rpx 20rpx;
			text-align: center;
			color: white;
			font-weight: bold;
			font-size: 36rpx;
			image{
				width: 60rpx;
				height: 60rpx;
				vertical-align: top;
			}
			&:nth-child(1){
				background-color: #6da2f8;
			}
			&:nth-child(2){
				background-color: #faa471;
			}
			&:nth-child(3){
				background-color: #8c79f9;
			}
		}
	}
	// header
	.life-header{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		@extend .ios-top;
		.life-header-flex{
			padding: 20rpx 30rpx 30rpx;
			display: flex;
			justify-content: center;
			height: 70rpx;
			line-height: 70rpx;
			.life-header-item{
				border-radius: 35rpx;
				padding: 0 20rpx;
				margin-right: 20rpx;
				font-size: 42rpx;
				font-weight: bold;
				text{
					font-weight: normal;
					padding-left: 5rpx;
					font-size: 70%;
				}
			}
		}
	}
	// 角色信息
	.life-cover{
		position: relative;
		width: 100%;
		padding-top: 134%;
		overflow: hidden;
		.life-sign{
			position: absolute;
			top: 15vh;
			right: $margin * 2;
			z-index: 999;
			text-align: center;
			.life-sign-icon{
				display: inline-block;
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
				position: relative;
				.life-sign-icon-image{
					position: absolute;
					top: 0;
					left: 0;
					width: 98rpx;
					height: 98rpx;
				}
				.life-sign-icon-text{
					position: absolute;
					top: 0;
					left: 0;
					width: 98rpx;
					height: 98rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					z-index: 1;
					font-size: 28rpx;
					color: white;
				}
			}
			.life-sign-num{
				color: #f79824;
				font-size: 36rpx;
				line-height: 30rpx;
				height: 30rpx;
				text-shadow: 0 2rpx 2rpx rgba(0, 0, 0, .3);
			}
			.life-sign-unit{
				font-weight: bold;
				color: #f79824;
				font-size: 30rpx;
				line-height: 40rpx;
				text-shadow: 0 2rpx 2rpx rgba(0, 0, 0, .3);
			}
			.life-sign-time{
				.time{
					@include flex;
					align-items: center;
					&__item {
						color: #333;
						font-size: 14px;
					}
				}
			}
		}
		.life-cover-back{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
		.life-role{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			z-index: 99;
			text-align: center;
			.life-role-src{
				width: 400rpx;
			}
			.life-role-content{
				padding-bottom: 50rpx;
				font-weight: bold;
				.life-role-nick{
					color: #333;
					font-size: 40rpx;
				}
				.life-role-card{
					padding-top: 10rpx;
					image{
						width: 240rpx;
					}
				}
			}
		}
	}
</style>
