<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ i18n.RechargeRecord }}</navigation>
		<!-- headBtn -->
		<view class="head">
			<view class="headItem" @click="form.type = 'crypto',getList()"
				:class="{ select: form.type === 'crypto' }">
				{{ i18n.CoinRecharge }}
			</view>
			<view class="headItem" @click="form.type = 'online',getList()"
				:class="{ select:form.type === 'online' }">
				{{ i18n.CashRecharge }}
			</view>
		</view>

		<view class="cardList">
			<view class="card" v-for="(item, index) in userInfoObj" :key="index">
				<!-- 卡片条件渲染 -->
				<!-- balance -->
			<!-- 	<card-header v-if="form.type === 'crypto'" iconName="../../static/recharge/money-recive.png"
					:title="'904.29483230ACTA'" rightName="Succeed" fontColor="#00E8A2">
				</card-header> -->
				<card-header v-if="form.type === 'crypto'" :iconName="baseURL+'/coins/'+item.coinCode+'.png'"
					:title="item.tranAmt+item.coinCode" 
					:rightName="item.orderStatus=='pay_unpaid'?'Unpaid':item.orderStatus=='pay_success'?'Success':
					item.orderStatus=='pay_failure'?'Failed':item.orderStatus=='pay_processing'?'Paying':'Closed'"			 
					 :fontColor="item.orderStatus=='pay_unpaid'?'#F2FE8D':item.orderStatus=='pay_success'?'#00E8A2':
					item.orderStatus=='pay_failure'?'#F4506A':item.orderStatus=='pay_processing'?'#00D1FF':'#A1A0A8'">
				</card-header>
				<view class="dataBody" v-if="form.type === 'crypto'">
					<view style="padding:20rpx 32rpx;">
						<key-value-row :keyName="i18n.OrderID" :value="item.orderNo"></key-value-row>
						<key-value-row :keyName="i18n.Fees" :value="(item.tranAmt-(parseInt(item.realAmount,16)))+item.coinCode"></key-value-row>
						<key-value-row :keyName="i18n.Time" :value="item.timestr"></key-value-row>
					</view>
					<view style="border-top: 2rpx solid #323045;padding:0rpx 32rpx; margin-bottom: 20rpx;">
						<show-more>
							<key-value-row :keyName="i18n.Address" :value="item.toAddress"></key-value-row>
							<key-value-row :keyName="i18n.Hash" :value="item.txid"></key-value-row>
						</show-more>
					</view>
				</view>


				<!-- contarct -->
				<card-header v-if="form.type === 'online'" iconName="../../static/recharge/money-recive.png"
					:title="item.tranAmt+item.coinCode" 
					:rightName="item.orderStatus=='pay_unpaid'?'Unpaid':item.orderStatus=='pay_success'?'Success':
					item.orderStatus=='pay_failure'?'Failed':item.orderStatus=='pay_processing'?'Paying':'Closed'"			 
					 :fontColor="item.orderStatus=='pay_unpaid'?'#F2FE8D':item.orderStatus=='pay_success'?'#00E8A2':
					item.orderStatus=='pay_failure'?'#F4506A':item.orderStatus=='pay_processing'?'#00D1FF':'#A1A0A8'">
				</card-header>
				<view class="dataBody" v-if="form.type === 'online'">
					<view style="padding:20rpx 32rpx;">
						<key-value-row :keyName="i18n.OrderID" :value="item.orderNo"></key-value-row>
						<key-value-row :keyName="i18n.Fees" :value="(item.tranAmt-(parseInt(item.realAmount,16)))+item.coinCode"></key-value-row>
						<key-value-row :keyName="i18n.Time" :value="item.timestr"></key-value-row>
					</view>
					<view style="border-top: 2rpx solid #323045;padding:0rpx 32rpx; margin-bottom: 20rpx;">
						<show-more>
							<key-value-row :keyName="i18n.USDTRate" :value="item.usdtRate"></key-value-row>
							<key-value-row :keyName="i18n.USDT" :value="item.usdtAmount"></key-value-row>
						</show-more>
					</view>

				</view>



			</view>
		</view>
		<u-empty :text="i18n.Dataisempty" mode="data" v-if="userInfoObj.length==0"></u-empty>
		<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" v-if="userInfoObj.length" height="80" />
	</view>
</template>

<script>
	import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
	import CardHeader from '../../components/cardHeader/cardHeader.vue';
	import ShowMore from '../../components/showMore/showMore.vue';
	import constant from '@/utils/constant.js';
	import api from '@/utils/api'
	export default {
		components: {
			KeyValueRow,
			CardHeader,
			ShowMore
		},
		name: "rechargeRecord",
		data() {
			return {
				baseURL:'',
				pageState: 'coinRecharge',
				isLoadMore: false, //是否加载中
				loadStatus: 'loadmore',
				loadingText: this.$t("login").toload,
				loadmoreText: this.$t("login").pullup,
				nomoreText: this.$t("login").Nomore,
				form: {
					pageNumber: 1,
					pageSize: 20,
					type:'crypto',
				},
				userInfoObj: [],
			};
		},
		computed: {
			i18n() {
				return this.$t("recharge");
			},
		},
		onReachBottom() {
			if (!this.isLoadMore) {
				this.form.pageNumber += 1
				this.getList();
			}
		},
		onLoad() {
			this.baseURL = constant.BASE_URL
			this.getList()
		},
		onShow() {},
		methods: {
			change(e) {
				console.log(e);
			},
			getList() {
				this.isLoadMore = true
				api.rechargeList(this.form).then(res => {
					if (res.content.length) {
						if (this.form.pageNumber > 1) {
							this.userInfoObj = this.userInfoObj.concat(res.content)
							for (var i = 0; i < this.userInfoObj.length; i++) {
								if (this.userInfoObj[i].addTime) {
									this.userInfoObj[i].timestr = this.$index.formatyymmddhhmmss(this.userInfoObj[
										i].addTime)
								}
							}
						} else {
							this.userInfoObj = res.content
							for (var i = 0; i < this.userInfoObj.length; i++) {
								if (this.userInfoObj[i].addTime) {
									this.userInfoObj[i].timestr = this.$index.formatyymmddhhmmss(this.userInfoObj[
										i].addTime)
								}
							}
						}
						if (this.userInfoObj.length >= Number(res.totalElements)) { // 判断接口返回数据量小于请求数据量，则表示此为最后一页
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						} else {
							this.isLoadMore = false
						}
					} else {
						this.isLoadMore = true
						this.loadStatus = 'nomore'
						this.userInfoObj = []
					}
					this.$forceUpdate()
				})
			},

		},
	}
</script>

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

		.head {
			margin-top: 200rpx;
			margin-left: 60rpx;
			width: 632rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 48rpx 0;

			.headItem {
				width: 300rpx;
				height: 68rpx;
				line-height: 68rpx;
				background: #211F32;
				border-radius: 16rpx;
				text-align: center;
				font-size: 32rpx;
				color: #A1A0A8;

				&.select {
					background: #00E8A2;
					color: #15141F;
				}

			}
		}

		.cardList {
			padding-bottom: 40rpx;

			.card {
				overflow: hidden;
				background: #211F32;
				border-radius: 32rpx;
				margin: 0 32rpx 32rpx;



				.dataBody {
					box-sizing: border-box;

					.text {
						margin-top: 20rpx;
						padding: 10rpx 16rpx;
						background: #323045;
						border-radius: 8rpx;
						font-size: 24rpx;
						color: #A1A0A8;
					}

				}

			}
		}

	}
</style>
