<template>
	<view>
		<z-paging :language="$i18n.locale" ref="paging" v-model="list" @query="queryList" :pageSize="20"
		:style="'background-color: '+theme.bg+';color: '+theme.text">
			<!-- 下拉刷新 -->
			<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
			</custom-refresher>

			<!-- 头部 -->
			<view slot="top" class="relative" :style="{height: `calc(${statusBar}px + 490rpx)`}">
				<view class="width-100b fixed1" :style="{height: `calc(${statusBar}px + 490rpx)`}">
					<view class="width-100b flex align-center justify-center"
						:style="{paddingTop: statusBar + 'px', height: `calc(${statusBar}px + 55px)`}">
						<text class="midetitle">{{i18n.assets.bill.title}}</text>
						<i @click="router.goBack()" class="cuIcon-back font-30 color-white"
							style="position: absolute;left: 30rpx;"></i>
					</view>

					<view class="height-240 padding-w-30 padding-b-20">
						<view class="height-100 margin-b-20">
							<view class="flex-1 height-100 flex direction-column align-start justify-between">
								<text class="font-26 color-white"
									style="opacity: 0.6;">{{i18n.assets.bill.balance}}</text>
								<text class="font-48 numbold-font color-white">{{Number(balance).toFixed(4)}}</text>
							</view>
						</view>
						<view class="height-100 flex align-center justify-between">
							<view class="flex-1 height-90 flex direction-column align-start justify-between">
								<text class="font-26 color-white"
									style="opacity: 0.6;">{{i18n.assets.bill.total}}</text>
								<text class="font-28 numbold-font color-white">{{Number(cc_amount).toFixed(4)}}</text>
							</view>
							<view class="flex-1 height-90 flex direction-column align-center justify-between">
								<text class="font-26 color-white"
									style="opacity: 0.6;">{{i18n.assets.bill.today}}</text>
								<text class="font-28 numbold-font color-white">{{Number(pc_amount).toFixed(4)}}</text>
							</view>
							<view class="flex-1 height-90 flex direction-column align-end justify-between">
								<text class="font-26 color-white" style="opacity: 0.6;">{{i18n.assets.bill.bili}}</text>
								<text :class="yk_percent >= 0?'color-00C481':'color-FF4040'"
									class="font-28 numbold-font ">{{yk_percent | percentFilter}}%</text>
							</view>
						</view>
					</view>
					<view class="absolute" style="bottom: 0;">
						<view class="" style="border-radius: 20rpx 20rpx 0 0;"
						 :style="'background-color: '+theme.bg+';color: '+theme.text">
							<view class="height-120 flex align-center justify-between">
								<view @click="set(1)"
									class="flex-1 height-110 padding-t-30 flex direction-column align-center justify-between">
									<text :class="current==1?'color-0165EE':'color-C3C3C3'" class="font-26 "
										style="">{{i18n.assets.bill.todayYL}}</text>
									<text :class="current==1?'color-0165EE':'color-C3C3C3'"
										class="font-30 numbold-font">{{Number(today_num).toFixed(4)}}</text>
								</view>
								<view class="width-2 height-75" style="background-color: #EAECEF;"></view>
								<view @click="set(2)"
									class="flex-1 height-110 padding-t-30 flex direction-column align-center justify-between">
									<text :class="current==2?'color-0165EE':'color-C3C3C3'" class="font-26"
										style="">{{i18n.assets.bill.allYL}}</text>
									<text :class="current==2?'color-0165EE':'color-C3C3C3'"
										class="font-30 numbold-font">{{Number(all_num).toFixed(4)}}</text>
									<!-- <view :style="current==1?'':'visibility: hidden;'" class="width-95 height-4" style="background-color: #0165EE;"></view> -->
								</view>
							</view>
							<view class="height-20 width-750 relative" :style="'background-color: '+theme.bg">
								<view :style="current==1?'left: 150rpx;':'left: 530rpx;'" class="huakuai"></view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<!-- 身体 -->
			<view>
				<view v-if="current==1" class="">
					<view class="listBox" v-for="(item,index) in list" :key="index"
					 :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
						<view class="height-100 flex align-center justify-between">
							<view class="flex-1 height-80 flex direction-column align-start justify-between">
								<text class="font-26">{{i18n.assets.bill.order}}</text>
								<text class="font-30 numbold-font color-C3C3C3">{{item.order_sn}}</text>
							</view>
							<view class="flex-1 height-80 flex direction-column align-start justify-between">
								<text class="font-26">{{i18n.assets.bill.curr}}</text>
								<text class="font-30 numbold-font color-C3C3C3">{{item.coinname}}</text>
							</view>
						</view>
						<view class="height-100 flex align-center justify-between">
							<view class="flex-1 height-80 flex direction-column align-start justify-between">
								<text class="font-26">{{i18n.assets.bill.time}}</text>
								<text class="font-30 numbold-font color-C3C3C3">{{item.createtime}}</text>
							</view>
							<view class="flex-1 height-80 flex direction-column align-start justify-between">
								<text class="font-26 color-C3C3C3">{{i18n.assets.bill.edu}}</text>
								<text class="font-30 numbold-font color-00C481">{{item.income}} USDT</text>
							</view>
						</view>
					</view>
				</view>

				<view v-if="current==2" class="">
					<view class="listBox" v-for="(item,index) in list" :key="index"
					 :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
						<view class="padding-10">
							<view class="height-50 flex align-center justify-between">
								<text class="font-26">{{i18n.assets.bill.yingli}}</text>
								<text class="font-26">{{i18n.assets.bill.data}}</text>
							</view>
							<view class="height-50  flex align-center justify-between">
								<text class="font-30 numbold-font color-00C481">{{item.income}} USDT</text>
								<text class="font-30 numbold-font color-C3C3C3">{{item.createtime}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				current: 1,

				balance: 0, //余额
				cc_amount: 0, //当前持仓总量
				pc_amount: 0, //今日平仓总量
				yk_percent: 0, //今日盈亏比例

				today_num: 0, //今日盈利
				all_num: 0, //累计盈利

				list: [],
				theme: '',
			}
		},
		filters: {
			// 百分号过滤器（保留小数点后两位）
			percentFilter: function(item) {
				return (item * 100).toFixed(2)
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		methods: {
			set(e) {
				if (this.current != e) {
					this.current = e
					this.queryList(1, 10)
				}
			},
			queryList(pageNo, pageSize) {
				setTimeout(() => {
					this.post('/strategy/get_bill', {
						page: pageNo,
						page_num: pageSize,
						type: this.current
					}).then(res => {
						if (res.code == 1) {
							if (this.current == 1) {
								this.balance = res.data.balance
								this.cc_amount = res.data.cc_amount
								this.pc_amount = res.data.pc_amount
								this.yk_percent = res.data.yk_percent
								this.today_num = res.data.today_num
								this.all_num = res.data.all_num
							}
							console.log(res)
							this.$refs.paging.complete(res.data.data);
						}
					})
				}, 500)
			},
		}
	}
</script>

<style lang="scss">
	.fixed1 {
		position: fixed;
		top: 0;
		z-index: 990;
		background-color: #0165EE;
	}

	.midetitle {
		font-size: 16px;
		font-weight: 700;
		color: #fff;
	}

	.listBox {
		width: 100%;
		// height: 232rpx;
		padding: 10rpx 30rpx;
		// background: #FFFFFF;
		margin-bottom: 1rpx;
	}

	.huakuai {
		width: 75rpx;
		height: 4rpx;
		background-color: #0165EE;
		position: absolute;
		top: 10rpx;
		transition: all 0.5s;
	}
</style>
