<template>
	<view class="content">
		<!-- 账户余额 -->
		<view class="total">
			<view class="item nowrap" @click="navAccount('walletProperty')"><image src="@/static/icons/gemstone-icon.png"/>{{isAuth ? '能量球' + account.coin : '查看能量球'}}</view>
			<view class="item nowrap" @click="navAccount('Fragment')"><image src="@/static/icons/crystal-icon.png"/>{{isAuth ? '能量碎片' + account.crystal : '查看能量碎片'}}</view>
		</view>
		<!-- 矿机 -->
		<view class="ore">
			<image class="ore-back" src="@/static/background/chain-back-00.png" mode="widthFix"></image>
			<view class="ball">
				<view class="shadow"></view>
			</view>
			<block v-if="isAuth">
				<view class="ore-lists">
					<view class="oct-float ore-item" v-for="(item, index) in crystalArr" :key="index" :style="{left: item.left + '%', top: item.top + '%'}" @click="ledCrystal(index)">
						<block v-if="item.amount !== null">
							<view class="oct-icon">
								<image src="@/static/icons/crystal-icon.png" mode="widthFix" class="icon" />
							</view>
							<view class="text">{{ item.amount || '-'}}</view>
						</block>
					</view>
					<view class="oct-float ore-item-nav" @click="issueGoosd">
						<view class="oct-icon">
							<image src="@/static/icons/gemstone-ore-icon.png" mode="widthFix" class="icon" />
						</view>
						<view class="text">发权证<uni-icons type="arrowright" color="#FFFFFF" size="12"></uni-icons></view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="ore-lists">
					<view class="oct-float oct-login" @click="$Router.push({name: 'Login'})">
						<view class="oct-icon">
							<image src="@/static/icons/crystal-icon.png" mode="widthFix" class="icon" />
						</view>
						<view class="text">登录后领取</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 任务推荐 -->
		<scroll-view class="task-block" scroll-x="true">
		     <view class="item" v-for="(item, index) in categoryArr" :key="index" @click="JumpUrl(item.url, item.title)">
		     	<view class="text nowrap">{{item.sub_title}}</view>
		     	<view class="icon">
		     		<image :src="item.cover" />
		     	</view>
		     	<view class="title nowrap">{{item.title}}</view>
		     	<view class="submit-title nowrap">能量碎片{{item.tips}}</view>
		     </view>
		</scroll-view>
		<!-- 平台概况 -->
		<view class="situation">
			<view class="header">
				<view class="header-item">
					<view class="title">平台能量球余量<uni-icons class="help-icon" @click="showHelp('balance')" type="help-filled" size="15" color="rgba(255,255,255,.3)" /></view>
					<view class="number nowrap">{{chains.balance}}</view>
				</view>
				<view class="header-item">
					<view class="title">上期能量球价值<uni-icons class="help-icon" @click="showHelp('up')" type="help-filled" size="15" color="rgba(255,255,255,.3)" /></view>
					<view class="number nowrap">{{chains.up}}</view>
				</view>
				<view class="header-item">
					<view class="title">昨日瓜分能量碎片<uni-icons class="help-icon" @click="showHelp('score')" type="help-filled" size="15" color="rgba(255,255,255,.3)" /></view>
					<view class="number nowrap">{{chains.score}}</view>
				</view>
				<view class="header-item">
					<view class="title">区块链高度<uni-icons class="help-icon" @click="showHelp('height')" type="help-filled" size="15" color="rgba(255,255,255,.3)" /></view>
					<view class="number nowrap">{{chains.height}}</view>
				</view>
				<view class="header-item">
					<view class="title">已开通节点数<uni-icons class="help-icon" @click="showHelp('number')" type="help-filled" size="15" color="rgba(255,255,255,.3)" /></view>
					<view class="number nowrap">{{chains.number}}</view>
				</view>
			</view>
			<!-- 平台累计盈利，能量球 -->
			<view class="chart">
				<view class="title">累计盈利和能量球价值走势图</view>
				<view class="chart-f2">
					<l-f2 ref="chartChange"></l-f2>
				</view>
			</view>
			<!-- 提示信息 -->
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import { chain, crystals, thawlog } from '@/apis/interfaces/chain'
	import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
	import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
	export default {
		components:{
			lF2
		},
		data() {
			return {
				isAuth		: false,
				chains		: {		// 区块链统计
					balance	: 0,
					height	: 0,
					number	: 0,
					score	: 0,
					up		: 0
				},
				account		:  {	// 账户
					coin	: 0,
					crystal	: 0
				},
				crystalArr  : [],	// 待领取
				allIds		: [],   // 可领取ids
				categoryArr	: [],	// 推荐列表
				help		: {},	// 帮助信息
				userAuth	: {		// 用户认证状态
					certification : false,
					company		  : false,
					vip			  : false
				}
			};
		},
		onShow() {
			this.isAuth = this.$store.state.token != ''
			this.getIndex()
		},
		methods:{
			// 求助信息
			showHelp(key) {
				uni.showModal({
					title: '提示',
					content: this.help[key],
					showCancel: false,
					confirmColor: '#8b64fd'
				})
			},
			// 查看钱包账户
			navAccount(pathName){
				if(!this.isAuth){
					this.$Router.push({name: 'Login'})
					return
				}
				this.$Router.push({name: pathName})
			},
			// 发权证
			issueGoosd(){
				let typeAuth = '',
					pathName = ''
				
				if(this.userAuth.certification && this.userAuth.company && this.userAuth.vip){
					this.$Router.push({name: 'goodsManagement'})
					return
				}
				if(!this.userAuth.certification) {
					typeAuth = '暂未完成个人认证，无法发布商品权证'
					pathName = 'Personal'
				}
				if(!this.userAuth.company) {
					typeAuth = '暂未开通平台会员节点，无法发布商品权证'
					pathName = 'vipIndex'
				}
				if(!this.userAuth.vip) {
					typeAuth = '企业未认证或企业认证审核中，无法发布商品权证'
					pathName = 'User'
				}
				uni.showModal({
					title: '提示',
					content: typeAuth,
					cancelColor: '#555',
					cancelText: '稍后',
					confirmText: pathName === 'vipIndex' ? '去开通': '去认证',
					confirmColor: '#8b64fd',
					success: res => {
						if(res.confirm) {
							this.$Router.push({name: pathName})
						}
					}
				})
			},
			// 领取能量碎片
			ledCrystal(index) {
				// 播放音频
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = require('@/static/mp3/crystal.mp3');
				// 请求接口
				thawlog({
					thaw_id: this.crystalArr[index].log_id,
					all_ids: this.allIds
				}).then(res => {
					uni.showToast({
						image: require('@/static/icons/crystal-icon.png'),
						title: '+' + this.crystalArr[index].amount,
						duration: 2000
					})
					this.$set(this.account, 'crystal', res.crystal)
					this.ids = res.all_ids
					if (JSON.stringify(res.last) === '[]') {
						this.$set(this.crystalArr, index, {
							amount: null
						})
						return
					}
					this.$set(this.crystalArr, index, res.last)
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err
					})
				})
			},
			// occ信息
			getIndex(){
				Promise.all([crystals(), chain()]).then(res=>{
					let crystalsData = res[0],
						occData		 = res[1]
					if(!crystalsData.needLogin){
						this.account 	= {
							coin	: crystalsData.coin,
							crystal	: crystalsData.crystal
						}
						this.userAuth	= {
							certification : crystalsData.is_certification,
							company		  : crystalsData.is_company,
							vip			  : crystalsData.is_vip
						}
						this.crystalArr = crystalsData.crystal_array
						this.allIds		= crystalsData.all_ids
					}
					this.chains 	 = occData.data
					this.categoryArr = occData.tasks
					this.help		 = occData.help
					this.showCartc(occData.movement)
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 绘制图表
			showCartc(data){
				// 图表信息
				this.$refs.chartChange.init(config => {
					config.appendPadding = [10, 30, 10, 15]
					const chart = new F2.Chart(config);
					chart.source(data, {
						date: {
							range: [0, 1],
							type: 'timeCat',
							mask: 'MM-DD'
						},
						value: {
							tickCount: 5
						}
					});
					chart.legend({
						position: 'bottom',
						offsetY: 0,
						offsetX: 30
					});
					chart.area()
						.position('date*value')
						.color('name', [ '#5881d3', '#ca66e0' ])
						.shape('smooth')
					chart.line()
						.position('date*value')
						.color('name', [ '#5881d3', '#ca66e0' ])
						.shape('smooth', name=> {
							if (name === '预期收益率') {
								return 'line';
							}
							if (name === '实际收益率') {
								return 'dash';
							}
						});
						chart.render();
					return chart;
				})
			},
            
            // 能量跳转
            JumpUrl(open, title) {
                var type = open.openType;
                switch(type){
                    case 'switchTab': 
                        this.$Router.pushTab({name: open.path})
                        break;
                    case 'web':
                        window.location.href = open.path
                        break;
                    case 'navigateTo':
                        this.$Router.push({name: open.path})
                        break;
                }
            }
		}
	}
</script>

<style scoped>
	/* 星球旋转 */
	.ball{
		position: absolute;
		height: 480rpx;
		width: 480rpx;
		top: 50%;
		left: 50%;
		margin-top: -240rpx;
		margin-left: -240rpx;
		border-radius: 50%;
		-webkit-transform-style: preserve-3d;
		background: url(/static/background/chain-back-02.png) repeat-x;
		/* background-size: auto 100%; */
		background-size: 1616rpx;
		-webkit-animation: move-map 60s infinite linear;
		-moz-animation: move-map 60s infinite linear;
		-o-animation: move-map 60s infinite linear;
		-ms-animation: move-map 60s infinite linear;
		animation: move-map 60s infinite linear;
		box-shadow: 0 0 50rpx 50rpx rgba(31,25,34, .2);
	}
	.shadow{
		position: absolute;
		top: 1%;
		left: 5%;
		width: 90%;
		height: 90%;
		border-radius: 50%;
		filter: blur(5px);
		z-index: 3;
		background: radial-gradient(circle at 50% 0, rgba(255,255,255, .6) , rgba(255, 255, 255, .0) 58%);
	}
	.ball:before,
	.ball::after{
		position: absolute;
		top: 0;
		left: 0;
		content: "";
		width: 100%;
		height: 100%;
		border-radius: 50%;
		filter: blur(5px);
		z-index: 2;
	}
	.ball:before {
		background: radial-gradient(circle at 100% 50%, #5881d3 , rgba(255, 255, 255, .0) 45%);
	}
	.ball::after {
		background: radial-gradient(circle at 0 50%, #ca66e0 , rgba(255, 255, 255, .0) 45%);
	}
	@-webkit-keyframes move-map {
		0% {background-position: -1616rpx 0; }
		100% {background-position: 0 0;}
	}
	@-ms-keyframes move-map {
		0% {background-position: -1616rpx 0; }
		100% {background-position: 0 0;}
	}
	
	@keyframes move-map {
		0% {background-position: -1616rpx 0; }
		100% {background-position: 0 0;}
	}
	
	/* 水晶漂浮动画 */
	.oct-float {
		animation: 4s octfloat infinite;
	}
	@keyframes octfloat {
		0% {
			margin-top: 0;
		}
	
		50% {
			margin-top: 10rpx;
		}
	
		100% {
			margin-top: 0;
		}
	}
</style>

<style lang="scss" scoped>
	.content{
		min-height: calc(100vh - 60px);
		background: #1f1922;
		overflow: hidden;
	}
	// 平台概况
	.situation{
		margin: 0 $margin;
		background-image: linear-gradient(to bottom, $block-color, #1f1922);
		border-radius: $radius;
		padding: $padding $padding/2 $padding*2;
		// 平台统计
		.header{
			display: flex;
			flex-wrap: wrap;
			padding-bottom: $padding;
			.number{
				color: white;
				font-size: $title-size;
				font-weight: bold;
				line-height: 70rpx;
			}
			.title{
				color: rgba($color: white, $alpha: .4);
				font-size: $title-size-sm;
				line-height: 40rpx;
			}
			.header-item{
				width: 50%;
				padding: $padding / 2;
				padding-bottom: $padding;
				box-sizing: border-box;
				&:first-child{
					width: 100%;
					.number{
						font-size: $title-size;
					}
				}
			}
		}
		// 图表
		.chart{
			background: rgba($color: $block-color, $alpha: .8);
			padding: $padding/2;
			border-radius: $radius/2;
			.title{
				text-align: center;
				line-height: 80rpx;
				color: rgba($color: #FFFFFF, $alpha: .4);
				font-size: $title-size-sm;
			}
			.chart-f2{
				height: 200px;
			}
		}
	}
	// 数据统计
	.total {
		position: relative;
		margin: $margin;
		background: #2b2449;
		padding: 0;
		display: flex;
		border-radius: $radius;
		.item {
			width: 50%;
			padding: 0 $padding;
			text-align: center;
			color: white;
			font-size: $title-size-sm;
			line-height: 76rpx;
			image{
				width: 38rpx;
				height: 38rpx;
				vertical-align: top;
				margin-top: calc((76rpx - 38rpx) / 2);
				margin-right: $margin / 2;
			}
		}
	
		&::before {
			position: absolute;
			top: 0;
			bottom: 0;
			content: "";
			width: 2rpx;
			left: 50%;
			background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .7), transparent);
		}
	}
	// 求助icon
	.help-icon{
		margin-left: $margin/3;
		opacity: .7;
	}
	// 矿石
	.ore {
		position: relative;
		padding-top: 120%;
		&>image {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.ore-lists {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			z-index: 1;
			.oct-float-item{
				position: absolute;
				text-align: center;
				.text {
					color: white;
					font-size: $title-size-sm - 4;
					line-height: 40rpx;
					text-shadow: 0 3rpx 3rpx rgba($color: #000000, $alpha: .2);
				}
				.oct-icon{
					display: inline-block;
					width: 58rpx;
					height: 58rpx;
					line-height: 58rpx;
					background: radial-gradient(circle at 50% 50%, rgba(202, 102, 224, .0) 40%, #ca66e0);
					border-radius: 50%;
					box-shadow: 0 0 5rpx 5rpx rgba($color: #ca66e0, $alpha: .5);
					.icon {
						margin-top: 10rpx;
						height: 38rpx;
						width: 38rpx;
					}
				}
			}
			.ore-item-nav{
				@extend .oct-float-item;
				right: $margin;
				top: 12%;
			}
			.ore-item {
				@extend .oct-float-item;
			}
			.oct-login{
				@extend .oct-float-item;
				left: 42%;
				top: 45%;
			}
		}
	}
	// 任务
	.task-block {
		white-space: nowrap;
		margin-bottom: $margin;
		.item {
			background: $block-color;
			display: inline-block;
			margin-left: $margin;
			width: 260rpx;
			border-radius: $radius;
			text-align: center;
			padding: ($padding - 10) $padding/2;
			&:first-child {
				margin-left: $margin;
			}
			&:last-child {
				margin-right: $margin;
			}
			.icon {
				display: inline-block;
				margin: ($margin/2) 0;
				width: 98rpx;
				height: 98rpx;
				line-height: 98rpx;
				background: #1f183d;
				border-radius: 50%;
				text-align: center;
				image {
					width: 56rpx;
					height: 56rpx;
					vertical-align: middle;
				}
			}
			.text {
				font-size: $title-size-sm;
				color: rgba($color: white, $alpha: .4);
				line-height: 40rpx;
			}
			.title {
				font-size: $title-size-lg;
				color: white;
				font-weight: bold;
				line-height: 50rpx;
			}
			.submit-title{
				font-size: $title-size-sm - 4;
				color: rgba($color: white, $alpha: .4);
				line-height: 40rpx;
			}
		}
	}
</style>
