<template>
	<view class="content">
		<view class="flex navbar">
			<view class="" v-for="(item, index) in navList" :class="{ action: current == index }" @click="changetab(index)">{{ $t('rg.' + item.name) }}</view>
		</view>
		<swiper class="swiper" :style="{ height: height }" :current="current" disable-touch>
			<swiper-item v-for="navitem in navList">
				<scroll-view scroll-y="true" class="scroll" :style="{ height: height }">
					<view v-for="(item, ind) in navitem.list" class="usdtList padding-t-30 padding-b-30">
						<view class="top flex">
							<view class="top-left">{{ $t('rg.xm') }}：{{ item.name }}</view>
							<view class="top-right">{{ item.status == 1 ? $t('rg.djz') : $t('rg.yjd') }}</view>
						</view>
						<view class="main-bottom flex">
							<view class="main-bottom-item first">
								<view class="main-bottom-item-font">{{ $t('rg.rgsl') }}({{ item.coinname.toLocaleUpperCase() }})</view>
								<view class="main-bottom-item-num">{{ item.num }}</view>
							</view>
							<view class="main-bottom-item">
								<view class="main-bottom-item-font">{{ $t('rg.zfje') }}({{ item.buycoin.toLocaleUpperCase() }})</view>
								<view class="main-bottom-item-num">{{ item.num }}</view>
							</view>
							<view class="main-bottom-item">
								<view class="main-bottom-item-font">{{ item.status == 1 ? $t('rg.jdrq') : $t('rg.sfrq') }}</view>
								<view class="main-bottom-item-num">{{ item.endday }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { issuelog } from '@/api/wallet.js';
export default {
	data() {
		return {
			height: '',
			current: 0,
			navList: [
				{
					status: 1,
					name: 'qbrg',
					page: 1,
					limit: 10,
					loadingType: 'more',
					loded: false,
					list: []
				},
				{
					status: 2,
					name: 'djz',
					page: 1,
					limit: 10,
					loadingType: 'more',
					loded: false,
					list: []
				},
				{
					status: 3,
					name: 'yjd',
					page: 1,
					limit: 10,
					loadingType: 'more',
					loded: false,
					list: []
				}
			]
		};
	},
	onLoad() {
		this.loadData();
		uni.setNavigationBarTitle({ title: this.$t('rg.wdrg') });
	},
	onShow() {},
	onReachBottom() {},
	onReady(res) {
		var obj = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.swiper').boundingClientRect();
				query.exec(function(res) {
					obj.height = resu.windowHeight - res[0].top + 'px';
				});
			},
			fail: res => {}
		});
	},
	methods: {
		changetab(index) {
			this.current = index;
			this.loadData('tab');
		},
		loadData(tab) {
			let obj = this;
			let index = obj.current;
			let item = obj.navList[index];
			if (tab == 'tab' && item.loaded) {
				return;
			}
			if (item.loadingType == 'loading') {
				return;
			}
			issuelog({
				type: item.status,
				page: item.page,
				limit: item.limit
			})
				.then(({ data }) => {
					item.list = item.list.concat(data);
					this.$set(item, 'loaded', true);
				})
				.catch(e => {
					console.log(e);
				});
		}
	}
};
</script>

<style lang="scss">
.swiper {
	background-color: #fff;
}

.scroll {
	padding: 0 20rpx;
}

.navbar {
	justify-content: flex-start;
	font-size: 40rpx;
	padding: 30rpx;

	view {
		padding-left: 40rpx;
		height: 100rpx;
		line-height: 100rpx;
	}
}

.usdtList {
	color: #707a8a;
	border-bottom: 1px solid $border-color-light;
	.top {
		padding-top: 20rpx;
		.top-left {
			font-size: 32rpx;
			font-weight: 500;
			color: #000;
		}
		.top-right {
			padding: 5rpx 10rpx;
			font-size: 28rpx;
			color: red;
		}
	}
	.main-bottom {
		padding: 28rpx 0;
		.main-bottom-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			.main-bottom-item-font {
				font-size: 28rpx;
				color: #707a8a;
			}
			.main-bottom-item-num {
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #707a8a;
			}
		}
	}
}

.action {
	font-weight: bold;
	font-size: 44rpx;
}
</style>