<template>
	<view class="content">
		<!-- 账户余额 -->
		<view class="total">
			<view class="item nowrap"><image src="@/static/icons/gemstone-icon.png"/>能量球 99</view>
			<view class="item nowrap"><image src="@/static/icons/crystal-icon.png"/>能量碎片 11</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>
			<view class="ore-lists">
				<view class="oct-float ore-item" v-for="(item, index) in crystalArr" :key="index" @click="ledCrystal(index)">
					<block v-if="item.amount !== null">
						<image src="/static/imgs/crystal-ore-icon.png" mode="widthFix" class="icon" />
						<view class="text">能量碎片{{ item.amount || '-'}}</view>
					</block>
				</view>
				<navigator url="../index/index" open-type="switchTab" hover-class="none" class="oct-float ore-item-nav">
					<image src="/static/imgs/gemstone-ore-icon.png" mode="widthFix" class="icon" />
					<view class="text">购物<uni-icons type="arrowright" color="#FFFFFF" size="14"></uni-icons></view>
				</navigator>
			</view>
		</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">{{ item.remark }}</view>
		     	<view class="icon">
		     		<image :src="item.cover" />
		     	</view>
		     	<view class="title">{{ item.title }}</view>
		     </view>
		</scroll-view>
		<!-- 平台概况 -->
		<view class="situation">
			<view class="header">
				<view class="header-item">
					<view class="title">平台原石余量<uni-icons class="help-icon" @click="showHelp('occBalance')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view>
					<view class="number ellipsis">{{ occBalance }}</view>
				</view>
				<view class="header-item">
					<view class="title">昨日瓜分水晶<uni-icons class="help-icon" @click="showHelp('yesterdayCrystal')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view>
					<view class="number ellipsis">{{ yesterdayCrystal }}</view>
				</view>
				<view class="header-item">
					<view class="title">区块链高度<uni-icons class="help-icon" @click="showHelp('blockHeight')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view>
					<view class="number ellipsis">{{ blockHeight }}</view>
				</view>
				<view class="header-item">
					<view class="title">平台累计盈利额<uni-icons class="help-icon" @click="showHelp('gain')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view>
					<view class="number ellipsis">{{ gain }}</view>
				</view>
				<view class="header-item">
					<view class="title">已开通节点数<uni-icons class="help-icon" @click="showHelp('nodeNumber')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view>
					<view class="number ellipsis">{{ nodeNumber }}</view>
				</view>
			</view>
			<!-- 节点信息 -->
			<view class="node-info">
				<view class="node-item">
					<view class="title">轻节点</view>
					<view class="number ellipsis">{{occs.light || '-'}}</view>
				</view>
				<view class="node-item">
					<view class="title">合作节点</view>
					<view class="number ellipsis">{{occs.cooperation || '-'}}</view>
				</view>
				<view class="node-item">
					<view class="title">主节点</view>
					<view class="number ellipsis">{{occs.main || '-'}}</view>
				</view>
				<view class="node-item">
					<view class="title">超级节点</view>
					<view class="number ellipsis">{{occs.super || '-'}}</view>
				</view>
				<view class="node-item">
					<view class="title">运营节点</view>
					<view class="number ellipsis">{{occs.operating || '-'}}</view>
				</view>
				<view class="node-item">
					<view class="title">技术节点</view>
					<view class="number ellipsis">{{occs.technology || '-'}}</view>
				</view>
			</view>
			<!-- 平台盈利额，原石数量 -->
			<view class="chart">
				<view class="title">平台累计营业额和原石价值走势图</view>
				<view class="chart-f2">
					<l-f2 ref="chartChange"></l-f2>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { occ } from '@/apis/interfaces/chain'
	import { certified, security } from '@/apis/interfaces/index'
	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 {
		data() {
			return {
				crystalArr  : [],
				categoryArr : [],
				occs: {},
				blockHeight: 0,
				occBalance: 0,
				occ: 0,
				yesterdayCrystal: 0,
				gain: 0,
				nodeNumber: 0,
				notice: [],
				isAuth: false,
				helpToast: {
					occ: '恒量发行原石量',
					occBalance: '平台原石量',
					yesterdayCrystal: '昨日瓜分水晶',
					blockHeight: '区块链高度',
					gain: '平台累计盈利额',
					nodeNumber: '已开通节点数'
				}
			};
		},
		onShow() {
			if(this.$store.state.token != '') this.isAuth = true
			this.getOcc()
		},
		methods:{
			// 求助信息
			showHelp(type) {
				uni.showModal({
					title: '提示',
					content: this.helpToast[type],
					showCancel: false
				})
			},
			// 原石钱包
			openWallet(){
				Promise.all([certified(), security()]).then(res=> {
					let certified = res[0],
						security  = res[1]
					if(!certified){
						uni.showModal({
							title: '提示',
							content: '您还为完成个人认证，无法激活您的钱包',
							confirmText: '去认证',
							confirmColor: '#009B69',
							cancelColor: '#666666',
							cancelText: '稍后再说',
							success: res=> {
								if(res.confirm) {
									uni.navigateTo({
										url: '/pages/certification/personal'
									})
								}
							}
						})
						return
					}
					if(!security) {
						uni.showModal({
							title: '激活提示',
							content: '您的钱包未激活，是否立即导出助记词并激活您的钱包?',
							confirmText: '去激活',
							confirmColor: '#009B69',
							cancelColor: '#666666',
							cancelText: '稍后再说',
							success: res=> {
								if(res.confirm) {
									uni.navigateTo({
										url: '/pages/wallet/add'
									})
								}
							}
						})
						return
					}
					uni.navigateTo({
						url: '/pages/wallet/property'
					})
				})
			},
			// occ信息
			getOcc(){
				occ().then(res => {
					console.log(res)
					this.occs = res.occs
					this.yesterdayCrystal = res.yesterday_crystal
					this.occ = res.occ
					this.occBalance = res.occ_balance
					this.blockHeight = res.block_height
					this.gain = res.gain
					this.nodeNumber = res.node_number
					this.notice = res.notice
					if(res.help_toast) this.helpToast = res.help_toast
					this.showCartc(res.movements)
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 绘制图表
			showCartc(data){
				// 图表信息
				this.$refs.chartChange.init(config => {
					config.appendPadding = [10, 15, 10, 15]
					
					const chart = new F2.Chart(config);
					chart.source(data, {
						date: {
							range: [0, 1],
							type: 'timeCat',
							mask: 'MM-DD'
						},
						value: {
							tickCount: 5
						}
					});
					chart.axis('time', {
						line: null,
						label: function label(text, index, total) {
							const textCfg = {};
							if (index === 0) {
								textCfg.textAlign = 'left';
							} else if (index === total - 1) {
								textCfg.textAlign = 'right';
							}
							return textCfg;
						}
					});
					chart.axis('tem', {
						grid: function grid(text) {
							if (text === '0%') {
								return {
									lineDash: null,
									lineWidth: 1
								};
							}
						}
					});
					chart.tooltip({
						showCrosshairs: true
					});
					chart.legend({
						position: 'bottom',
						offsetY: 0,
						offsetX: 30
					});
					chart.area()
						.position('date*value')
						.color('name', [ '#009b69', '#9f8052' ])
						.shape('smooth')
					chart.line()
						.position('date*value')
						.color('name', [ '#009b69', '#9f8052' ])
						.shape('smooth', name=> {
							if (name === '预期收益率') {
								return 'line';
							}
							if (name === '实际收益率') {
								return 'dash';
							}
						});
						chart.render();
					return chart;
				})
			}
		}
	}
</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%;
		-webkit-animation: move-map 30s infinite linear;
		-moz-animation: move-map 30s infinite linear;
		-o-animation: move-map 30s infinite linear;
		-ms-animation: move-map 30s infinite linear;
		animation: move-map 30s 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: -1250rpx 0; }
		100% {background-position: 0 0;}
	}
	@-ms-keyframes move-map {
		0% {background-position: -1250rpx 0; }
		100% {background-position: 0 0;}
	}
	
	@keyframes move-map {
		0% {background-position: -1250rpx 0; }
		100% {background-position: 0 0;}
	}
	
	/* 水晶漂浮动画 */
	.oct-float {
		animation: 4s octfloat infinite;
	}
	@keyframes octfloat {
		0% {
			margin-top: 0;
		}
	
		50% {
			margin-top: 15rpx;
		}
	
		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;
			margin-bottom: $margin*2;
			.number{
				color: white;
				font-size: $title-size;
				padding-top: $padding/2;
				font-weight: bold;
			}
			.title{
				color: rgba($color: white, $alpha: .4);
				font-size: $title-size-sm;
			}
			.header-item{
				width: 50%;
				padding: $padding / 2;
				box-sizing: border-box;
				&:first-child{
					width: 100%;
					.number{
						font-size: $title-size;
					}
				}
			}
		}
		// 节点信息
		.node-info{
			display: flex;
			flex-wrap: wrap;
			margin: 0 -$margin / 2;
			.node-item{
				background: rgba($color: $block-color, $alpha: .8);
				width: calc(50% - #{$margin});
				margin: $margin / 2;
				padding: $padding;
				box-sizing: border-box;
				border-radius: $radius/2;
			}
			.number{
				font-size: $title-size + 4;
				font-weight: bold;
				color: white;
			}
			.title{
				font-size: $title-size-sm;
				color: white;
			}
		}
		// 图表
		.chart{
			background: rgba($color: $block-color, $alpha: .8);
			padding: $padding;
			border-radius: $radius/2;
			margin-top: $margin;
			.title{
				text-align: center;
				line-height: 80rpx;
				color: white;
				font-size: $title-size-m;
			}
			.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{
		vertical-align: middle;
		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%;
			.oct-float-item{
				position: absolute;
				text-align: center;
				.text {
					margin-top: $margin / 2;
					color: white;
					font-size: $title-size-sm;
					line-height: 40rpx;
					text-shadow: 0 3rpx 3rpx rgba($color: #000000, $alpha: .2);
				}
				.icon {
					width: 58rpx;
					vertical-align: top;
				}
			}
			.ore-item-nav{
				@extend .oct-float-item;
				right: $margin * 3;
				top: 12%;
			}
			.ore-item {
				@extend .oct-float-item;
				&:nth-child(1) { top: 16%; left: 13%; }
				&:nth-child(2) { top: 50%; right: 10%; }
				&:nth-child(3) { top: 23%; right: 20%; }
				&:nth-child(4) { top: 70%; left: 33%;}
				&:nth-child(5) { top: 40%; left: 20%; }
				&:nth-child(6) { top: 58%; left: 10%;}
				&:nth-child(7) { top: 10%; right: 43%;}
				&:nth-child(8) { top: 46%; right: 29%;}
			}
		}
	}
	// 任务
	.task-block {
		white-space: nowrap;
		.item {
			background: rgba($color: $mian-color, $alpha: .2);
			display: inline-block;
			margin-left: $margin;
			width: 210rpx;
			padding: $padding * 2 $padding;
			border-radius: $radius;
			box-sizing: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .06);
			text-align: center;
			&:first-child {
				margin-left: $margin + $margin/2;
			}
			&:last-child {
				margin-right: $margin + $margin/2;
			}
			.icon {
				display: inline-block;
				margin: $margin 0;
				width: 98rpx;
				height: 98rpx;
				line-height: 98rpx;
				background: $mian-color-deep;
				border-radius: 50%;
				text-align: center;
				image {
					width: 56rpx;
					height: 56rpx;
					vertical-align: middle;
				}
			}
			.text {
				font-size: $title-size-m;
				color: $mian-color;
			}
			.title {
				font-size: $title-size;
				color: white;
				font-weight: bold;
			}
		}
	}
</style>
