<template>
	<view class="min-body">
		<u-cell-group :border="false">
			<u-cell :border="false">
				<view slot="title" class="lit-333 bold ad-bd" @click="showData = true">
					{{date}}
				</view>
				<!-- <view slot="value" class="lit-666">
					<view style="text-align: right;">
						本月支出：<text style="color: #2EA308;">￥{{dateData.expenditure}}</text>
					</view>
					<view style="text-align: right;">
						本月收入：<text style="color: #DB0808;">￥{{dateData.income}}</text>
					</view>
				</view> -->
			</u-cell>
		</u-cell-group>
		<view class="white-box" v-if="dataList.length > 0">
			<u-cell-group :border="false">
				<u-cell v-for="(item,index) in dataList" :key="index">
					<view slot="title" class="lit-333 bold">
						{{item.desc}}
					</view>
					<view class="lit-666" slot="label" style="margin-top: 20rpx;">
						{{item.create_time}}
					</view>
					<view slot="value" class="lit-333 bold">
						{{item.type == 0?'+':'-'}}￥{{item.amount/100}}
					</view>
				</u-cell>

			</u-cell-group>
		</view>
		<u-datetime-picker ref="datetimePicker" :show="showData" :minDate="minDate" :maxDate="maxDate" mode="year-month"
			@confirm="confirm" @close="showData = false" @cancel="showData = false"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		conWalletFlowAPI
	} from "@/request/recharge/index.js";
	import mixin from '@/static/js/mixin/mixin';
	export default {
		mixins: [mixin],
		data() {
			return {
				total: 0,
				date: "全部",
				page: 1,
				lock: true,
				dataList: [],
				dateData: {
					income: 0,
					expenditure: 0,
				},
				showData: false,
				minDate: "",
				maxDate: "",
				endyear: '',
			};
		},
		// onReady() {
		// 	this.$refs.datetimePicker.setFormatter(this.formatter)
		// },
		methods: {
			init() {
				// 初始化时需要格式化最大与最小选择时间，再次调用时不需要
				if (!this["minDate"] && !this["maxDate"]) {
					let d = new Date();
					let minDate = new Date("2022/01/01").getTime(),
						maxDate = new Date(
							`${d.getFullYear()}/${d.getMonth() + 1}/01`
						).getTime();
					this["minDate"] = minDate;
					this["maxDate"] = maxDate;
				};
				this.GetList();
			},
			/**
			 * @确认时间
			 *
			 */
			confirm(e) {
				let m = this["$u"].timeFormat(e["value"], "yyyy-mm");
				this["date"] = m;
				this["showData"] = false;
				this["page"] = 1;
				this.GetList();
			},
			/**
			 * @获取列表
			 */
			GetList() {
				let parameters = {
					date: this["date"] == "全部" ? "" : this["date"],
					page: this["page"],
				};
				conWalletFlowAPI(parameters).then((res) => {
					if (this["page"] == 1) {
						this["dataList"] = [];
					};
					// 合并列表
					this["dataList"] = this["dataList"].concat(res['data']['data']['data']);

					// 列表总数
					this["total"] = res['data']['data']['total'];

					// 本月支出/本月收入
					this["dateData"]["income"] = res['data']["income"] / 100;
					this["dateData"]["expenditure"] = res['data']["expenditure"] / 100;
					this["page"]++;
				});
			},

			/**
			 * @该项属于什么类型
			 */
			filterMf(item) {
				if (!item.type) {
					return `+ ${this.RetainDecimalPoint(item['amount'])}`
				} else {
					return `- ${this.RetainDecimalPoint(item['amount'])}`
				}
			}
		},
		onLoad() {
			this.init();
		},
		onReachBottom() {
			if (this["dataList"]['length'] >= this["total"]) return;
			this.GetList();
		},
	};
</script>

<style>
	.min-body {
		padding: 32rpx;
	}

	.white-box {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx 0;
		padding-bottom: 20rpx;
	}

	.ad-bd {
		border-radius: 20rpx;
		border: 2rpx solid #dedede;
		width: 186rpx;
		text-align: center;
		padding: 20rpx 0;
	}

	.top-infor {
		display: flex;
		justify-content: space-between;
	}
</style>
