<template>
	<view class="whole">
		<!-- <view class="twoBox">
			<view class="search">
				<view class="row flex">收益明细</view>
				<view class="row flex" @click="typeFilter">
					<view class="tit">{{typeTxt || '全部'}}</view>&nbsp;
					<up-icon name="arrow-down" color="#777" size="15" />
				</view>
				<view class="row flex" @click="openPopup()">
					<view class="tit">时间</view>&nbsp;
					<up-icon name="calendar-fill" color="#666" size="18" />
				</view>
			</view>
		</view> -->
		
		<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">{{item.title}}</view>
						<text>{{item.profit}}</text>
					</view>
					<view class="two flex1">
						<view @click="copyText(item.order_sn)">订单编号:{{ item.order_sn}}&nbsp;<up-icon name="file-text" color="#777" /></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>
			
		<up-popup :show="showPopup" :round="10" mode="bottom" closeable @close="showTime = false, showPopup = false">
			<div class="tite">选择日期</div>
			<view class="timeBox">
				<view @click="openTime(1)" class="input_box">
					<text>{{start_time || '开始时间'}}</text>
				</view>
				<text class="wenzi">至</text>
				<view @click="openTime(2)" class="input_box">
					<text>{{end_time || '结束时间'}}</text>
				</view>
			</view>
			<view @click="hanleTime" class="box_btn">确定</view>
		</up-popup>
		
		<up-datetime-picker
			:show="showTime"
			v-model="currentDate"
			mode="date"
			@confirm="chooseTimes"
			@cancel="showTime = false"
			@close="showTime = false"
			:closeOnClickOverlay="true">
		</up-datetime-picker>
		
			
	</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],
				Type: ''
			})
			
			function typeFilter() {
				uni.showActionSheet({
					itemList: data.itemList,
					success: (res) => {
						data.filter.subdivide_type = data.SubType[res.tapIndex]
						data.typeTxt = data.itemList[res.tapIndex]
						updateList()
					},
					fail: (err) => {
						console.log('取消', err)
					}
				})
			}
			
			function openPopup() {
				data.start_time = data.filter.start_of_date
				data.end_time = data.filter.end_of_date
				data.showPopup = true
			}
			
			const openTime = (type) => {
				data.data_type = type
				if (type == 1) {
					data.currentDate = data.start_time ? Date.parse(new Date(data.start_time)) : Date.parse(new Date())
				} else {
					data.currentDate = data.end_time ? Date.parse(new Date(data.end_time)) : Date.parse(new Date())
				}
				data.showTime = true
			}
			
			const chooseTimes = (e) => {
				let time = dayjs(e.value).format('YYYY-MM-DD')
				if (data.data_type == 1) {
					data.start_time = time
				} else if (data.data_type == 2) {
					data.end_time = time
				}
				data.showTime = false
			}
			
			function hanleTime() {
				data.filter.start_of_date = data.start_time
				data.filter.end_of_date = data.end_time
				data.showPopup = false
				updateList()
			}
			
			function scorllBottom() {
				console.log('0.0')
				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/myEarnings`, {
					page: data.page,
					pageSize: 20,
					type: data.Type
					// ...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),
				typeFilter,
				openTime,
				copyText,
				scorllBottom,
				chooseTimes,
				hanleTime,
				getList,
				openPopup
			}
		},
		onLoad(options) {
			this.Type = options.type
			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;
		.twoBox{
			border-radius: 10rpx;
			background-color: #fff;
			margin-top: 24rpx;
			.search{
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #f1f1f1;
				.row{
					padding: 0 24rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					color: #222;
					.tit{
						line-height: 1;
					}
				}
			}
		}
		.list{
			height: 100%;
			padding: 24rpx;
			.row{
				padding: 24rpx;
				font-size: 28rpx;
				background-color: #fff;
				margin-bottom: 24rpx;
				.one{
					margin-bottom: 10px;
					.ope{
						color: #222;
						font-size: 30rpx;
						&.red{
							color: v-bind('Color');
						}
					}
				}
				.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>
