<template>
	<view class="sl_detail">
		<scroll-view 
			:scroll-top="scrollTop" 
			scroll-y="true" 
			class="" 
			@scrolltoupper="upper" 
			@scrolltolower="lower"
			@scroll="scroll" 
			style="height: 100%;padding-top: 20rpx;box-sizing: border-box;"
		>
			<view v-if="swiperList.length==0" style="text-align: center; width: 50%;margin: 20rpx auto;">
				<view>暫無數據</view>
			</view>
			<view class="each_content" v-for="(item,index) in swiperList" :key="item.id">
				<view class="each_content_left">
					<view class="header_money">
						<view class="text-green">
							<text class=" ">算力</text>
							<text class="">{{item.minerlimit}}</text>
						</view>
					</view>
					<view class="content_adress">
						<view class="text-gray"
							style=" width: 300rpx; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 20rpx;">
							收款地址:{{item.to_addr}}
						</view>
						<view class="margin-top-lg" style="margin-top: -10rpx;margin-left: 20rpx;">
							<image @click="fuzhi(item.to_addr)" src="/static/fizhi.png"
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
					</view>
					<view class="content_adress">
						<view class="text-gray"
							style=" width: 300rpx; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 20rpx;">
							付款地址:{{item.from_addr}}
						</view>
						<view class="margin-top-lg" style="margin-top: -10rpx;margin-left: 20rpx;">
							<image @click="fuzhi(item.from_addr)" src="/static/fizhi.png"
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
					</view>
					<view class="footer_shouy">{{item.title}}</view>
				</view>
				<view class="each_content_right">
					<view class="timeBtn">
						{{timeOptions(item.createtime*1000)}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { _minerlist } from "@/request/api.js"
	export default{
		data(){
			return{
				swiperList:[],
			}
		},
		onShow() {
			this.getMinerlist();
		},
		methods:{
			async getMinerlist(){
				let res = await _minerlist({page:1,listrow: 9999999});
				if(res.code === 1){
					this.swiperList = res.data
				}
			},
			timeOptions(timestamp){
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0'); 
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			},
			fuzhi(e){
				uni.setClipboardData({
					data: e,
					success: function () {
						uni.showToast({
							title:'複製成功'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.sl_detail{
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #000033, #51599b);
		padding: 20rpx;
		box-sizing: border-box;
		color: #fff;
		.each_content{
			height: 250rpx;
			background-color: #4c5188;
			border-radius: 20rpx;
			display: flex;
			padding: 20rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			color: #fff;
			.header_money{
				height: 45rpx;
				line-height: 45rpx;
				.text-green{
					color: #3eb93b;
					font-weight: 700;
				}
				.text-red{
					color: #e54d42;
					font-weight: 700;
				}
			}
			.footer_shouy{
				width: 60%;
				color: #0081ff;
				font-weight: 700;
				font-size: 30rpx;
				line-height: 50rpx;
			}
			.content_adress{
				display: flex;
			}
			.each_content_left{
				width: 60%;
				height: 100%;
			}
			.each_content_right{
				width: 40%;
				height: 100%;
				.timeBtn{
					background: linear-gradient(to right,#8f8f8f,#3e3e3e);
					font-size: 30rpx;
					border-radius: 40rpx;
					color: #fff;
					height: 75rpx;
					line-height: 30rpx;
					padding: 10rpx;
					text-align: center;
					box-sizing: border-box;
					margin-top: 40rpx;
				}
			}
		}
	}
</style>