<template>
	<view>
		<u-navbar autoBack placeholder bgColor="#FFFFFF">
			<view class="navSlot" slot="center">
				<!-- <u-icon name="arrow-left" size="19"></u-icon> -->
				<view class="title">收入明细</view>
			</view>
		</u-navbar>
		<view class="search_filter">
			<view class="filter" @click="isShowStartTime = true">
				<view>{{(beginTime && endTime)?(beginTime +' - ' +endTime):'开始时间-结束时间'}}</view>
				<image class="img" src="../../static/tabar/ic_edit.png"></image>
			</view>
			<view class="tvfilter" @click="reset">重置</view>
			<view class="tvfilter" @click="shaixuan">筛选</view>
		</view>
		<view class="time">
			<view style="opacity: 0;">2022年9月</view>
			<view class="income">收入：￥{{incomeAmount}}</view>
		</view>
		<view class="bgMains">
			<view class="incomeList" v-for="(item,index) in exDetailsList" :key="index">
				<view>
					<view>{{item.createTime}}</view>
					<view>{{item.title}}</view>
				</view>

				<view style="color: #FF4502;">+￥{{item.price}}</view>
			</view>
			<view v-if="exDetailsList.length == 0">
				<image style="width: 376rpx;display: block;margin: 0 auto;" src="../../static/icon_xx_k.png">
				</image>
				<text style="display: block;text-align: center;color: #ccc;">暂无数据</text>
			</view>
		</view>
		<u-datetime-picker v-model="currenTime" title="选择开始时间" @close="closeIsShow" @cancel="closeIsShow" @confirm="confirmStart"
			ref="datetimePicker" :show="isShowStartTime" mode="date" :formatter="formatter" :maxDate="minDate"></u-datetime-picker>
		<u-datetime-picker v-model="currenTime" title="选择结束时间" @close="closeIsShow" @cancel="closeIsShow" @confirm="confirmEnd"
			ref="datetimePicker" :show="isShowEndTime" mode="date" :formatter="formatter" :maxDate="minDate"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				exDetailsList: [],
				total: 0,
				pageNum: 1,
				isShowStartTime: false,
				isShowEndTime: false,
				minDate: Number(new Date()),
				beginTime: '',
				endTime: '',
				incomeAmount: 0,
				minDate: Number(new Date()),
				currenTime:Number(new Date())
			}
		},
		onLoad() {
			this.getinExDetails()
		},

		onReachBottom() {
			if (this.total > this.exDetailsList.length) {
				this.pageNum = this.pageNum + 1
				this.getinExDetails(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},

		methods: {
			reset(){
				this.beginTime = ''
				this.endTime = ''
				this.pageNum = 1
				this.getinExDetails()
			},

			shaixuan() {
				this.pageNum = 1
				this.getinExDetails()
			},

			getinExDetails(flag) {
				this.$http.post('/api/store/personalCenter/inExDetails', {
					pageNum: this.pageNum,
					pageSize: 10,
					beginTime: this.beginTime,
					endTime: this.endTime
				}).then(res => {
					this.exDetailsList = !flag ? res.data.rows : this.exDetailsList.concat(res.data.rows)
					this.total = res.data.total
					this.getincomeAmount()
				})
			},

			getincomeAmount() {
				this.$http.get('/api/store/personalCenter/incomeAmount',{
					beginTime: this.beginTime,
					endTime: this.endTime
				}).then(res => {
					this.incomeAmount = res.data
				})
			},

			closeIsShow() {
				this.isShowStartTime = false
				this.isShowEndTime = false
			},
			confirmStart(e) {
				this.beginTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.isShowStartTime = false
				this.isShowEndTime = true
				// this.closeIsShow()
			},
			confirmEnd(e) {
				this.endTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.closeIsShow()
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},


		}
	}
</script>

<style lang="scss">
	
	.bgMains{
		background: #f9f6f4;
		padding: 20rpx;
		min-height: 100vh;
	}
	.orderRevenue {
		font-size: 28rpx;
		color: #333333;
	}

	.incomeList {
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		display: flex;
		padding: 20rpx;
		margin-bottom: 20rpx;

	}

	.time {
		display: flex;
		padding: 24rpx;
		justify-content: space-between;
	}

	.income {
		font-size: 28rpx;
		color: #FF4502;
	}

	.search_filter {
		margin-top: 10rpx;
		text-align: center;
		display: flex;
		padding: 0 24rpx;
		flex: 1;
		box-sizing: border-box;

		.tvfilter {
			font-size: 28rpx;
			color: #FF4502;
			padding-left: 30rpx;
			padding-top: 20rpx;
		}

		.filter {
			padding: 15rpx;
			justify-content: space-between;
			display: flex;
			align-items: center;
			background: #FAF7F6;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 28rpx;
			color: #999999;
			flex: 1;

			.img {
				width: 32rpx;
				height: 32rpx;
				text-align: center;
			}
		}
	}
</style>