<template>
	<view>
		<view class="deal-back"></view>
		<!-- 区块信息 -->
		<view class="block-shadow chian-hash">
			<view class="title">区块HASH</view>
			<view class="hash">{{info.hash || '-'}}</view>
			<view class="button" @click="copyHash">复制</view>
			<view class="chian-info">
				<view class="item-flex">
					<view class="label webkit-box">交易数据</view>
					<view class="ellipsis">
						{{ info.tx_count || '-' }}
					</view>
				</view>
				<view class="item-flex">
					<view class="label webkit-box">区块高度</view>
					<view class="ellipsis">
						{{ info.height || '-' }}
					</view>
				</view>
				<view class="item-flex">
					<view class="label webkit-box">时间</view>
					<view class="ellipsis">
						{{ info.block_time || '-' }}
					</view>
				</view>
				<view class="item-flex webkit-box">
					<view class="label">上一块</view>
					<view class="ellipsis">
						{{ info.parent_hash || '-' }}
					</view>
				</view>
				<view class="item-flex webkit-box">
					<view class="label">区块难度</view>
					<view class="ellipsis">
						{{ info.difficulty || '-' }}
					</view>
				</view>
				<view class="item-flex webkit-box">
					<view class="label">默克尔跟</view>
					<view class="ellipsis">
						{{ info.tx_hash || '-' }}
					</view>
				</view>
				<view class="item-flex">
					<view class="label">状态哈希</view>
					<view class="ellipsis">
						{{ info.state_hash || '-' }}
					</view>
				</view>
			</view>
		</view>
		<!-- 交易记录 -->
		<view class="deals">
			<view class="title">交易记录</view>
			<deal-list :list="deal" />
		</view>
	</view>
</template>

<script>
	import { hash } from '@/apis/interfaces/chain'
	import dealList from '@/components/chain/deal'
	export default {
		components:{
			dealList
		},
		data() {
			return {
				info: {},
				deal: [],
			}
		},
		onLoad(e){
			// 交易详情
			if(e.hash && e.hash != '') hash(e.hash).then(res=>{
				this.info = res.head
				this.deal = res.trades
			}).catch(err => {
				uni.showToast({
					icon: 'none',
					title: '错误 22 line in chain/deal'
				})
			})
			else uni.showToast({
				icon: 'none',
				title: 'hash值不存在，系统错误'
			})
		},
		methods:{
			copyHash(){
				if(this.info.hash) uni.setClipboardData({
					data: this.info.hash
				})
			}
		}
	}
</script>

<style lang="scss">
	.block-shadow{
		box-shadow: 0 0 2rpx 2rpx rgba($color: #000000, $alpha: .02);
	}
	// 背景
	.deal-back {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #009B69, #00562d);
	}
	// 区块详情
	.chian-hash{
		margin: $margin + ($margin/2);
		background-color: white;
		padding: ($padding * 3) ($padding * 2);
		border-radius: $radius;
		text-align: center;
		.title{
			font-size: $title-size + 8;
			font-weight: bold;
			color: $text-color;
		}
		.hash{
			padding: $padding 0 ($padding*2) 0;
			word-wrap: break-word;
			color: $text-gray;
		}
		.button{
			background-color: $red-color;
			width: 50%;
			display: inline-block;
			height: 90rpx;
			line-height: 90rpx;
			color: white;
			font-size: $title-size;
			border-radius: 45rpx;
			font-weight: bold;
		}
		.chian-info{
			margin-top: $margin * 2;
			background-color: $border-color-lg;
			padding: $padding;
			.item-flex{
				padding-left: 220rpx;
				text-align: right;
				position: relative;
				line-height: 70rpx;
				min-height: 70rpx;
				.label{
					position: absolute;
					left: 0;
					width: 200rpx;
					text-align: left;
					color: $text-gray;
				}
			}
		}
	}
	// 区块交易信息
	.deals{
		padding: $padding;
		.title{
			text-align: center;
			font-weight: bold;
			color: white;
			font-size: $title-size;
		}
	}
</style>
