<template>
	<view class="statement-view">
		<u-navbar back-icon-color="#333333" background="#F4F5F7" title="收入流水" titleColor="#333333"
			:border-bottom="false" title-bold></u-navbar>
		<view class="statement-conten">
			<view class="statement-content-view">
				<view class="head-view">
					<view class="head-top-view">
						<picker mode="date" :value="date" fields="month" @change="bindDateChange" :end="endTime">
						    <view class="date-input">
								<text class="date-text">{{date}}</text>
								<u-icon name="arrow-down"></u-icon>
							</view>
						</picker>
					</view>
					<view class="head-bottom-view">
						<view v-for="(value, key) in items" :key="key" class="head-amount-view">
							<view><text>{{value}}</text></view>
							<view class="head-amount-text"><text>{{info[key]}}</text></view>
						</view>
					</view>
				</view>
				<image :src="qnFile('liushuibeijing.png')" class="head-back-image" mode="widthFix"></image>
				<view class="list-view"  v-if="hasInfo">
					<view class="u-flex u-row-center" v-if="loading">
						<u-gap height="20"></u-gap>
						<u-loading color="#2272FF" :show="loading"></u-loading>
					</view>
					<view v-else v-for="(item, index) in data.statementList" :key="index">
						<Statement :data="item" @click="handleClickCell"></Statement>
					</view>
				</view>
				<view class="list-view-empty" v-else>
					<u-image class="empty-image" :src="banner" width="374" height="246" mode="widthFix" :fade="false">
						<u-loading slot="loading"></u-loading>
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u-image>
					<text class="desc">本月没有流水信息</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let now = new Date(new Date().toLocaleDateString()).getTime();
	const baseinfo = {expectedAmount: 0, settledAmount: 0, statementList: []}
	import util from '@/utils/util.js'
	import Statement from "@/components/mine/statement.vue"
	export default {
		components: {
			Statement
		},
		data() {
			return {
				data: {
					expectedAmount: 0,
					settledAmount: 0,
					statementList: []
				},
				date: '',
				params: {
					starDate: null,
					endDate: null,
				},
				loading: true,
			}
		},
		computed: {
			info() {
				return {
					...this.data,
					number: this.data.statementList.length
				}
			},
			endTime() {
				this.moment().format('YYYY-MM-DD')
			},
			items() {
				return {
					expectedAmount: '预结（元）',
					settledAmount: '已确认（元）',
					number: '订单数（单）',
				}

			},
			imageUrl() {
				return process.uniEnv.qn_base_url
			},
			banner() {
				return this.qnFile('receipt.png')
			},
			hasInfo() {
				return this.loading || this.data.statementList && this.data.statementList.length
			},
		},
		onLoad() {
			getApp().trackPage('收入流水列表页')
			this.date = this.moment().format('YYYY-MM')
			this.loadStatement()
		},
		methods: {
			qnFile(src) {
				return process.uniEnv.qn_base_url + src
			},
			bindDateChange: function(e) {
			   this.date = e.target.value
			   this.loadStatement()
			},
			handleClickCell(orderId) {
				
				uni.navigateTo({
					url: 'pages/order/detail?isFromMine=1&id=' + orderId + '&type=other'
				})
			},
			async loadStatement() {
				let self = this
				self.loading = true
				let startTime = self.moment(self.date).format('YYYY-MM-DD')
				let endTime = self.moment(self.date).endOf('month').format('YYYY-MM-DD')
				self.params.starDate = startTime
				self.params.endDate = endTime
				let res = await self.$u.api.listStatement(self.params)
				self.loading = false
				if(res && res.code == 200) {
					let data = res.data
					self.data.settledAmount = data && data.settledAmount || 0
					self.data.expectedAmount = data && data.expectedAmount || 0
					self.data.statementList = data && data.orderList || []
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.statement-view {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #F4F5F7;
		.statement-conten {
		overflow: auto;

		.statement-content-view {
			margin: 10rpx 30rpx 30rpx 30rpx;
			border-radius: 12rpx;
			position: relative;
			
			border-radius: 12rpx;
			background-color: #FFFFFF;
				.head-back-image {
					position: relative;
					width: 100%;
					z-index: 0;
				}

			.head-view {
				z-index: 1;
				padding: 30rpx;
				color: #FFFFFF;
				
				position: absolute;
					width: 100%;

				.head-top-view {
					margin-top: 10rpx;
					margin-bottom: 50rpx;
					.date-input {
						.date-text {
							padding-right: 10rpx;
							font-size: 28rpx;
						}
					}
				}

				.head-bottom-view {
					
					display: flex;
					align-items: flex-start;
					justify-content: space-between;

					.head-amount-view {
						font-size: 24rpx;

						.head-amount-text {
							font-size: 40rpx;
							margin-top: 10rpx;
						}
					}
				}
			}
			.list-view {
				position: relative;
				z-index: 1;
				padding-bottom: 20rpx;
			}
			.list-view-empty {
				position: relative;
				z-index: 1;
				height: 680rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 142rpx;
				.empty-image {
					width: 376rpx;
				}
				.desc {
					margin-top: 48rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					line-height: 40px;
				}
			}
		}
		}
	}
</style>