<template>
	<v-page>
		<v-header class="nav-head" :left-arrow="false" :title="$t('common.d1')">
		  <template #right>
			<v-link to="/pages/financialManagement/finances-history">
			  <van-icon class="fn-20 m-t-xs" name="todo-list-o" />
			</v-link>
		  </template>
		</v-header>
		<main class="" style="padding: 40rpx;">
			<scroll-view scroll-y="true" refresher-enabled="true" @refresherrefresh="refresherscroll" :refresher-triggered="refreshing">
				<view>
					<view class="d-flex">
						<view>{{$t('common.d23')}}</view>
						<view style="margin-left: 10rpx;">
							<!-- <img src="@/assets/img/home/user.png" width="20" /> -->
							<view class="fn-18 m-l-md d-flex" @click="setHide(!hideMoney1)">
								<van-icon v-if="!hideMoney1" name="eye-o" />
								<van-icon v-else name="closed-eye" />
							</view>
						</view>
					</view>
					<view class="d-block color-light" style="margin-top: 5px;">
						<span class="fn-20 m-r-xs">{{ filterMoney(activeCoin.usable_balance) }}</span>
						<span> USDT</span>
					</view>
					<view class="bg-form-panel-3 activeCoinAmount">
						<view>
							<view style="text-align: center;">{{$t('common.d24')}}</view>
							<view style="width: 130rpx;word-break: break-word;text-align: center;">$ {{activeCoin.yesterdayAmount}}</view>
						</view>
						<view>
							<view style="text-align: center;">{{$t('common.d25')}}</view>
							<view style="width: 130rpx;word-break: break-word;text-align: center;">$ {{activeCoin.businessAmount}}</view>
						</view>
						<view>
							<view style="text-align: center;">{{$t('common.d26')}}</view>
							<view style="width: 130rpx;word-break: break-word;text-align: center;">$ {{activeCoin.totalAmount}}</view>
						</view>
					</view>
					<view style="margin: 40rpx 0px;" class="d-flex">
						<view class="d-flex" style="width: 180rpx;padding-top: 38rpx;margin-right: 20rpx;">
							<view><image src="@/assets/img/vipIco.png" mode="widthFix" style="width: 50rpx;"></image></view>
							<view style="margin-top: 5rpx;font-weight: bold;color: #fbd96f;margin-left: 10rpx;">VIP {{vip.level}}</view>
						</view>
						<view style="width: 100%;">
							<view class="m-b-ms">{{vip.level==5?$t('common.grade'):$t('common.distance')}} VIP{{nextVip.level}}</view>
							<el-progress :show-text="false" :percentage="financial.schedule"></el-progress>
							<view class="d-flex justify-between m-t-ms">
								<view>{{financial.performance}}</view>
								<view>{{nextVip.performance}}</view>
							</view>
						</view>
					</view>
					<view class="d-flex justify-around" style="margin: 60rpx 0px;">
						<view style="color: #4097f4;border-bottom: 2px solid #4097f4;padding-bottom: 10rpx;">{{$t('common.d12')}}</view>
						<view @click="onredemption">{{$t('common.d14')}}</view>
					</view>
					<view v-for="(item,index) in userAdressList" style="border-bottom: 2px solid #ebebeb;padding-bottom: 30rpx;" @click="toproduct">
						<view class="d-flex" style="font-size: 36rpx;font-weight: bold;">
							<view><img src="https://wwfsv.muzkcoinsss.com/storage/coin_icon/USDT.png" width="25" /></view>
							<view style="margin-left: 20rpx;">{{item.coin_name}}</view>
						</view>
						<view class="d-flex justify-between">
							<view>{{$t("common.d9")}}</view>
							<view style="color: #60c08c;">{{item.rate}}%{{$t('exchange.e3')}}</view>
						</view>
						<view class="d-flex justify-between">
							<view>{{$t("common.d10")}}</view>
							<view>{{$t('common.d16')}}</view>
						</view>
						<view class="d-flex justify-between">
							<view>{{$t("common.d44")}}</view>
							<view style="color: #4097f4;">{{item.cumulativeIncome}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</main>
	</v-page>
</template>

<script>
	import {mapState,mapActions} from "vuex";
	import Wallet from "@/api/wallet";
	export default {
	  name: "index",
	  components: {
		
	  },
	  props: {
	  	isShow: {
	  		default: true,
	  		type: Boolean,
	  		required: false,
	  	}
	  },
	  created() {
	    this.getBalance()
		this.init()
	  },
	  computed: {
	  	...mapState({
	  		hideMoney1: "hideMoney1",
	  		theme: "theme",
	  	}),
	  },
	  data() {
	    return {
	      activeCoin:{},
		  userAdressList:[],
		  coin_name1:"USDT",
		  financial:{},
		  vip:{},
		  nextVip:{},
		  refreshing: false,
	    };
	  },
	  watch:{
	  // 	'$route' (to, from){
			// this.getBalance()
			// // console.log(to.fullPath);
			// // console.log(from);
	  // 	},
		isShow(n, o) {
			if (n) {
				this.getBalance()
			}
		},
	  },
	  methods: {
		...mapActions({
			setHide: "hideMoney1",
		}),
		filterMoney(val, type) {
			if (this.hideMoney1) return "******";
			return val;
		},
		refresherscroll(){
			this.getBalance()
			this.init()
			if (this.refreshing) return;
			this.refreshing = true;
			setTimeout(() => {
				this.refreshing = false;
			}, 1000)
		},
	    getBalance(){
	    	let data = {
	    	  account: 4,
	    	  coin_name: this.coin_name1
	    	};
	    	Wallet.getBalance(data).then(res => {
	    	  this.activeCoin = res.data;
	    	  // console.log(res);
	    	});
			Wallet.financial_vip({}).then(res => {
			  // console.log(res);
			  this.financial = res.data
			  this.vip = res.data.vip
			  this.nextVip = res.data.nextVip
			});
	    },
		init(){
			Wallet.activity().then(res => {
				this.userAdressList = res.data;
				// console.log(this.userAdressList);
			})
		},
		onredemption(){
			uni.navigateTo({
				url:'/pages/financialManagement/finances-hold'
			})
		},
		toproduct(){
			uni.navigateTo({
				url:'/pages/financialManagement/finances-product'
			})
		}
	  }
	};
</script>

<style scoped lang="scss">
	.activeCoinAmount{
		display: flex;
		margin-top: 30rpx;
		font-weight: bold;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;
		justify-content: space-between;
	}
</style>