<template>
	<view>
		<view class="flex justify-center align-center bg-white" style="padding-top: 80upx;">
			<view class="flex justify-center align-center" style="width: 320upx;height: 80upx;background-color: #f6f6f6;border-radius: 12upx;" @click="changeTime">
				<view class="text-lg text-bold text-black">{{time}}</view>
				<view class="text-gray padding-lr">|</view>
				<view class="cuIcon-calendar" style="font-size: 40upx;"></view>
			</view>
		</view>
		<u-picker mode="selector" v-model="timeShow"  :default-selector="[0]" :range="selector" @confirm="confirm"></u-picker>
		<view class="text-center bg-white">
			<view class="theme-color text-bold padding-top padding-bottom-xs" style="font-size: 34upx;">推广总收益</view>
			<view class="theme-color text-bold" style="font-size: 60upx;">88947.01</view>
			<view class="text-gray padding-sm" style="font-size: 34upx;">未到账2671.49</view>
		</view>
		<view class="flex justify-center align-center bg-white padding-bottom" @click="todayIncome">
			<view class="flex justify-center theme-color text-bold" style="width: 220upx;line-height: 60upx;background-color: #f6f6f6;border-radius: 12upx;">
				<text>今日收益</text><text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="margin-top bg-white">
			<view class="padding">{{time}}收益记录</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">
						<view class="text-center" style="width: 30upx;">{{index + 1}}</view>
						<image class="margin-lr" src="/static/agent/icon-withdraw.png" style="width: 70upx;height: 70upx;"></image>
						<view>{{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,
				time: '2021年6月',
				selector: ['2021年6月', '2021年5月', '2021年4月', '2021年3月', '2021年2月', '2021年1月'],
				incomeList: [
					{type: '代理收益', time: '6月11日 10:42', income: '5700.00'},
					{type: '代理收益', time: '6月11日 10:42', income: '5700.00'},
					{type: '代理收益', time: '6月11日 10:42', income: '5700.00'},
					{type: '代理收益', time: '6月11日 10:42', income: '5700.00'},
					{type: '代理收益', time: '6月11日 10:42', income: '5700.00'},
					{type: '代理收益', time: '6月11日 10:42', income: '5700.00'}
				],
			}
		},
		methods: {
			changeTime() {
				this.timeShow = true;
			},
			confirm(index) {
				this.time = this.selector[index];
			},
			todayIncome() {
				uni.navigateTo({
					url: "/pages/activityList/mine/agent/myIncome/todayIncome"
				})
			},
			detail(id) {
				uni.navigateTo({
					url: "/pages/activityList/mine/agent/myIncome/detail?id=" + id
				})
			}
		}
	}
</script>

<style>

</style>
