<template>
	<view class="">
		<z-paging ref="paging" v-model="list" @query="queryList"
		:style="'background-color: '+theme.bg+';color: '+theme.text">
		<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
		</custom-refresher>

		<!-- 头部 tab -->
		<view slot="top" class="width-100b flex align-center justify-between padding-w-40" :style="{height: `calc(${statusBar}px + 100rpx)`,paddingTop: `calc(${statusBar}px )`}">
			<view @click="tabsChange(index)" class="flex-1 height-100b flex align-center justify-center"
				v-for="(item,index) in tabList" :key="index">
				<text :class="current==index?theme.selectcolor:theme.color" class="font-32">{{item}}</text>
			</view>
		</view>

		<view class="padding-w-30">
			<!-- 用户信息卡片 -->
			<view class="userCard" :style="'background:'+theme.assetbg">
				<view class="width-100b flex align-center justify-between">
					<view class="flex align-center">
						<image class="width-80 height-80 radiu-50b margin-r-20" :src="userinfo.avatar || '/static/imgs/my/head_ico.png'" mode="aspectFill"></image>
						<view class="flex direction-column">
							<text class="font-28 color-white bold-font">{{userinfo.email || userinfo.nickname || '--'}}</text>
							<text class="font-22 color-white" style="opacity:0.7;">ID: {{userinfo.id || '--'}}</text>
						</view>
					</view>
					<view @click="router.push('/pages/asset/record')" class="recordBtn">
						<text class="font-24 color-white">{{i18n.assets.index.record || 'Record'}}</text>
					</view>
				</view>

				<!-- 资产总览 -->
				<view class="width-100b margin-t-30 flex align-center justify-between">
					<view class="flex-1">
						<view class="flex align-center">
							<text class="font-22 color-white" style="opacity:0.7;">{{i18n.assets.index.totalAssets || 'Account Total Assets'}}</text>
							<view class="margin-l-16" @click="ifcover=!ifcover">
								<image class="width-32 height-26" :src="ifcover?ZY:BY" mode=""></image>
							</view>
						</view>
						<view class="flex align-center margin-t-10">
							<text v-if="ifcover" class="font-40 numbold-font color-white">${{formatNum(all.count_usdt)}}</text>
							<text v-else class="font-40 numbold-font color-white">****</text>
						</view>
					</view>
					<view class="flex-1 text-right">
						<text class="font-22 color-white" style="opacity:0.7;">{{i18n.assets.index.totalPnl || 'Account Total P&L'}}</text>
						<view class="flex align-center justify-end margin-t-10">
							<text v-if="ifcover" class="font-32 numbold-font color-white">$ {{formatNum(totalPnl)}}</text>
							<text v-else class="font-32 numbold-font color-white">****</text>
						</view>
					</view>
				</view>

				<!-- 总利润 -->
				<view class="width-100b margin-t-16">
					<text class="font-22 color-white" style="opacity:0.7;">{{i18n.assets.index.totalProfit || 'Account Total Profit'}}</text>
					<view class="margin-t-6">
						<text v-if="ifcover" class="font-34 numbold-font" :style="'color:'+(totalProfit>=0?'#00C481':'#FF4040')">$ {{formatNum(totalProfit)}}</text>
						<text v-else class="font-34 numbold-font color-white">****</text>
					</view>
				</view>
			</view>

			<!-- 存款/取款/转账 -->
			<view class="height-170 flex align-center justify-between" :style="'color: '+theme.text">
				<view @click="router.push('/pages/index/recharge')" class="flex-1 height-100b flex direction-column align-center justify-center">
					<image class="width-90 height-90" :src="theme.imgs+'/Group34154@2x.png'" mode=""></image>
					<text class="font-26 margin-t-6">{{i18n.assets.index.reg}}</text>
				</view>
				<view @click="router.push('/pages/index/withdraw')" class="flex-1 height-100b flex direction-column align-center justify-center">
					<image class="width-90 height-90" :src="theme.imgs+'/Group34153@2x.png'" mode=""></image>
					<text class="font-26 margin-t-6">{{i18n.assets.index.wid}}</text>
				</view>
				<view @click="router.push('/pages/asset/transfer?id='+current)" class="flex-1 height-100b flex direction-column align-center justify-center">
					<image class="width-90 height-90" :src="theme.imgs+'/Group34155@2x.png'" mode=""></image>
					<text class="font-26 margin-t-6">{{i18n.assets.index.tran}}</text>
				</view>
			</view>
		</view>

		<!-- 总览页面 -->
		<view v-if="current==0" class="padding-w-30">
			<!-- Spot 余额 -->
			<view @click="current=1" class="accountRow" :style="'background-color:'+theme.fu_bg+';color:'+theme.text">
				<view class="flex align-center justify-between">
					<text class="font-28 bold-font">{{i18n.assets.index.title2}}</text>
					<i class="cuIcon-right font-26 color-C3C3C3"></i>
				</view>
				<view class="margin-t-10">
					<text class="font-38 numbold-font">{{ifcover?all.count_xh_usdt:'****'}} <text class="font-24 color-C3C3C3">USDT</text></text>
				</view>
			</view>

			<!-- Fiat 余额 -->
			<view @click="current=2" class="accountRow" :style="'background-color:'+theme.fu_bg+';color:'+theme.text">
				<view class="flex align-center justify-between">
					<text class="font-28 bold-font">{{i18n.assets.index.title3}}</text>
					<i class="cuIcon-right font-26 color-C3C3C3"></i>
				</view>
				<view class="margin-t-10">
					<text class="font-38 numbold-font">{{ifcover?all.count_fb_usdt:'****'}} <text class="font-24 color-C3C3C3">USDT</text></text>
				</view>
			</view>

			<!-- 资金流水 -->
			<view class="margin-t-20">
				<view v-for="(item,index) in list" :key="index" class="flowRow" :style="'border-bottom:1rpx solid '+(theme.bg=='#FFFFFF'?'#F0F0F0':'rgba(255,255,255,0.06)')">
					<view class="flex align-center justify-between">
						<text class="font-26 bold-font">{{item.description}}</text>
						<text v-if="item.cart==1" class="numbold-font font-26 color-00C481">{{item.price}} USDT</text>
						<text v-if="item.cart==2" class="numbold-font font-26 color-FF4040">-{{item.price}} USDT</text>
					</view>
					<text class="font-22 color-C3C3C3 margin-t-6">{{item.createtime}}</text>
				</view>
			</view>
			<view v-if="loading" class="width-100b padding-c-50 flex align-center justify-center">
				<u-loading show mode="flower" size="40"></u-loading>
			</view>
		</view>

		<!-- Spot / Fiat / 理财 子页面 -->
		<view v-if="current==1||current==2||current==3||current==4" class="">
			<view class="padding-w-30 height-90 flex align-center line-height-90">
				<u-switch v-model="ifHideCoin" size="30" active-color="#2DD1AF"></u-switch>
				<text class="font-24 margin-l-20">{{i18n.assets.index.hide}}</text>
			</view>
			<view
			 :class="[toggleDelay?'animation-slide-bottom':'']"
			class="coinBox" v-for="(item,index) in datalist" :key="index"
			:style="'background-color: '+theme.fu_bg+';color: '+theme.text">
				<view @click="naviTo(item)"
					class="width-100b height-82 padding-w-22 flex align-center justify-between"
					style="border-bottom: 1rpx solid rgba(191, 195, 199, 0.2);">
					<view class="flex align-center">
						<image class="width-36 height-36" :src="item.thumb_image" mode=""></image>
						<text class="font-32 numbold-font margin-w-15">{{item.name}}</text>
						<text class="font-24 nummedium-font color-C3C3C3">{{item.full_name}}</text>
					</view>
					<i class="cuIcon-right font-22 color-D1D3D8"></i>
				</view>
				<view class="width-100b height-100 padding-w-20 flex align-center justify-between">
					<view class="flex-1 height-80 flex direction-column align-start justify-around">
						<text class="font-24">{{i18n.assets.index.usable}}</text>
						<text class="font-26 numbold-font">{{ifcover?item.num:'****'}}</text>
					</view>
					<view class="flex-1 height-80 flex direction-column align-center justify-around">
						<text class="font-24">{{i18n.assets.index.freeze}}</text>
						<text class="font-26 numbold-font">{{ifcover?item.num_dj:'****'}}</text>
					</view>
					<view class="flex-1 height-80 flex direction-column align-end justify-around">
						<text class="font-24">{{i18n.assets.index.convert}}</text>
						<text class="font-26 numbold-font">{{ifcover?item.usdt_price:'****'}}</text>
					</view>
				</view>
			</view>
			<view v-if="datalist.length == 0" class="height-100 flex align-center justify-center">
				<text class="font-24 color-999999 ">{{i18n.assets.index.nodata}}</text>
			</view>
		</view>
	</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				tabList: ['总览', '现货','法币','理财'],
				current: 0,

				userinfo: {},
				totalPnl: 0,
				totalProfit: 0,

				all:{
					count_btc: "0.0000",
					count_usdt: "0.0000",
					count_xh_usdt: "0.00",
					count_lh_usdt: "0.00",
					count_fb_usdt: "0.00"
				},
				xh:{
					count_btc: "0.0000",
					count_usdt: "0.0000",
					xh_arr:[]
				},
				fb:{
					count_btc: "0.0000",
					count_usdt: "0.0000",
					fb_arr:[]
				},
				lh:{
					count_btc: "0.0000",
					count_usdt: "0.0000",
					lh_arr:[]
				},
				qq:{
					count_btc: "0.0000",
					count_usdt: "0.0000",
					qq_arr:[]
				},

				ZY: '/static/imgs/asset/zhenyan.png',
				BY: '/static/imgs/asset/biyan.png',
				ifcover: true,

				ifHideCoin:false,

				toggleDelay: false,

				list:[],
				loading:true,

				theme: '',
			}
		},
		computed:{
			i18n() {
				return this.$t('message');
			},
			count_obj() {
				let obj = {};
				var that = this
				switch (this.current) {
					case 0:
						obj = that.all
						break;
					case 1:
						obj = that.xh
						break;
					case 2:
						obj = that.fb
						break;
					case 3:
						obj = that.lh
						break;
					case 4:
						obj = that.qq
						break;
					default:
						obj = that.all
						break;
				}
				return obj
			},
			datalist() {
				let obj = [];
				var that = this
				switch (this.current) {
					case 0:
						obj = []
						break;
					case 1:
						if(that.ifHideCoin==true){
							if(that.xh.xh_arr){
								obj = that.xh.xh_arr.filter((item)=>{
									return item.num != 0
								})
							}
						}else{
							obj = that.xh.xh_arr
						}
						break;
					case 2:
						if(that.ifHideCoin==true){
							if(that.fb.fb_arr){
								obj = that.fb.fb_arr.filter((item)=>{
									return item.num != 0
								})
							}
						}else{
							obj = that.fb.fb_arr
						}
						break;
					case 3:
						if(that.ifHideCoin==true){
							if(that.lh.lh_arr){
								obj = that.lh.lh_arr.filter((item)=>{
									return item.num != 0
								})
							}
						}else{
							obj = that.lh.lh_arr
						}
						break;
					case 4:
						if(that.ifHideCoin==true){
							if(that.qq.qq_arr){
								obj = that.qq.qq_arr.filter((item)=>{
									return item.num != 0
								})
							}
						}else{
							obj = that.qq.qq_arr
						}
						break;
					default:
						obj = []
						break;
				}
				return obj
			},
		},
		watch:{
			ifHideCoin(item){
				 uni.setStorageSync('ifHideCoin',item)
			}
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			}else{
				this.theme = this.$store.state.lightTheme
			}
			this.tabList[0]=this.i18n.assets.index.title1
			this.tabList[1]=this.i18n.assets.index.title2
			this.tabList[2]=this.i18n.assets.index.title3
			this.tabList[3]=this.i18n.licai.text1
			if(uni.getStorageSync('ifHideCoin')){
				this.ifHideCoin = uni.getStorageSync('ifHideCoin')
			}
			this.getWallet()
			this.getUserInfo()
			this.calcProfit()
		},
		methods: {
			formatNum(val) {
				let n = Number(val || 0)
				return n.toFixed(2)
			},
			queryList(pageNo, pageSize) {
				this.loading = true
				this.post('/wallet/index_detail', {
					page: pageNo,
				}).then(res => {
					this.loading = false
					console.log('资金动态',res)
					if (res.code == 1) {
						this.$refs.paging.complete(res.data.data);
					}
				})
			},
			getUserInfo() {
				this.post('/my/get_userinfo').then((res) => {
					if (res.code == 1) {
						this.userinfo = res.data
					}
				})
			},
			calcProfit() {
				// 从资金流水计算盈亏
				this.post('/wallet/index_detail', {
					page: 1,
					size: 200,
				}).then(res => {
					if (res.code == 1) {
						let profit = 0
						let pnl = 0
						let items = res.data.data || res.data || []
						items.forEach(item => {
							let price = Number(item.price || 0)
							let desc = (item.description || '').toLowerCase()
							if (desc.indexOf('profit') !== -1 || desc.indexOf('收益') !== -1 || desc.indexOf('盈') !== -1) {
								if (item.cart == 1) {
									profit += price
								} else {
									profit -= price
								}
							}
							if (item.cart == 1) {
								pnl += price
							} else {
								pnl -= price
							}
						})
						this.totalProfit = profit
						this.totalPnl = pnl
					}
				})
			},
			getWallet(){
				this.post('/wallet/wallet_index').then((res) => {
					console.log('我的资产',res)
					if (res.code == 1) {
						this.all = res.data.all
						this.xh = res.data.xh
						this.fb = res.data.fb
						this.lh = res.data.lh
						this.qq = res.data.qq
					}
				})
			},
			naviTo(item){
				console.log(this.$u.queryParams(item))
				uni.navigateTo({
					url:'/pages/asset/details'+this.$u.queryParams(item)
				})
			},
			tabsChange(index) {
				if(index==3){
					uni.navigateTo({
						url:'/pages/index/money/index'
					})
				}else{
					this.current = index;
					this.ToggleDelay()
				}
			},
			ToggleDelay() {
				this.toggleDelay = true;
				setTimeout(() => {
					this.toggleDelay = false
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.userCard {
		width: 100%;
		padding: 30rpx 28rpx;
		border-radius: 16rpx;
		position: relative;
	}

	.recordBtn {
		padding: 10rpx 24rpx;
		background: rgba(255,255,255,0.15);
		border-radius: 30rpx;
		border: 1rpx solid rgba(255,255,255,0.3);
	}

	.accountRow {
		width: 100%;
		padding: 28rpx 30rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}

	.flowRow {
		padding: 24rpx 0;
	}

	.topBox {
		width: 100%;
		padding: 22rpx 28rpx;
		display: flex;
		border-radius: 16rpx;
	}

	.juxing {
		flex: 1;
		margin: 0 18rpx;
		height: 56rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.35);
		background: rgba(255, 255, 255, 0.09);
		border-radius: 10rpx;
		line-height: 56rpx;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
	}

	.coinBox {
		width: 690rpx;
		box-shadow: 0rpx 4rpx 4rpx rgba(205, 206, 219, 0.2);
		border-radius: 10rpx;
		margin: 0rpx auto 30rpx;
	}
</style>
