<template>
	<view class="content">
		<!-- 水晶获得公告 -->
		<view class="notice" v-if="notice.length >= 1">
			<swiper class="notice-swiper" :vertical="true" autoplay circular>
				<swiper-item v-for="(item, index) in notice" :key="index">
					<view class="notice-item">
						<image class="notice-cover" :src="item.avatar" mode="aspectFill"></image>
						<view class="notice-title ellipsis">{{item.nickname}} {{item.title}} {{item.amount}}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 账户余额 -->
		<view class="info">
			<view class="info-number">
				<image class="number-background number-rotate" src="@/static/background/chain-back-01.png" />
				<view class="info-content webkit-box">
					<view class="text">{{isAuth ? '持有原石量': '恒量发行原石量'}}<uni-icons class="help-icon" @click="showHelp('occ')" type="help-filled" size="18" color="#fff" /></view>
					<view class="number">{{occ}}</view>
					<view class="login" @click="$Router.push({name: 'Login'})" v-if="!isAuth">立即登录</view>
					<view class="login" @click="openWallet" v-else>我的钱包</view>
				</view>
			</view>
		</view>
		<!-- 公告信息 -->
		<!-- <view class="increase">今日消费100元，预计原石单价增长0.1%</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="#009b69" /></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="#009b69" /></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="#009b69" /></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="#009b69" /></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="#009b69" /></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 {
		components: {
			lF2
		},
		data() {
			return {
				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 => {
					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 => {
					console.log(err)
				})
			},
			// 绘制图表
			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>
	/* 气泡漂浮 */
	.number-float{
		animation: 4s octfloat infinite;
	}
	@keyframes octfloat{
		0%{
			margin-top: 0;
		}
		50%{
			margin-top: 15rpx;
		}
		100%{
			margin-top: 0;
		}
	}
	/* 背景旋转 */
	.number-rotate{
		animation: 30s octrotate infinite linear;
	}
	@keyframes octrotate{
		from{
			transform:rotate(0deg);
		}
		to{
			transform:rotate(360deg);
		}
	}
</style>

<style lang="scss">
	// 背景
	.content{
		background: $mian-color-deep;
		min-height: 100vh;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		background-image: url(@/static/background/chain-back-00.png);
		background-size: 100%;
		background-position: top center;
		background-repeat: no-repeat;
	}
	// 求助icon
	.help-icon{
		vertical-align: middle;
		margin-bottom: 4px;
		margin-left: $margin/2;
		opacity: .7;
	}
	// 原石账户
	.info{
		margin-top: calc(#{$margin * 2} + 60rpx);
		padding: var(--status-bar-height) $padding * 2 $padding * 3;
		text-align: center;
		.info-number{
			position: relative;
			display: inline-block;
			width: 568rpx;
			height: 568rpx;
			.number-background{
				width: 100%;
				height: 100%;
			}
			.info-content{
				position: absolute;
				top: 12%;
				left: 12%;
				width: 76%;
				height: 76%;
				background-image: url(@/static/background/chain-back-02.png);
				background-size: cover;
				color: white;
				.text{
					font-size: $title-size-m;
					text-shadow: 2rpx 2rpx 0 rgba($color: $mian-color-deep, $alpha: .5);
				}
				.number{
					font-weight: bold;
					font-size: $title-size + 8;
					line-height: 70rpx;
					text-shadow: 2rpx 2rpx 0 rgba($color: $mian-color-deep, $alpha: .5);
				}
				.login{
					margin-top: $margin;
					background-color: $mian-color;
					display: inline-block;
					padding: ( $padding / 2 ) $padding;
					font-size: $title-size-m;
					border-radius: 30rpx;
					border:solid 1rpx $mian-color-deep;
				}
			}
		}
	}
	// 预计增长
	.increase{
		margin: 0 ($margin + $margin / 2) ($margin * 2);
		background: rgba($color: $mian-color, $alpha: .1);
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: $title-size-m;
		color: $mian-color;
		border-radius: $radius-sm;
		padding: 0 $padding;
	}
	// 公告信息
	.notice{
		position: fixed;
		top: $margin * 2;
		left: $margin + $margin / 2;
		right: $margin + $margin / 2;
		padding-top: var(--status-bar-height);
		z-index: 99;
		.notice-swiper{
			height: 60rpx;
		}
		.notice-item{
			position: relative;
			height: 60rpx;
			padding-left: 80rpx;
			padding-right: $padding * 2;
			display: inline-block;
			background: rgba($color: $mian-color-deep, $alpha: .3);
			border-radius: 30rpx;
			box-sizing: border-box;
			max-width: 100%;
			.notice-cover{
				position: absolute;
				height: 60rpx;
				width: 60rpx;
				left: 0;
				top: 0;
				background-color: $mian-color-deep;
				border-radius: 50%;
			}
			.notice-title{
				line-height: 60rpx;
				color: white;
				font-size: $title-size-m;
			}
		}
	}
	// 平台概况
	.situation{
		margin: 0 ($margin + $margin / 2);
		background-image: linear-gradient(to bottom, rgba($color: $mian-color, $alpha: .1), $mian-color-deep);
		border-radius: $radius-sm;
		padding: $padding;
		// 平台统计
		.header{
			display: flex;
			flex-wrap: wrap;
			margin-bottom: $margin*2;
			.number{
				color: white;
				font-size: $title-size + 4;
				font-weight: bold;
				line-height: 90rpx;
			}
			.title{
				color: $mian-color;
				font-weight: bold;
				font-size: $title-size-sm;
			}
			.header-item{
				width: 50%;
				padding: $padding $padding / 2;
				box-sizing: border-box;
				&:first-child{
					width: 100%;
					.number{
						font-size: $title-size + 10;
					}
				}
			}
		}
		// 节点信息
		.node-info{
			display: flex;
			flex-wrap: wrap;
			margin: 0 -$margin / 2;
			.node-item{
				background: rgba($color: $mian-color, $alpha: .2);
				width: calc(50% - #{$margin});
				margin: $margin / 2;
				padding: $padding;
				box-sizing: border-box;
				border-radius: $radius-sm;
			}
			.number{
				font-size: $title-size + 4;
				font-weight: bold;
				color: white;
			}
			.title{
				font-size: $title-size-m;
				font-weight: bold;
				color: rgba($color: white, $alpha: .7);
			}
		}
		// 图表
		.chart{
			background: rgba($color: $mian-color, $alpha: .2);
			padding: $padding;
			border-radius: $radius-sm;
			margin-top: $margin*2;
			.title{
				text-align: center;
				line-height: 80rpx;
				color: rgba($color: $mian-color, $alpha: 1.0);
				font-size: $title-size-m;
			}
			.chart-f2{
				height: 200px;
			}
		}
	}
</style>
