<template>
    <BasePage>
        <van-tabs class="b_l_w f5" v-model:active="activeTab" animated :sticky="true" @change="onTabChange">
            <van-tab title="全部" name=""></van-tab>
            <van-tab v-for="item in states" :title="item.label" :name="item.value"></van-tab>
        </van-tabs>

        <div class="cashout-record-total b_l_w">
            累计提现：<b class="totalcash">{{ totalCash }}</b>
        </div>

        <van-list class="b_l_w" v-model:loading="loading" v-show="!isEmpty" :finished="finished" finished-text="没有更多了"
            @load="loadMore">
            <div class="record" v-for="item in list" :key="item.id">
                <img src="/img/cashout_record.svg" height="48" width="48" style="object-fit: cover;" />
                <div class="content">
                    <div class="title">
                        <span>{{ item.wdfromname }} -> {{ item.wdtoname }}</span>
                        <span class="time">{{ $formatGMT(item.wdaddtime, 'yyyy-MM-dd HH:mm:ss') }}</span>
                    </div>
                    <div class="info">
                        <span>{{ item.realname }} {{ item.bankname }}{{ item.bankcardnumber?.substr(-4) }}</span>
                        <van-tag :type="getStateType(item.wdstate)">
                            {{ item.wdstatename }}
                        </van-tag>
                    </div>
                    <div class="desc">
                        <span class="remark">手续费: ￥{{ item.wdfee }}</span>
                        <span class="amount">￥{{ item.wdnums }}</span>
                    </div>
                </div>
            </div>
        </van-list>

        <van-empty class="b_l_w" v-show="isEmpty" description="暂无数据" />
    </BasePage>
</template>

<script>
export default {
    name: 'CashoutRecord',
    data() {
        return {
            list: [],
            states: [],
            activeTab: '',
            loading: false,
            finished: false,
            page: 1,
            pageSize: 10,
            totalCash: 0,
            isEmpty: false,
        }
    },
    mounted() {
        this.getStates();
        this.loadMore();
    },
    methods: {
        back() {
            this.$router.push('/My');
        },
        onTabChange() {
            this.list = [];
            this.page = 1;
            this.finished = false;
            this.loadMore();
        },
        getStates() {
            this.$get('/v1/client/DUserwithdrawsClient/state').then(res => {
                this.states = res.data || [];
            }).catch(() => { });
        },
        loadMore() {
            if (this.loading) return;
            this.loading = true;
            this.$get('/v1/client/DUserwithdrawsClient', {
                page: this.page,
                pageSize: this.pageSize,
                state: this.activeTab,
            }).then(res => {
                const items = res.data?.items || [];
                // 当列表为空时 隐藏van-list
                if (items.length === 0) {
                    this.isEmpty = true;
                }
                else {
                    this.isEmpty = false;
                }
                this.list.push(...items);
                this.page++;
                this.finished = items.length < this.pageSize;
                // 计算累计提现
                if (this.page === 2) {
                    this.totalCash = items.reduce((sum, item) => sum + (item.wdnums || 0), 0);
                }
            }).catch(() => {
                this.finished = true;
            }).finally(() => {
                this.loading = false;
            });
        },
        getStateType(state) {
            const map = { 0: 'warning', 1: 'success', 2: 'danger', 3: 'default' };
            return map[state] || 'default';
        },
    }
}
</script>

<style scoped>
.van-list {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.cashout-record-total {
    padding: 3.333vw 0 0 6.667vw;
    margin-bottom: 3.33vw;
}

.totalcash {
    color: var(--van-danger-color);
}

.cashout-record {
    padding: 3.333vw;
}

.record {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 3.333vw;
    width: 93.333vw;
    background: #fff;
    padding: 1vw 2vw;
    border-radius: 1.333vw;
}

.record .content {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-height: 18.667vw;
    width: 100%;
    font-size: 3.333vw;
}

.record .amount {
    font-size: 4vw;
    font-weight: bold;
    color: var(--van-danger-color);
}

.record .title {
    display: flex;
    justify-content: space-between;
}

.record .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.record .desc {
    display: flex;
    justify-content: space-between;
}

.record .time,
.record .remark {
    color: #999;
}
</style>
