<template>
	<view class="whole">
		<view class="list" v-if="detailList.length">
			<scroll-view scroll-y="true" style="width: 100%;height: 100%;" @scrolltolower="scorllBottom">
				<view class="row" v-for="item in detailList" :key="item.id">
					<view class="one flex1">
						<view class="ope red">奖金池</view>
						<text>{{item.profit}}</text>
					</view>
					<view class="two flex1">
						<view></view>
						<text>{{item.created_at.slice(0, 10)}}</text>
					</view>
				</view>
				<view class="bottom" v-if="page >= lastPage && detailList.length && !loading">- 到底啦 -</view>
				<view class="bottom" v-if="loading"><up-loading-icon text="加载中..." textSize="14"></up-loading-icon></view>
			</scroll-view>
		</view>
		
		<view v-if="!detailList.length && !loading" style="padding-bottom: 30px;">
			<up-empty mode="list" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/list.png" text="暂无明细喔"></up-empty>
		</view>
			
	</view>
	
</template>

<script>
	import { reactive, toRefs } from 'vue'
	import { get } from '@/api/request.js'
	import { showToast, copyText } from '@/components/common.js'
	import dayjs from 'dayjs'
	
	export default {
		setup() {
			const data = reactive({
				Color: uni.getStorageSync('theme_color'),
				loading: false,
				lastPage: 0,
				page: 1,
				filter: {},
				detailList: [],
				showTime: false,
				currentDate: '',
				itemList: ['全部', '佣金收入', '提现', '已结算订单退款', '会员分账收入'],
				typeTxt: '',
				showPopup: false,
				start_time: '',
				end_time: '',
				data_type: 0,
				SubType: ['', 3, 5, 14, 16],
			})
			
			function scorllBottom() {
				if (data.page < data.lastPage) {
					data.page++
					getList(1)
				}
			}
			
			function updateList() {
				data.page = 1
				getList(0)
			}
			
			function getList(val) {
				data.loading = true
				get(`/api/v1/sales/distributor/activityEarnings`, {
					page: data.page,
					pageSize: 20,
					// ...data.filter
				}).then((res) => {
					data.detailList = val == 1 ? data.detailList.concat(res.data) : res.data
					data.lastPage = res.meta.last_page
					data.loading = false
				}).catch(() => {
					data.loading = false
				})
			}
			
			return {
				...toRefs(data),
				copyText,
				scorllBottom,
				getList,
			}
		},
		onLoad(options) {
			this.getList(0)
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex1{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.whole{
		box-sizing: border-box;
		height: 100vh;
		.list{
			height: 100%;
			padding: 24rpx;
			.row{
				padding: 24rpx;
				font-size: 28rpx;
				background-color: #fff;
				margin-bottom: 24rpx;
				.one{
					margin-bottom: 10rpx;
					.ope{
						color: #222;
						font-size: 30rpx;
					}
				}
				.two{
					color: #888;
					margin-top: 10rpx;
					font-size: 26rpx;
				}
			}
			.bottom {
				text-align: center;
				font-size: 24rpx;
				color: #999999;
				margin: auto;
				line-height: 80rpx;
			}
		}
	}
	.tite {
		margin: 0 20rpx;
		padding: 30rpx 0;
		font-size: 30rpx;
		font-weight: bolder;
		border-bottom: 1px solid #e1e1e1;
	}
	.timeBox{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		padding: 30rpx 24rpx 200rpx;
		.wenzi {
			margin: 0 20rpx;
		}
		.input_box{
			background: #f1f1f1;
			padding: 10rpx;
			text-align: center;
			font-size: 28rpx;
			width: 50%;
		}
	}
	.box_btn {
		margin: 0 20rpx 20rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #fff;
		background: v-bind('Color');
		border-radius: 10rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}
	.datetime-picker {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 9999;
	}
</style>
