<template>
	<view class="layout">
		<view class="header">
			<view @click="showTimeSelect" class="header-left">
				<text class="header-time">{{ applyDate }}</text>
				<image class="time-bottom-row" src="../../static/icon-bottom-row.png"></image>
			</view>
			<view class="header-right">
				<text :class="currentTab == 0 ? 'tab-select' : 'tab-unselect'" @click="selectTab(0)">综合</text>
				<text :class="currentTab == 200 ? 'tab-select' : 'tab-unselect'" @click="selectTab(200)">支出￥{{ allConsume }}</text>
				<text :class="currentTab == 100 ? 'tab-select' : 'tab-unselect'" @click="selectTab(100)">收入￥{{ allIncome }}</text>
			</view>
		</view>
		<view v-if="integralList.length > 0" class="list">
			<view class="item" v-for="(item, index) in integralList" :key="index">
				<image class="icon" :src="item.img"></image>
				<view class="item-right">
					<view class="item-right-top">
						<view class="item-title">
							<text class="item-type">{{ item.tag }}</text>
							<text class="item-name">{{ item.title }}</text>
							<text class="item-count">{{ item.number <= 0 ? '' : '*' + item.number }}</text>
						</view>
						<text :class="item.integral > 0 ? 'item-integral' : 'item-integral-income'">{{ item.integral }}</text>
					</view>
					<view class="item-right-bottom">
						<text class="item-time">{{ item.transactionTime }}</text>
						<text class="item-integral-rest">积分余额： {{ item.surplusIntegral }}</text>
					</view>
					<view class="line"></view>
				</view>
			</view>
			<uni-load-more v-if="integralList.length > 0" :status="loadingType"></uni-load-more>
		</view>
		<view v-else-if="!isLoading && integralList.length <= 0" class="empty">
			<image class="empty-icon" src="../../static/integral-empty-icon.png"></image>
			<text class="empty-desc">本月暂时没有支出积分哦</text>
		</view>
		<uni-popup class="pop" ref="timeShow" type="bottom" background-color="#fff" safeArea="true">
			<text class="selectTime" @click="selectTime()">确定</text>
			<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
				</picker-view-column>
			</picker-view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		const date = new Date();
		const years = [];
		const year = date.getFullYear();
		const months = [];
		const month = date.getMonth() + 1;
		const days = [];
		const day = date.getDate();
		for (let i = year - 4; i <= date.getFullYear(); i++) {
			years.push(i);
		}
		for (let i = 1; i <= date.getMonth() + 1; i++) {
			months.push(i);
		}
		return {
			integralList: [],
			// 明细类型(0:综合;100:收入;200:支出)
			currentTab: 0,
			applyDate: '',
			page: 1,
			pageSize: 20,
			loadingType: 'more',
			isLoading: true,
			allConsume: '',
			allIncome: '',
			title: 'picker-view',
			years,
			year,
			months,
			month,
			days,
			date: new Date(),
			value: [9999, month - 1],
			indicatorStyle: `height: 50rpx;`,
			tmpYear: '',
			tmpMonth: ''
		};
	},
	created() {
		this.getData(false);
	},
	methods: {
		getData(isRefresh) {
			this.isLoading = true;
			if (isRefresh) {
				this.page = 1;
				this.loadingType = 'more';
				this.integralList = [];
			}
			this.$net
				.post('/integral/index', { page: this.page, pageSize: this.pageSize, applyDate: this.applyDate, type: this.currentTab })
				.then(res => {
					if (res.data.list.length > 0) {
						this.integralList = this.integralList.concat(res.data.list);
						this.applyDate = res.data.applyDate;
						this.allConsume = res.data.allConsume;
						this.allIncome = res.data.allIncome;
						this.page += 1;
					}
					this.loadingType = res.data.list.length < this.pageSize ? 'noMore' : 'more';
					this.isLoading = false;
				})
				.catch(err => {
					this.isLoading = false;
				});
		},
		selectTab(type) {
			this.currentTab = type;
			this.getData(true);
		},
		showTimeSelect() {
			this.$refs.timeShow.open()
		},
		selectTime() {
			this.year = this.tmpYear
			this.month = this.tmpMonth
			this.applyDate = this.year + "-" + this.month
			this.$refs.timeShow.close()
			this.getData(true)
		},
		bindChange(e) {
			console.log(e);
			const val = e.detail.value
			this.tmpYear = this.years[val[0]]
			if(this.tmpYear == this.date.getFullYear()) {
				this.months =  []
				for (let i = 1; i <= this.date.getMonth() + 1; i++) {
					this.months.push(i);
				}
			} else {
				this.months = []
				for (let i = 1; i <= 12; i++) {
					this.months.push(i);
				}
			}
			if(this.months[val[1]] > this.date.getMonth() + 1) {
				this.tmpMonth = this.date.getMonth() + 1
				this.month = this.date.getMonth() + 1
			} else {
				this.tmpMonth = this.months[val[1]]
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.layout {
	width: 100%;
	height: 100%;
	position: relative;
	background: #f5f5f5;
	.header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: sticky;
		height: 100rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		.header-left {
			display: flex;
			flex-direction: row;
			align-items: center;
			.header-time {
				font-size: 30rpx;
				font-weight: bolder;
				color: #333333;
			}
			.time-bottom-row {
				width: 20rpx;
				height: 14rpx;
				margin-left: 15rpx;
			}
		}
		.header-right {
			display: flex;
			flex-direction: row;
			.tab-select {
				font-size: 24rpx;
				font-weight: bolder;
				color: #333333;
				margin-left: 24rpx;
			}
			.tab-unselect {
				font-size: 24rpx;
				color: #999999;
				margin-left: 24rpx;
			}
		}
	}
	.list {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: #ffffff;
		.item {
			display: flex;
			flex-direction: row;
			margin-top: 34rpx;
			.icon {
				width: 90rpx;
				height: 90rpx;
				background: #ffffff;
				border: 2px solid #efefef;
				border-radius: 50%;
				margin-left: 30rpx;
			}
			.item-right {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				flex: 1;
				.item-right-top {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					margin-right: 30rpx;
					.item-title {
						display: flex;
						flex-direction: row;
						.item-type {
							font-size: 30rpx;
							color: #333333;
						}
						.item-name {
							max-width: 250rpx;
							font-size: 30rpx;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.item-count {
							font-size: 30rpx;
							color: #333333;
						}
					}
					.item-integral {
						font-size: 30rpx;
						font-weight: bolder;
						color: #333333;
					}
					.item-integral-income {
						font-size: 30rpx;
						font-weight: bolder;
						color: #ff0520;
					}
				}
				.item-right-bottom {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-right: 30rpx;
					align-items: center;
					margin-top: 24rpx;
					.item-time {
						font-size: 26rpx;
						color: #999999;
					}
					.item-integral-rest {
						font-size: 26rpx;
						color: #999999;
					}
				}
				.line {
					height: 2rpx;
					background: #f5f5f5;
					width: 100%;
					margin-top: 34rpx;
				}
			}
		}
	}
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;
		background: #ffffff;
		.empty-icon {
			width: 364rpx;
			height: 300rpx;
			margin-top: 180rpx;
		}
		.empty-desc {
			font-size: 28rpx;
			color: #999999;
			line-height: 28rpx;
			margin-top: 49rpx;
		}
	}
	.pop {
		.selectTime {
			text-align: right;
			color: #FF0520;
			font-size: 24rpx;
			position: absolute;
			right: 0;
			top: 0;
			height: 48rpx;
			line-height: 48rpx;
			margin-right: 30rpx;
			z-index: 999;
		}
		.picker-view {
			// width: 750rpx;
			height: 500rpx;
			margin-top: 20rpx;
		}
		.item {
			height: 50rpx;
			align-items: center;
			justify-content: center;
			text-align: center;
			line-height: 50rpx;
		}
	}
}
</style>
