<template>
    <z-paging ref="paging" v-model="balance.lists" @query="queryList" :fixed="false" height="100%">
        <!-- 余额明细列表 -->
        <view class="balance-details">
            <view v-for="(item, index) in balance.lists" :key="index">
                <view class="balance-details-item">
                    <view class="flex">
                        <view class="flex-1 balance-details-item-text">{{
                            item?.changeTypeDesc
                        }}</view>
                        <view
                            class="balance-details-item-amount"
                            :class="{ 'text-error': item.action === 0 }"
                        >
                            {{ item.actionDesc + item.changeAmount }}
                        </view>
                    </view>

                    <view class="balance-details-item-time">{{ item.remark }}</view>
                    <view class="balance-details-item-time">{{ item.createTime }}</view>
                </view>
            </view>
        </view>
    </z-paging>
</template>

<script lang="ts" setup>
import { reactive, watch, shallowRef } from 'vue'
import { apiAccountLogLists } from '@/api/wallet'
import { onLoad } from '@dcloudio/uni-app'

const props = withDefaults(
    defineProps<{
        status: string | number
        index: number
    }>(),
    {
        status: ''
    }
)

watch(
    () => props.index,
    async () => {
        paging.value.reload()
    },
    { immediate: true }
)

const balance = reactive({
    lists: [] as any,
    change_type: 1
})
// 下拉组件的Ref
const paging = shallowRef()
const queryList = async (pageNo = 1, pageSize = 10) => {
    try {
        const { lists } = await apiAccountLogLists({
            action: props.status,
            pageNo,
            pageSize
        })
        paging.value.complete(lists)
    } catch (e) {
        paging.value.complete(false)
    }
}

onLoad((options: any) => {
    balance.change_type = options.changeObject

    if (balance.change_type == 2) {
        uni.setNavigationBarTitle({
            title: '佣金明细'
        })
    }
})
</script>

<style lang="scss" scoped>
.balance-details {
    .balance-details-item {
        background-color: #fff;
        padding: 20rpx 30rpx;
        border-bottom: 1rpx solid #ebebeb;

        .balance-details-item-text {
            font-size: 30rpx;
            font-weight: 400;
        }

        .balance-details-item-amount-add {
            font-size: 34rpx;
            font-weight: 400;
            color: #ff0017;
        }

        .balance-details-item-amount {
            font-size: 34rpx;
            font-weight: 400;
        }

        .balance-details-item-time {
            font-size: 24rpx;
            font-weight: 400;
            color: #999;
            margin-top: 10rpx;
        }
    }
}
</style>
