<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ i18n.MinePool }}</navigation>
			<!-- #ifdef H5 -->
			<view class="poolContent" style="margin-top: 110rpx;">
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="poolContent">
					<!-- #endif -->
			
			<!-- pool选择框 -->
			<view class="pool-item" v-for="(item, index) in mineCon.mineList" :key="index">
				<u-icon class="icon" :name="mineCon.imgAddress+item.imgMobile" size="92rpx" width="92rpx"></u-icon>
				<view class="right">
					<view class="title">{{item.name}}</view>
					<view class="description">
						Every time lock {{item.baseAmount}}{{item.baseCoin}}, Lock {{item.day}} days Mine poolLock,to produce {{item.profitAmount}}
						{{item.profitCoin}} per 1 day
					</view>
				</view>
				<u-button class="button" @click="gotoDetails(item,index)" color="#00E8A2" throttleTime="500" :disabled="item.status!='open'">
					{{ i18n.OpenMine }}</u-button>
			</view>
			
	       <u-empty :text="i18n.Dataisempty" mode="data" v-if="mineCon.mineList.length==0"></u-empty>
			<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" v-if="mineCon.mineList.length" height="80" />

		</view>


	</view>
</template>

<script>
	import api from '@/utils/api'
	import constant from '@/utils/constant.js';
	export default {
		name: "mine",
		data() {
			return {
				mineCon:[],
				pageState: 'coinRecharge',
				coin: '',
				USDTPopupShow: false,
				USDTRadioValue: '',
				selectNumberValue: 100,
				selectMethod: '1',
				isLoadMore: false, //是否加载中
				loadStatus: 'loadmore',
				loadingText: this.$t("login").toload,
				loadmoreText: this.$t("login").pullup,
				nomoreText: this.$t("login").Nomore,
			};
		},
		computed: {
			i18n() {
				return this.$t("mine");
			},
		},
		onLoad() {
			this.mineCon.mineList=[]
			this.getMine()
		},
		onShow() {},
		methods: {
			//获取挖矿产品列表
			getMine() { 
				this.isLoadMore = true
				api.mineList().then(res => {
				   this.mineCon=res
				   this.loadStatus = 'nomore'
				})
			},
			gotoDetails(item,index) {
				uni.navigateTo({
					url: `/pages/mine/mineDetails?id=${item.id}&imgAddress=${this.mineCon.imgAddress}`
				});
			},

		},
	}
</script>

<style lang="scss" scoped>
	.main {

		.poolContent {
			overflow: hidden;
			margin-top: 200rpx;
			padding: 0 60rpx;


			.pool-item {
				position: relative;
				background: #211F32;
				margin-top: 32rpx;
				padding: 32rpx 24rpx;
				background-image: url(../../static/mine/Line.png);
				background-repeat: no-repeat;
				background-size: 630rpx 2rpx;

				.icon {
					display: inline-block;
					width: 92rpx;
					margin-top: 10rpx;
					margin-right: 28rpx;
					border-radius: 16rpx;
					vertical-align: top;
				}

				.right {
					display: inline-block;
					width: 460rpx;

					.title {
						font-weight: 600;
						width: 460rpx;
						height: 52rpx;
						line-height: 52rpx;
						font-size: 32rpx;
					}

					.description {
						width: 460rpx;
						font-size: 24rpx;
						color: #A1A0A8;
					}
				}



				.button {
					height: 64rpx;
					line-height: 64rpx;
					font-size: 28rpx;
					color: #15141F !important;
					margin-top: 48rpx;
					border-radius: 16rpx;
					text-align: center;
					font-weight: 600;
				}

				&:last-child {
					margin-bottom: 80rpx;
				}
			}

		}


	}
</style>
