<template>
    <page-meta page-style="background-color: #005fff">
        <!-- #ifndef H5 -->
        <navigation-bar front-color="#ffffff" background-color="#005fff" />
        <!-- #endif -->
    </page-meta>
    <z-paging ref="paging" v-model="dataList" @query="queryList" :show-loading-more-when-reload="true">
        <view class="user-wallet">
            <view class="wallet-header">
                <view class="wallet-header__card">
                    <view class="wallet-header__label">钱包余额</view>
                    <view class="wallet-header__amount">{{ wallet.user_money || '0.00' }}</view>
                    <view class="wallet-header__row">
                        <view class="wallet-header__item">
                            <text class="wallet-header__item-label">总收益</text>
                            <text class="wallet-header__item-value">{{ wallet.total_income || '0.00' }}</text>
                        </view>
                        <view class="wallet-header__item">
                            <text class="wallet-header__item-label">佣金比例</text>
                            <text class="wallet-header__item-value">{{ wallet.commission_rate || '0' }}%</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="wallet-card">
                <view class="wallet-tabs">
                    <view v-for="(tab, idx) in tabList" :key="idx" class="wallet-tabs__item"
                        :class="{ 'wallet-tabs__item--active': current === idx }" @tap="changeType(idx)">
                        <text>{{ tab.name }}</text>
                    </view>
                </view>

                <view v-for="item in dataList" :key="item.id"
                    class="border-solid border-b border-0 border-light px-[26rpx] py-[24rpx]">
                    <view class="flex justify-between items-start">
                        <view>
                            <view class="text-[28rpx] font-medium">{{ item.type_desc }}</view>
                            <view class="text-[24rpx] text-muted mt-[6rpx]">{{ item.create_time }}</view>
                        </view>
                        <view class="text-right">
                            <view class="text-[32rpx] font-bold"
                                :class="item.action == 1 ? 'text-primary' : 'text-[#333]'">
                                {{ item.change_amount_desc }}
                            </view>
                            <view v-if="item.left_amount !== undefined" class="text-[22rpx] text-muted mt-[4rpx]">
                                剩余 {{ item.left_amount }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </z-paging>
</template>

<script lang="ts" setup>
import { ref, shallowRef } from 'vue'
import { accountLog } from '@/api/user'
import { rechargeConfig } from '@/api/recharge'
import { onShow } from '@dcloudio/uni-app'
const tabList = ref([
    {
        name: '全部',
        type: ''
    },
    {
        name: '收入',
        type: 1
    },
    {
        name: '支出',
        type: 2
    }
])
const paging = shallowRef()
const dataList = ref<any[]>([])
const current = ref(0)

const changeType = (index: number) => {
    current.value = index
    paging.value.reload()
}

const queryList = async (pageNo: number, pageSize: number) => {
    try {
        const action = tabList.value[current.value].type
        const data = await accountLog({
            action,
            type: 'um',
            page_no: pageNo,
            page_size: pageSize
        })
        paging.value.complete(data.lists)
    } catch (error) {
        paging.value.complete(false)
    }
}

const wallet = ref<any>({})
const getWallet = async () => {
    wallet.value = await rechargeConfig()
}
onShow(() => {
    getWallet()
})
</script>

<style lang="scss" scoped>
.user-wallet {
    background: #f5f5f5;
    min-height: 100vh;
}

.wallet-header {
    background: linear-gradient(to bottom, #005fff 60%, #f5f5f5 60%);
    padding: 20rpx 40rpx 0rpx;

    &__card {
        background: #fff;
        border-radius: 20rpx;
        padding: 10rpx 32rpx 0;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
    }

    &__label {
        font-size: 24rpx;
        color: #999;
    }

    &__amount {
        font-size: 64rpx;
        font-weight: 700;
        color: #222;
        margin-top: 8rpx;
    }

    &__row {
        display: flex;
        gap: 48rpx;
        margin-top: 28rpx;
        padding: 28rpx 0;
        border-top: 1rpx solid #f0f0f0;
    }

    &__item {
        display: flex;
        flex-direction: column;
    }

    &__item-label {
        font-size: 22rpx;
        color: #999;
    }

    &__item-value {
        font-size: 32rpx;
        font-weight: 600;
        color: #222;
        margin-top: 4rpx;
    }
}

.wallet-card {
    margin: 20rpx 40rpx 0;
    background: #fff;
    border-radius: 20rpx;
    overflow: hidden;
}

.wallet-tabs {
    display: flex;
    border-bottom: 1rpx solid #f0f0f0;

    &__item {
        flex: 1;
        text-align: center;
        padding: 24rpx 0;
        font-size: 28rpx;
        color: #999;
        position: relative;
        transition: all 0.2s;

        &--active {
            color: #0053d8;
            font-weight: 600;

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 4rpx;
                background: #0053d8;
            }
        }
    }
}
</style>
