<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ i18n.WithdrawalRecord }}</navigation>
		<!-- headBtn -->
		<!-- #ifdef H5 -->
		<view class="head" style="margin-top: 100rpx;">
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="head">
				<!-- #endif -->

				<view class="headItem" @click="getType('crypto')" :class="{ select: form.type === 'crypto' }">
					{{ i18n.DigitalCurrency }}
				</view>
				<view class="headItem" @click="getType('online')" :class="{ select:form.type=== 'online' }">
					{{ i18n.OnLine }}
				</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="baseURL+'/coins/'+item.coinCode+'.png'"
						:title="item.tranAmt+item.coinCode" :rightName="item.orderStatus=='processreview'?i18n.Underreview:item.orderStatus=='processsuccess'?i18n.Success:
					item.orderStatus=='processing'?i18n.Processing:item.orderStatus=='processfailed'?i18n.Failed:i18n.Failed"
						:fontColor="item.orderStatus=='processreview'?'#F2FE8D':item.orderStatus=='processsuccess'?'#00E8A2':
					item.orderStatus=='processfailed'?'#F4506A':item.orderStatus=='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.tranFee+''+item.coinCode"></key-value-row>
								<key-value-row :keyName="i18n.remarks" :value="item.remarks" :isRemarks="true" v-if="item.orderStatus=='processreject'"></key-value-row>
							<key-value-row :keyName="i18n.Time" :value="item.addTimeStr"></key-value-row>
						</view>
						<view style="border-top: 2rpx solid #323045;padding:0rpx 32rpx; margin-bottom: 20rpx;">
							<show-more class="digitalShowMore">
								<key-value-row :keyName="i18n.Address" :value="item.toAddress"></key-value-row>
								<key-value-row :keyName="i18n.Hash" :value="item.txid"></key-value-row>
								<!-- <view class="text">Postscript : ontact customer service on the top-left corner for identity
								verific
							</view> -->
							</show-more>
						</view>

					</view>


					<!-- contarct -->
					<!-- 	<card-header v-if="form.type === 'online'" iconName="../../static/withdrawal/money-send.png"
					:title="'904.29483230ACTA'" rightName="Succeed" fontColor="#00E8A2">
				</card-header> -->
					<card-header v-if="form.type === 'online'" iconName="../../static/withdrawal/money-send.png"
						:title="item.tranAmt+item.coinCode" :rightName="item.orderStatus=='processreview'?i18n.Underreview:item.orderStatus=='processsuccess'?i18n.Success:
						 item.orderStatus=='processing'?i18n.Processing:item.orderStatus=='processfailed'?i18n.Failed:i18n.Failed"
						:fontColor="item.orderStatus=='processreview'?'#F2FE8D':item.orderStatus=='processsuccess'?'#00E8A2':
					item.orderStatus=='processfailed'?'#F4506A':item.orderStatus=='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.tranFee+''+item.coinCode"></key-value-row>
							<key-value-row :keyName="i18n.remarks" :value="item.remarks" :isRemarks="true" v-if="item.orderStatus=='processreject'"></key-value-row>
							<key-value-row :keyName="i18n.Time" :value="item.addTimeStr"></key-value-row>
						</view>
						<show-more class="onLineShowMore" style="border-top: 2rpx solid #323045;margin-bottom: 20rpx;">
							<view style="padding:20rpx 32rpx;">
								<key-value-row :keyName="i18n.USDTRate" :value="item.usdtRate"></key-value-row>
								<key-value-row :keyName="i18n.USDT" :value="item.usdtAmount"></key-value-row>
							</view>
							<view style="border-top: 2rpx solid #323045;padding:20rpx 32rpx;">
								<key-value-row :keyName="i18n.CardNo" :value="item.acctId">
								</key-value-row>
								<key-value-row :keyName="i18n.Bank" :value="item.bankName"></key-value-row>
								<key-value-row :keyName="i18n.Payee" :value="item.acctName"></key-value-row>
								<!-- 	<view class="text">Postscript ：ontact customer service on the top-left corner for identity
								verific
							</view> -->
							</view>
						</show-more>

					</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>
	</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: "withdrawalRecord",
		data() {
			return {
				pageState: 'digitalCurrency',
				baseURL: '',
				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("withdrawal");
			},
		},
		onReachBottom() {
			if (!this.isLoadMore) {
				this.form.pageNumber += 1
				this.getList();
			}
		},
		onLoad() {
			this.baseURL = constant.BASE_URL
			this.getList()
		},
		onShow() {},
		methods: {
			// 获取类型
			getType(e) {
				this.userInfoObj = []
				this.form.type = e
				this.getList()
			},
			getList() {
				this.isLoadMore = true
				api.withdrawList(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()
				})
			},
			change(e) {
				console.log(e);
			}

		},
	}
</script>

<style lang="scss" scoped>
	/deep/ .digitalShowMore .KeyValueRow .value {
		position: static !important;
		word-break: break-all !important;
	}

	.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;

					.onLineShowMore {
						/deep/.showMoreTool {
							margin: 0 32rpx;
						}
					}


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

				}

			}
		}

	}
</style>
