<template>
	<view class="wanl-money">
		<view class="edgeInsetTop"></view>
		<view class="cu-list menu-avatar" v-if="dataList">
			<view class="cu-item" v-for="(item, index) in dataList" :key="item.id" @tap="toMoney(item)">
				<view class="cu-avatar round bg-blue" v-if="item.type == 'pay'">
					<text class="wlIcon-baojiadan"></text>
				</view>
				<view class="cu-avatar round bg-red" v-if="item.type == 'groups'">
					<text class="wlIcon-baojiadan"></text>
				</view>
				<view class="cu-avatar round bg-cyan" v-else-if="item.type == 'recharge'">
					<text class="wlIcon-zhanghuyue"></text>
				</view>
				<view class="cu-avatar round bg-orange" v-else-if="item.type == 'withdraw'">
					<text class="wlIcon-jinbitixian"></text>
				</view>
				<view class="cu-avatar round bg-pink" v-else-if="item.type == 'refund'">
					<text class="wlIcon-jingjiachenggong"></text>
				</view>
				<view class="cu-avatar round bg-red" v-else>
					<text class="wlIcon-fuwuqi1"></text>
				</view>
				<view class="content">
					<view class="text-sm flex">
						<view class="text-cut">
							{{ item.memo }}
						</view>
					</view>
					<view class="wanl-gray text-sm text-bold">{{ item.type_text || payType[item.type] || $t('money.other') }}</view>
					<view class="wanl-gray text-sm">
						{{ item.createtime_text || ($appKit && $appKit.timeToDate(item.createtime)) }}
					</view>
				</view>
				<view class="action">
					<view class="text-lg" :class="item.diamond > 0 ? 'wanl-orange' : 'wanl-black'">{{ item.diamond > 0 ? '+' + item.diamond : item.diamond }}</view>
				</view>
			</view>
		</view>
		<view v-if="dataList.length == 0">
			<empty src="ticket_default3x" :text="$t('money.emptyBillList')" />
		</view>
		<view class="edgeInsetBottom"></view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
import { getDiamondLog } from '@/features/mall/gateway/money.js'

export default {
	data() {
		return {
			dataList: [],
			payType: {
				pay: this.$t('money.payTypes.pay'),
				groups: this.$t('money.payTypes.groups'),
				recharge: this.$t('money.payTypes.recharge'),
				withdraw: this.$t('money.payTypes.withdraw'),
				refund: this.$t('money.payTypes.refund'),
				sys: this.$t('money.payTypes.sys')
			},
			reload: false,
			total: 0,
			current_page: 1,
			last_page: 1,
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: this.$t('money.loading'),
				contentnomore: ''
			}
		}
	},
	onLoad() {
		this.loadData()
	},
	onPullDownRefresh() {
		this.current_page = 1
		this.reload = true
		this.loadData()
	},
	onReachBottom() {
		if (this.current_page >= this.last_page) {
			this.status = 'noMore'
		} else {
			this.reload = false
			this.current_page = this.current_page + 1
			this.status = 'loading'
			this.loadData()
		}
	},
	methods: {
		async loadData() {
			try {
				const data = await getDiamondLog({
					type: '0',
					page: this.current_page
				})
				uni.stopPullDownRefresh()
				const rows = (data && Array.isArray(data.data)) ? data.data : (Array.isArray(data) ? data : [])
				this.dataList = this.reload ? rows : this.dataList.concat(rows)
				this.total = Number((data && data.total) || rows.length) || 0
				this.current_page = Number((data && data.current_page) || this.current_page) || 1
				this.last_page = Number((data && data.last_page) || this.current_page) || 1
				this.status = this.total == 0 ? 'noMore' : 'more'
			} catch (error) {
				uni.stopPullDownRefresh()
				console.error('Load diamond log error:', error)
				this.status = 'more'
			}
		},
		toMoney(item) {
			if (this.$appKit && this.$appKit.to) {
				this.$appKit.to(`/pages/user/money/details?data=${JSON.stringify(item)}`)
			} else {
				uni.navigateTo({
					url: `/pages/user/money/details?data=${encodeURIComponent(JSON.stringify(item))}`
				})
			}
		}
	}
}
</script>

<style>
.wanl-money .balance {
	margin: 10rpx 25rpx 25rpx 25rpx;
}

.wanl-money .balance .details {
	padding: 50rpx 0;
}

.wanl-money .balance .operate {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: rgba(0, 0, 0, 0.1);
	height: 80rpx;
	color: #fff;
}

.wanl-money .cu-list.menu-avatar > .cu-item {
	height: 180rpx;
	align-items: flex-start;
	padding: 25rpx 0;
}

.wanl-money .cu-list.menu-avatar > .cu-item .cu-avatar {
	width: 75rpx;
	height: 75rpx;
	left: 25rpx;
	margin-top: 6rpx;
}

.wanl-money .cu-list.menu-avatar > .cu-item .content {
	left: 120rpx;
	width: calc(100% - 75rpx - 25rpx - 150rpx);
	line-height: 1.5em;
}

.wanl-money .cu-list.menu-avatar > .cu-item .action {
	width: 220rpx;
	text-align: right;
	padding-right: 25rpx;
}
</style>
