<template>
	<view class="container">
		<view class="top">
			<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="left: 20rpx;"></text>
			<view>
				{{yesExchangeFortune?yesExchangeFortune:0}}
			</view>
			<view>
				可兑换积分
			</view>
		</view>
		<view class="content_wrapper">
			<view class="item">
				<text>A.可兑换</text>
				<text>{{yesExchangeFortune?yesExchangeFortune:0}}积分</text>
			</view>
			<view class="item">
				<text>B.待兑换</text>
				<text>{{notExchangeFortune?notExchangeFortune:0}}积分</text>
			</view>
			<view class="item">
				<text>C.兑换中</text>
				<text>{{inExchangeFortune?inExchangeFortune:0}}积分</text>
			</view>
			<view class="item">
				<text>D.已兑换</text>
				<text>{{alreadyExchangeFortune?alreadyExchangeFortune:0}}积分</text>
			</view>
			<view class="item">
				<text>E.已退课</text>
				<text style="color: #0A2F99;" @click="viewDropLists()">{{returnFortune?returnFortune:0}}积分<i class="iconfont icon-youjiantou" style="margin-right: 10rpx;"></i></text>
			</view>
		</view>
		<view class="total">
			<view class="description">
				<text>总积分：</text>
				<text>(A+B+C+D+E)</text>
			</view>
			<view class="">
				{{totalFortune?totalFortune:0}}积分
			</view>
		</view>
		<view class="record" @click="toRecord()">
			兑换记录
		</view>
		<view class="btn" @click="toWithdrawal()">
			去提现
		</view>
	</view>
</template>

<script>
	import api from '../../api/api';
	export default{
		data(){
			return {
				yesExchangeFortune:'',
				notExchangeFortune:'',
				inExchangeFortune:'',
				alreadyExchangeFortune:'',
				returnFortune:'',
				totalFortune:'',

			}
		},
		components:{},
		onLoad(){
			this.queryByUserIdFortuneStatistic();
		},
		methods:{
			goBack(){
				uni.navigateBack({
					delta:1
				})
			},
			queryByUserIdFortuneStatistic(){
				api.queryByUserIdFortuneStatistic({userId:uni.getStorageSync('cffp_userId')}).then((res)=>{
					console.log(res, 55454)
					if(res['success']){
						this.yesExchangeFortune = res['data']['yesExchangeFortune'];
						this.notExchangeFortune = res['data']['notExchangeFortune'];
						this.inExchangeFortune = res['data']['inExchangeFortune'];
						this.alreadyExchangeFortune = res['data']['alreadyExchangeFortune'];
						this.returnFortune = res['data']['returnFortune'];
						this.totalFortune = res['data']['totalFortune'];

					}
				})
			},
			toWithdrawal(){
				uni.navigateTo({
					url:`/pages/withdrawal/withdrawal?exchangeAmount=${this.yesExchangeFortune}`
				})
			},
			toRecord(){
				uni.navigateTo({
					url:'/pages/exchangeRecord/exchangeRecord'
				})
			},
			viewDropLists(){
				uni.navigateTo({
					url:'/pages/dropLists/dropLists'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		.top{
			width: 100%;
			text-align: center;
			background: #fff;
			padding: 20rpx 0;
			view:nth-child(1){
				font-size: 40rpx;
				color: #F15A1F;
			}
			view:nth-child(2){
				font-size: 32rpx;
				color: #666666;
			}
		}
		.content_wrapper{
			background: #fff;
			margin: 20rpx auto;
			padding:0 30rpx;
			.item{
				display: flex;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #F2F2F2;
				justify-content: space-between;
				text:nth-child(2){
					font-size: 32rpx;
				}
			}
			.item:last-child{
				border-bottom: 0;
			}
			.item:nth-child(1) text:nth-child(2){
				color: #0A2F99;
			}
		}
		.total{
			background: #fff;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			color: #0A2F99;
			font-size: 36rpx;
			.description{
				width: 40%;
				text:nth-child(2){
					font-size: 32rpx;
					color: #666666;
				}
			}
		}
		.record{
			color: #0A2F99;
			font-size: 30rpx;
			padding-right: 30rpx;
			float: right;
		}
	}
</style>