<template>
	<view>
		<u-calendar v-model="timeShow" mode="date" @change="change"></u-calendar>
		<view class="bg-img" style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/e997d05cc3514ad7b1bdfd71e3798a7d-bg-img1.png');width: 100%;height: 530upx;">
			<view class="flex justify-center align-center" style="padding-top: 80upx;">
				<view class="flex justify-center text-bold" style="width: 200upx;font-size: 34upx;" @click="current = 0">
					<view :class="current == 0 ? 'text-white' : 'text-gray'">已到账</view>
				</view>
				<view class="flex justify-center text-bold" style="width: 200upx;font-size: 34upx;" @click="current = 1">
					<view :class="current == 1 ? 'text-white' : 'text-gray'">未到账</view>
				</view>
			</view>
			<view class="text-white text-lg" style="padding: 70upx 40upx;" @click="timeShow = true">
				<text>{{time}}</text>
				<text class="padding-left-xs cuIcon-unfold"></text>
			</view>
			<view class="text-gray padding-left-lg">收益未到账合计：</view>
			<view class="text-white text-bold padding-left-lg" style="font-size: 80upx;margin: 30upx 0;">{{total}}</view>
		</view>
		<view class="margin-top bg-white">
			<view class="padding">{{current == 0 ? '到账收益记录' : '未到账记录'}}</view>
			<block v-for="(item, index) in incomeList" :key="index">
				<view class="flex justify-between align-center padding" @click="detail(item.id)">
					<view class="flex align-center">
						<image class="margin-right" src="/static/agent/icon-withdraw.png" style="width: 70upx;height: 70upx;"></image>
						<view class="text-bold text-black">{{item.type}}</view>
					</view>
					<view>
						<view class="text-bold text-lg margin-bottom-xs text-black flex justify-end">+{{item.income}}</view>
						<view class="text-gray text-sm flex justify-end">{{item.time}}</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeShow: false,
				current: 0,
				time: '2021年6月25日',
				total: 2666.01,
				incomeList: [
					{id:'1', type: '代理收益', time: '6月11日 10:42', income: '5700.00'},
					{id:'2', type: '代理收益', time: '6月11日 10:42', income: '5700.00'},
					{id:'3', type: '代理收益', time: '6月11日 10:42', income: '5700.00'},
					{id:'4', type: '代理收益', time: '6月11日 10:42', income: '5700.00'},
					{id:'5', type: '代理收益', time: '6月11日 10:42', income: '5700.00'},
					{id:'6', type: '代理收益', time: '6月11日 10:42', income: '5700.00'}
				],
			}
		},
		onLoad() {
			this.getLocalDate();
		},
		methods: {
			getLocalDate() {
				let time = new Date().toLocaleDateString().split('/');
				this.time = time[0] + '年' + time[1] + '月' + time[2] + '日';
			},
			detail(id) {
				uni.navigateTo({
					url: '/pagesB/pages/agent/myIncome/detail?id=' + id
				})
			},
			change(e) {
				this.time = e.year + '年' + e.month + '月' + e.day + '日'
			}
		}
	}
</script>

<style>

</style>
