<template>
	<view class="wallet">
		<view class="bg"></view>
		<view class="block">
			<view class="bg-white balance u-m-l-16 u-m-r-16 br24 column-center">
				<view>账户余额(元)</view>
				<view class="u-m-t-14 bold-600 xxl">￥ {{ wallet.user_money }}</view>
			</view>
			
			<view class="bg-white wallet-btn u-m-t-24 u-m-l-16 u-m-r-16 row-between br24">
				<view v-if="wallet.open_racharge == 1">
					<navigator hover-class="none" url="/pages/recharge/balance" class="row">
						<u-image :src="cloudPath + 'img/icon_my_wallet.png'" width="56" height="56"></u-image>
						<text class="u-m-l-18 nr">充值</text>
					</navigator>
				</view>
				<view v-if="wallet.open_racharge == 1">
					<u-line color="#EEE" direction="col" length="60"/>
				</view>
				<view>
					<navigator hover-class="none" url="/pages/recharge/record" class="row">
						<u-image :src="cloudPath + 'img/icon_my_wallet_record.png'" width="56" height="56"></u-image>
						<text class="u-m-l-18 nr">充值记录</text>
					</navigator>
				</view>
			</view>
			
			<view class="list bg-white br16 u-p-32" style="height: 962rpx;">
				<view class="lg">钱包明细</view>
				<scroll-view scroll-y="true" style="height: 880rpx;" :refresher-enabled="true" 
					:refresher-triggered="isRefreshing"
					@refresherrefresh="refreshCallback"
					@scrolltolower="upCallback">
					<view class="u-m-t-16">
						<view class="u-m-b-16" v-for="(item, index) in lists" :key="index">
							<view class="nr row-between">
								<view>{{ item.source_type }}</view>
								<view class="deduct">{{ item.change_amount }}</view>
							</view>
							<view class="date xs u-m-t-16">{{ item.change_amount }}</view>
						</view>
					</view>
					<loading-footer :status="loadingStatus"></loading-footer>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
import { getWallet, getAccountLog } from '@/api/user'
import { loadingType } from "@/utils/type"
import { loadingFun } from "@/utils/tools"
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			wallet: {},
			page: 1,
			loadingStatus: loadingType.LOADING,
			lists: [],
			isRefreshing: false // 控制刷新状态
		}
	},
	onLoad() {
		this.getWalletFun()
		this.upCallback()
	},
	methods: {
		refreshCallback() {
			this.isRefreshing = true;
			this.page = 1
			this.lists = []
			this.loadingStatus = loadingType.LOADING
			this.upCallback()
		},

		// 初始化数据
		upCallback() {
			let {
				lists,
				loadingStatus,
				page
			} = this;
			loadingFun(getAccountLog, page, lists, loadingStatus, { source: 1, type: 0}).then(res => {
				if(res) {
					setTimeout(() => {
						this.isRefreshing = false;
					}, 500);
					this.page = res.page;
					this.lists = res.dataList
					this.loadingStatus = res.status
				}
			})
		},

		// 获取钱包数据
		getWalletFun() {
			getWallet().then(res => {
				this.wallet = res.data
				console.log("wallet>>>", this.wallet);
			})
		}
	}
}
</script>

<style lang="scss">
	.wallet {
		position: relative;
	}
	.bg {
		position: absolute;
		left: 0;
		right: 0;
		background-color: #517AAD;
		height: 320rpx;
	}
	
	.block {
		position: absolute;
		top: 24rpx;
		left: 0;
		right: 0;
	}
	
	.balance {
		height: 209rpx;
	}
	
	.wallet-btn {
		height: 150rpx;
		padding: 0 100rpx;
	}
	
	.list {
		margin: 22rpx 34rpx;
		height: 962rpx;
		box-shadow: 0rpx 6rpx 28rpx 4rpx rgba(0, 0, 0, 0.05);
	}
	
	.deduct {
		color: rgba(0, 0, 0, 0.6)
	}
	
	.date {
		color: rgba(0, 0, 0, 0.4)
	}
</style>