<template>
	<c-tabbar :current="2">
		<view class="p-20">
			<view class="wage p-30 flex flex-col">
				<view class="wage-tip">总收益(元)</view>
				<view class="money">{{(topData.totalMoney / 100).toFixed(2)}}</view>
				<view class="flex flex-col">
					<view class="flex justify-between" style="padding: 10upx 0;">
						<view><text class="wage-tip">今日预估</text><text class="nums">{{(topData.todayEstimate/100).toFixed(2)}}</text></view>
						<view><text class="wage-tip">七日预估</text><text class="nums">{{(topData.sevenDaysEstimate/100).toFixed(2)}}</text></view>
					</view>
					<view class="flex justify-between" style="padding: 10upx 0;">
						<view><text class="wage-tip">昨日预估</text><text class="nums">{{(topData.yesterdayEstimate/100).toFixed(2)}}</text></view>
						<view><text class="wage-tip">本月预估</text><text class="nums">{{(topData.thisMonthEstimate/100).toFixed(2)}}</text></view>
					</view>
				</view>
			</view>
			
			<view class="short-play p-20">
				<view class="flex flex-row justify-between items-center">
					<view>
						<text class="title">短剧数据</text>
						<text class="date">2024-01-01</text>
					</view>
					<view class="flex flex-row justify-center items-center" @click="navigateTo('/pages/data/shortPlay/shortPlay')">
						<text>更多</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="flex flex-row">
					<view class="flex-1">
						<view class="p2">预估收益</view>
						<view class="m2">0.00</view>
						<view class="flex flex-row justify-between extra">
							<text>退款金额</text>
							<text>0.00</text>
						</view>
					</view>
					<view class="flex-1" style="margin-left: 20upx;">
						<view class="p2">充值金额</view>
						<view class="m2">0.00</view>
						<view class="flex flex-row justify-between extra">
							<text>广告收益</text>
							<text>0.00</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-modal :show="showMini" title="长按二维码识别关注公众号" :closeOnClickOverlay="true" :showCancelButton="true"
			cancelText="关闭" cancelColor="#007aff" :showConfirmButton="false" @close="showMini = false"
			@cancel="showMini = false">
			<view>
				<view class="flex flex-col justify-center items-center" style="width: 100%;">
					<image style="width: 300upx;height: 300upx;"
						src="https://ly.imgother.hlh2021.com/1680836523536_小刘客服微信.jpg" mode="aspectFit"></image>
					<view class="p-20">
						<view style="color: red;font-size: 28upx;">关注后可以接受平台信息</view>
					</view>
				</view>
			</view>
		</u-modal>
	</c-tabbar>
</template>

<script>
	import CTabbar from '@/components/gTabbar.vue'
	import {
		record
	} from '@/api/index.js'
	export default {
		components: {
			CTabbar
		},
		data() {
			return {
				showMini: false,
				topData: {
					sevenDaysEstimate: 0,
					thisMonthEstimate: 0,
					todayEstimate: 0,
					totalMoney: 0,
					yesterdayEstimate: 0
				}
			}
		},
		created() {
			this.getData()
		},
		onShow() {
			this.getData()
		},
		methods: {
			async getData() {
				const res = await record.statistics({})
				this.topData = res.data
			}
		}
	}
</script>

<style lang="scss">
	.wage {
		background-color: $uni-theme;
		border-radius: 20upx;
		font-size: 25upx;
	}
	.wage-tip {
		color: #84b6f9;
	}
	.money {
		color: #f4f8ff;
		font-size: 50upx;
		font-weight: bold;
		padding-top: 15upx;
		padding-bottom: 30upx;
	}
	.nums {
		color: #f4f8ff;
		margin-left: 15upx;
	}
	.short-play {
		margin-top: 30upx;
		background-color: #ffffff;
		border-radius: 20upx;
		color: #a0a0a0;
		.title {
			font-size: 40upx;
			font-weight: bold;
			color: #303030;
		}
		.date {
			font-size: 28upx;
			margin-left: 20upx;
		}
		.p2 {
			font-size: 25upx;
			padding-top: 20upx;
			padding-bottom: 10upx;
		}
		.m2 {
			font-size: 45upx;
			font-weight: bold;
			color: #333333;
			padding-bottom: 20upx;
		}
		.extra {
			background-color: #f7f8fa;
			border-radius: 10upx;
			padding: 10upx;
			font-size: 25upx;
		}
	}
</style>