<template>
    <view>
        <z-paging :use-page-scroll="true" ref="paging" v-model="listData" @query="queryList">
            <view class="flex items-center pt-[40rpx] pb-[28rpx]">
                <view class="block"></view>
                <view class="text-xl font-medium ml-2">账户流水</view>
            </view>
            <view class="mt-4">
                <view
                    v-for="(item, index) in listData"
                    :key="index"
                    class="bg-white px-[20rpx] py-[40rpx] mb-3 rounded-lg flex items-center"
                >
                    <u-image :src="cashOutIcon" width="80rpx" height="80rpx"></u-image>
                    <view class="ml-3 flex flex-col justify-between">
                        <view class="font-medium text-xl">{{ item.change_type_desc }}</view>
                        <view class="text-xs text-muted mt-2">{{ item.create_time }}</view>
                    </view>
                    <view class="font-bold text-2xl ml-auto">
						<text :class="item.action == 1 ? 'text-primary' : 'text-[#E86016]'">
						    {{ item.action == 1 ? '+' : '-' }}{{ item.change_amount }}
						</text>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script lang="ts" setup>
import { userMoneyList } from '@/api/account'
import { ref, shallowRef, watch } from 'vue'
import cashOutIcon from '@/packages/static/images/cashOutIcon.png'
import { onReachBottom } from '@dcloudio/uni-app'
import { WithdrawEnum } from '@/enums/withdraw'

const props = defineProps<{
    scrollTop: number
}>()

const paging = shallowRef()
const listData = ref<any>([])

const queryList = async (page_no: number, page_size: number) => {
    try {
        const res = await userMoneyList({ 
			page_no,
			page_size,
			type: WithdrawEnum.COMMISSION
		})
        console.log(res.lists)

        paging.value.complete(res.lists)
    } catch (e) {
        console.log('报错=>', e)
        //TODO handle the exception
        paging.value.complete(false)
    }
}

watch(() => props.scrollTop, (v) => {
    paging.value?.updatePageScrollTop(v)
})

// 底部刷新
onReachBottom(() => {
    paging.value?.doLoadMore()
})
</script>

<style lang="scss" scoped>
.block {
    width: 8rpx;
    height: 32rpx;
    background-color: #0b66ef;
}
</style>
