<template>
	<view class="container">
		<view v-if="data.list.length" v-for="(item, index) in data.list" :key="index" class="item">
			<view>
				
				<view style="color: #000000;font-size: 28upx;">
					<view style="margin-bottom: 8upx;"> 类型： {{item.title}}</view>
					<view style="margin-bottom: 8upx"> 内容： {{item.content}}</view>
					<view style="margin-bottom: 8upx"> 时间： {{item.createTime}}</view>
					<view style="margin-bottom: 8upx;text-align: right;">
						<!-- 提现金额： -->
						<text v-if="item.type===2" style="color: #666;font-size: 32upx;font-weight: 600"> - ￥{{item.money}}</text>
						<text v-if="item.type===1" style="color: #FD6416;font-size: 32upx;font-weight: 600">+ ￥{{item.money}}</text>
					</view>
				</view>

			</view>
		</view>
		<emprty-card v-if="!data.list.length" />

	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import { onLoad,onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import { queryUserMoneyDetails } from '@/api/me/withdraw.js';
	
	let data = reactive({
		list: [],
		page: 1,
		limit: 10,
		totalCount: 0,
		moneyType: null,
		viewType: null,
	})
	
	onLoad((options) => {
		if (options.moneyType) {
			data.moneyType = options.moneyType
			uni.setNavigationBarTitle({
				title: options.moneyType == 1 ? '红包明细' : '金币明细'
			});
		}
		if (options.viewType) {
			data.viewType = options.viewType
		}
		getMoney();
	})
	
	function getMoney() {
		queryUserMoneyDetails({
			page : data.page,
			limit : data.limit,
			moneyType : data.moneyType,
			viewType: data.viewType,
		}).then(res => {
			data.totalCount = res.totalCount;
			if ( res.records.length > 0) {
				data.list = [...data.list,...res.records];
			}
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
		})
	}
	onReachBottom(() => {
		if (data.page*data.limit < data.totalCount) {
			data.page = data.page + 1;
			getMoney();
		}
	})
	onPullDownRefresh(() => {
		data.page = 1;
		data.list = []
		data.getMoney();
	})
	
</script>

<style lang='scss' scoped>
	/* @import "../../static/css/index.css"; */

	page {
		background: #FFFFFF;
	}

	.item {
		background: white;
		padding: 32rpx;
		margin: 32rpx;
		font-size: 28rpx;
		box-shadow: 7px 9px 34px rgba(0, 0, 0, 0.1);
		border-radius: 16upx;
	}
	
	.centre {
		text-align: center;
		padding: 200rpx 0;
		font-size: 32rpx;
		box-sizing: border-box;
		image {
			width: 360rpx;
			height: 360rpx;
			// margin-bottom: 20rpx;
			margin: 0 auto 20rpx;
			// border: 1px dotted #000000;
		}
		.tips {
			font-size: 34rpx;
			color: #999999;
			margin-top: 20rpx;
		}
		.btn {
			margin: 80rpx auto;
			width: 600rpx;
			border-radius: 32rpx;
			line-height: 90rpx;
			color: #ffffff;
			font-size: 34rpx;
			background: #5074FF;
		}
	}
</style>
