<template>
	<view class="settlement-view">
		<u-navbar back-icon-color="#333333" background="#F4F5F7" title="结算账单" titleColor="#333333"
			:border-bottom="false" title-bold></u-navbar>
		<view class="settlement-conten">
			<view class="settlement-content-view">
				<view class="head-view">
					<view class="head-top-view">
						<picker mode="date" :value="date" fields="month" @change="bindDateChange">
						    <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 u-flex u-row-between">
						<view class="head-amount-view">
							<view><text>已结算金额（元）</text></view>
							<view class="head-amount-text"><text>{{info.totalAmount || 0}}</text></view>
						<!-- <view class="head-amount-view">
							<view><text>待结算金额（元）</text></view>
							<view class="head-amount-text"><text>{{info.waitPaidAmount || 0}}</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 info.payableRecordExtendDtos" :key="index">
						<Settlement :data="item" @open="openItemizedBills"></Settlement>
					</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();
	import util from '@/utils/util.js'
	import Settlement from "@/components/mine/settlement.vue"
	const baseinfo = {totalAmount: 0, waitPaidAmount: 0, payableRecordExtendDtos: []}
	export default {
		components: {
			Settlement
		},
		data() {
			return {
				loading: true,
				info: baseinfo,
				date: '',
				params: {
					payableRecordStatus: null,
					startDate: null,
					endDate: null,
				},
			}
		},
		computed: {
			imageUrl() {
				return process.uniEnv.qn_base_url
			},
			hasInfo() {
				return this.loading || this.info.payableRecordExtendDtos && this.info.payableRecordExtendDtos.length
			},
			banner() {
				return this.qnFile('receipt.png')
			},
		},
		onLoad() {
			getApp().trackPage('结算账单列表页')
			this.date = this.moment().format('YYYY-MM')
			this.loadPayRecord()
		},
		methods: {
			qnFile(src) {
				return process.uniEnv.qn_base_url + src
			},
			async loadPayRecord() {
				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.startDate = startTime
				self.params.endDate = endTime
				let res = await self.$u.api.listPayableRecordByPayTime(self.params)
				self.loading = false
				if(res && res.code == 200) {
					self.info = res.data && res.data[self.date] || baseinfo
				}
			},
			bindDateChange: function(e) {
			    this.date = e.target.value
				this.loadPayRecord()
			},
			openItemizedBills(payableRecordId) {
				this.$u.route({url: "pages/mine/wallet/itemizedBills", params: {payableRecordId: payableRecordId}})
			},
		}
	}
</script>

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

		.settlement-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>
