<template>
	<view class="main">
		<!-- nav -->
			
			<!-- #ifdef APP-PLUS -->
			<view class="nav-head">
				<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="nav-head-H5">
				<!-- #endif -->
			<view class="navItem" @click="pageState = 'product',getInfo('product')"
				:class="{ select: pageState === 'product' }">
				{{ i18n.Product }}
			</view>
			<view class="navItem" @click="pageState = 'pending',getInfo('pending')"
				:class="{ select: pageState === 'pending' }">
				{{ i18n.Pending }}
			</view>
			<view class="navItem" @click="pageState = 'complete',getInfo('complete')"
				:class="{ select: pageState === 'complete' }">
				{{ i18n.Complete }}
			</view>
		</view>
			
			<!-- #ifdef APP-PLUS -->
			<view class="cardList">
				<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="cardListH5">
				<!-- #endif -->
			
			<view class="card" v-for="(item, index) in info" :key="index" @click="gotoDetails(item,index)"
				v-if="pageState === 'product'">
				<!-- 卡片条件渲染 -->
				<!-- product -->
				<card-header v-if="pageState === 'product'" :iconName="baseURL+'/coins/'+item.coinCode+'.png'"
					:title="item.coinCode"
					:rightName="item.status=='open'?'Subscribe':item.status=='close'?'Ended':'Coming soon'"
					:hasBtn="true" :btnColor="item.status=='open'?'#00E8A2':item.status=='close'?'#A1A0A8':'#F2FE8D'">
				</card-header>
				<view class="dataBody" v-if="pageState === 'product'">
					<key-value-row :keyName="i18n.STLTotalCirculation" :value="item.issueAmount"></key-value-row>
					<key-value-row :keyName="i18n.PrivateSalePrice" :value="item.initalPrice+'USDT'">
					</key-value-row>
					<key-value-row size="24rpx" :keyName="i18n.ICOTime" :value="item.timestr+'-'+item.timestrIntital"></key-value-row>
				</view>
			</view>
			<view class="card" v-for="(item, index) in userInfoObj" :key="index" v-if="pageState === 'pending'">
				<!-- pending -->
				<card-header v-if="pageState === 'pending'" :iconName="baseURL+'/coins/'+item.coinSymbol+'.png'"
					:title="item.orderNo" 
					:rightName="item.status=='undone'?'Reviewing':item.status=='cancel'?'Rejected':'Completed'"
					:fontColor="item.status=='undone'?'#A1A0A8':item.status=='cancel'?'#F4506A':'#00E8A2'">
				</card-header>
				<view class="dataBody" v-if="pageState === 'pending'">
					<key-value-row :keyName="i18n.Price" :value="item.pendingPrice+'USDT'"></key-value-row>
					<key-value-row :keyName="i18n.Quantity" :value="item.pendingAmount+item.coinSymbol"></key-value-row>
					<key-value-row :keyName="i18n.USDT" :value="item.baseAmount+item.baseSymbol"></key-value-row>
					<key-value-row :keyName="i18n.Time" :value="item.timestr"></key-value-row>
				</view>
			</view>
			
         <view class="card" v-for="(item, index) in userInfoObj" :key="index" v-if="pageState === 'complete'">
			<!-- complete -->
			<card-header v-if="pageState === 'complete'" :iconName="baseURL+'/coins/'+item.coinSymbol+'.png'"
				:title="item.orderNo" 
				:rightName="item.status=='undone'?'Reviewing':item.status=='cancel'?'Rejected':'Completed'"
				:fontColor="item.status=='undone'?'#A1A0A8':item.status=='cancel'?'#F4506A':'#00E8A2'">
			</card-header>
			<view class="dataBody" v-if="pageState === 'complete'">
			<key-value-row :keyName="i18n.Price" :value="item.pendingPrice+'USDT'"></key-value-row>
			<key-value-row :keyName="i18n.Quantity" :value="item.pendingAmount+item.coinSymbol"></key-value-row>
				<key-value-row :keyName="i18n.ConfirmAmount" :value="item.tradeAmount+item.coinSymbol" :leftColor="'#F2FE8D'"
					:rightColor="'#F2FE8D'"></key-value-row>
			<key-value-row :keyName="i18n.USDT" :value="item.baseAmount+item.baseSymbol"></key-value-row>
				<key-value-row :keyName="i18n.CheckTheNumberoOfUSDT" :value="item.realAmount+item.baseAmount" :leftColor="'#F2FE8D'"
					:rightColor="'#F2FE8D'">
				</key-value-row>
				<key-value-row :keyName="i18n.Time" :value="item.timestr"></key-value-row>

			</view>
			</view>
		</view>
		<u-empty :text="i18n.Dataisempty" mode="data" v-if="info.length==0&&pageState=='product'"></u-empty>
		<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" v-if="info.length&&pageState=='product'" height="80" />
			
		<!-- 申购记录的为空提示 -->
			<u-empty :text="i18n.Dataisempty" mode="data" v-if="userInfoObj.length==0" v-show="pageState=='pending'||pageState=='complete'"></u-empty>
			<u-loadmore :status="loadStatus2" :loading-text="loadingText2" :loadmore-text="loadmoreText2"
				:nomore-text="nomoreText2" v-if="userInfoObj.length" height="80" />
			
		<!-- tabBar -->
		<tab-bar :selectActive="4"></tab-bar>
	</view>
</template>

<script>
	import CardHeader from '../../components/cardHeader/cardHeader.vue';
	import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
	import api from '@/utils/api'
	import constant from '@/utils/constant.js';
	export default {
		components: {
			KeyValueRow,
			CardHeader
		},
		name: 'subscription',
		data() {
			return {
				baseURL: '',
				userInfoObj: [],
				isLoadMore: false, //是否加载中
				loadStatus: 'loadmore',
				loadingText: this.$t("login").toload,
				loadmoreText: this.$t("login").pullup,
				nomoreText: this.$t("login").Nomore,
				info: [],
				pageState: 'product', // 当前页签状态
				form: {
					pageNumber: 1,
					pageSize: 20,
					status: '',
				},
				// 用户申购记录的
				isLoadMore2: false, //是否加载中
				loadStatus2: 'loadmore',
				loadingText2: this.$t("login").toload,
				loadmoreText2: this.$t("login").pullup,
				nomoreText2: this.$t("login").Nomore,
			}
		},
		onLoad() {},
		onShow() {
			this.baseURL = constant.BASE_URL
			this.getGoods();
		},
		onHide() {},
		computed: {
			i18n() {
				return this.$t('subscription')
			}
		},
		methods: {
			//看是获取用户申购记录还是申购列表  product 是获取申购列表  其它两个是获取记录
			getInfo(e) {
				this.info=[];
				this.userInfoObj=[]
				if (e == 'product') {
					this.getGoods()
				}
				if (e == 'pending') {
					this.form.status = 'undone'
					this.getList()
				}
				if (e == 'complete') {
					this.form.status = 'complete'
					this.getList()
				}
			},
			//用户申购记录
			getList() {
				this.isLoadMore2 = true
				api.subscriptionRecord(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.isLoadMore2 = true
							this.loadStatus2 = 'nomore'
						} else {
							this.isLoadMore2 = false
						}
					} else {
						this.isLoadMore2 = true
						this.loadStatus2 = 'nomore'
						// this.userInfoObj = []
					}
					this.$forceUpdate()
				})
			},

			//申购币列表
			getGoods() {
				api.subscriptionList().then(res => {
					this.info = res;
					this.isLoadMore = true
					this.loadStatus = 'nomore'
					for (var i = 0; i < this.info.length; i++) {
					if (this.info[i].startDate) {
						this.info[i].timestr = this.$index.formatyymmddhhmmss(this.info[
							i].startDate)
					}
					if (this.info[i].initalDate) {
						this.info[i].timestrIntital = this.$index.formatyymmddhhmmss(this.info[
							i].initalDate)
					}
					}
				})
			},
			gotoDetails(i, index) {
				// if (this.pageState !== 'product') return
				// if (i.status == 'close') {
				// 	uni.$u.toast(this.$t("subscription").Subcompleted)
				// 	return;
				// }
				// if (i.status == 'unstart') {
				// 	uni.$u.toast(this.$t("subscription").Substarted)
				// 	return;
				// }
				uni.navigateTo({
					url: `/pages/subscription/details?id=${i.coinCode}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .cardHeader .button {
		width: 160rpx;
	}

	.main {
		padding-bottom: 198rpx; // 避免底部TabBar盖住内容

		.nav-head {
			overflow: hidden;
			position: fixed;
			top: 0rpx;
			height: 80rpx;
			font-size: 24rpx;
			color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			z-index: 8;
			background-color: #15141F;
			padding: 94rpx 48rpx 0;


			.navItem {
				width: 218rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #0b7e60;
				font-size: 28rpx;
				border-bottom: 10rpx solid #0b7e60;
			}

			.select {
				color: #00E8A2;
				border-bottom: 10rpx solid #00E8A2;
			}

		}

	.nav-head-H5{
			overflow: hidden;
			position: fixed;
			top: 0rpx;
			height: 80rpx;
			font-size: 24rpx;
			color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			z-index: 8;
			background-color: #15141F;
			padding: 34rpx 48rpx 0;


			.navItem {
				width: 218rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #0b7e60;
				font-size: 28rpx;
				border-bottom: 10rpx solid #0b7e60;
			}

			.select {
				color: #00E8A2;
				border-bottom: 10rpx solid #00E8A2;
			}

		}


		.cardList {
			margin-top: 212rpx;

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



				.dataBody {
					box-sizing: border-box;
					padding: 32rpx;
				}
			}
		}



		.cardListH5{
			margin-top: 142rpx;

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



				.dataBody {
					box-sizing: border-box;
					padding: 32rpx;
				}
			}
		}



	}
</style>
