<template>
	<view>
		<wd-navbar title="我的账单" :bordered="false" left-arrow custom-style="background-color: transparent !important;" safeAreaInsetTop @click-left="back"></wd-navbar>
		<z-paging ref="paging" :refresher-enabled="showLoading" v-model="dataList" use-page-scroll @query="queryList">
			<view class="p30">
				
				
				
				<view>
					<view style="display: flex; align-items: center; justify-content: space-between">
						<image style="width: 74rpx; height: 34rpx" mode="widthFix" src="/static/icons/zhangdan.png"></image>

						<wd-picker @close="showLoading = true" @open="showLoading = false" :columns="columns" v-model="queryPrams.bizType" use-default-slot @confirm="handleConfirm">
							<view style="display: flex; align-items: center; font-size: 28rpx">
								{{ typeName || '筛选' }}
								<image style="margin-left: 15rpx; width: 35rpx; height: 35rpx" src="/static/icons/xia.png"></image>
							</view>
						</wd-picker>
					</view>

					<view class="wall_list" v-for="(item, index) in dataList" :key="index">
						<view>
							<view style="margin-bottom: 25rpx; font-size: 28rpx">{{ item.title }}</view>
							<view style="font-size: 24rpx; color: #999">
								{{ timeFormat(item.createTime, 'yyyy-MM-dd hh:mm:ss') }}
							</view>
						</view>
						<view style="font-size: 32rpx; font-weight: bold; color: #799675">￥{{ item.money }}</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import api from '@/api/index';
import { Store } from '@/store';
const store = Store();
const paging = ref(null);
const dataList = ref([]);
const columns = ref([]);

const showLoading = ref(true);

const typeName = ref('');

const queryPrams = ref({
	bizType: ''
});

const userInfo = computed(
	() =>
		store.userInfo || {
			inviteCode: '',
			nickname: '',
			mobile: '',
			avatar: '',
			paywallet: {
				balance: 0
			}
		}
);

import { timeFormat } from '@/utils/fun.js';

const queryList = (pageNo, pageSize) => {
	api.moneyRecord({ pageNo, pageSize, ...queryPrams.value })
		.then((res: any) => {
			columns.value = Object.entries(res.bizType).map(([value, label]) => ({
				value,
				label
			}));
			columns.value.unshift({
				label: '全部',
				value: ''
			});
			paging.value.complete(res.list);
		})
		.catch((res) => {
			paging.value.complete(false);
		});
};

const handleConfirm = (e) => {
	if (!e.value) {
		typeName.value = '';
	} else {
		typeName.value = e.selectedItems.label;
	}
	paging.value.reload();
};

const back = () => {
	uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.block_wall {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	&_tit {
		display: flex;
		align-items: center;
	}
}

.wall_list {
	width: 690rpx;
	height: 118rpx;
	background: #ffffff;
	box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(0, 88, 219, 0.06);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	margin-top: 30rpx;
}
</style>
