<template>
	<view class="money-running">
		<view class="money">
			<text>资金余额</text>
			<text class="num">￥{{ money }}</text>
		</view>
		<view class="picker">
			<picker mode="date" fields="month" :value="date" :end="end" @change="bindDateChange">
				<view class="uni-input">{{ date.split('-')[0] }}{{ ' - ' }}{{ date.split('-')[1] }}{{ '  >' }}</view>
			</picker>
		</view>
		<view v-if="list.length" class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @click="detail(item)">
				<view class="left">
					<image src="../../static/icon/money.png" ></image>
					<view>
						<text>{{ item.type | getRunningStatus }}</text>
						<text class="time">{{ item.updated_at }}</text>
					</view>
				</view>
				<view class="rihgt" :class="{ basecolor: item.type != 1 }">{{ (item.type == 1 || item.type == 3) ? '- ' : '+ ' }}{{ item.pay_money }}</view>
			</view>
		</view>
		<view v-else class="no">暂无流水</view>
	</view>
</template>

<script>
	import { _API_PurseRunning } from '@/apis/fortune.js'
	export default {
		data() {
			return {
				end: this.getDate({ format: true }),
				date: this.getDate({ format: true }),
				list: []
			};
		},
		filters: {
			getRunningStatus(status) { // 0表示后台充值，1表示支付，2表示退回,3,表示扣款
				switch (status.toString()) {
					case '0': 
						return '账户充值'
					case '1':
						return '购买商品'
					case '2':
						return '订单退款'
					case '3':
						return '后台扣款'
					default:
						return ''
				}
			}
		},
		computed: {
			money() { return this.$store.state.userinfo.money },
			timestamp() {
				return +(new Date(`${this.date.split('-')[0]}-${this.date.split('-')[1]}-01`)) / 1000 - 60 * 60 * 8
			}
		},
		mounted() {
			this.request()
		},
		methods: {
			request() {
				uni.loading()
				_API_PurseRunning({ time: this.timestamp }).then(({ data: { list } }) => {
					this.list = list
				})
			},
			getDate(type) {
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				month = month > 9 ? month : '0' + month
				day = day > 9 ? day : '0' + day
				return `${year}-${month}-${day}`
			},
			bindDateChange(e) {
				this.date = e.target.value
				setTimeout(() => this.request())
			},
			detail(item) {
				const key = Date.now().toString()
				uni.setStorageSync(key, JSON.stringify(item))
				uni.navigateTo({ url: `../money-running-detail/money-running-detail?key=${key}` })
			}
		}
	}
</script>

<style lang="scss">
	.money-running {
		height: 100vh;
		@include flex(column);
		background: $app-base-bg;
		justify-content: flex-start;
		.money {
			@include flex(column);
			color: #FFFFFF;
			font-size: 36rpx;
			width: 100%;
			height: 200rpx;
			background:linear-gradient(-59deg,rgba(247,115,84,1) 0%,rgba(249,162,114,1) 100%);
			.num {
				font-size: 60rpx;
			}
		}
		.picker {
			width: 100%;
			height: 98rpx;
			margin: 10rpx 0;
			background: #FFFFFF;
			picker {
				@include flex();
				height: 100%;
			}
		}
		.no {
			flex: 1;
			width: 100%;
			@include flex();
		}
		.list {
			flex: 1;
			width: 100%;
			overflow: auto;
			.item {
				height: 90rpx;
				background: #FFFFFF;
				margin-bottom: 1rpx;
				box-sizing: border-box;
				padding: 13rpx 30rpx;
				@include flex();
				justify-content: space-between;
				font-size: 32rpx;
				.left {
					@include flex();
					> view {
						@include flex(column);
						align-items: flex-start;
						margin-left: 16rpx;
						text {
							font-size: 28rpx;
							&.time {
								font-size: 24rpx;
								color: #666666;
							}
						}
					}
					image {
						width: 64rpx;
						height: 64rpx;
					}
				}
			}
		}
	}
</style>
