<template>
    <div class="list">
        <div class="top">
            <van-tabs
                v-model="chooseTab"
                title-active-color="#FF7900"
                :line-height="2"
                title-inactive-color="#000000"
                @click="tabClick"
            >
                <van-tab :title="item" v-for="(item, index) in tabList" :key="index"></van-tab>
            </van-tabs>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
            <div class="content">
                <van-list v-model="loading" :finished="finished" :finished-text="$t('common.loadFinish')" @load="onLoad">
                    <div class="order-list">
                        <record v-for="(item, index) in list" :info="item" :key="index"></record>
                        <!-- <record></record>
             <record></record> -->
                    </div>
                </van-list>
            </div>
        </van-pull-refresh>
    </div>
</template>
<script>
import { mapState } from 'pinia'
import { useUserStore } from '@/stores/user'
import record from '@/components/Record.vue'
export default {
    name: 'CommissionRecord',
    data() {
        return {
            chooseTab: 0,
            priceDirection: 0,
            list: [],
            refreshing: false,
            loading: false,
            finished: false,
            tabList: ['全部', '待审核', '待打款', '已打款', '无效'],
            status: ['', 'PENDING', 'WAIT_TRANSFER', 'TRANSFERRED', 'CANCELED'],
            page: 0,
            size: 20
        }
    },
    computed: {
        ...mapState(useUserStore, ['user'])
    },
    created() {
        this.onLoad()
    },
    methods: {
        onRefresh() {
            this.page = 0
            this.refreshing = true
            this.loading = false
            this.finished = false
            this.getData().then(_ => {
                this.refreshing = false
            })
        },
        onLoad() {
            this.refreshing = false
            this.loading = true
            this.finished = false
            this.getData().then(_ => {
                this.refreshing = false
            })
        },
        tabClick(name, title) {
            this.page = 0
            this.list = []
            this.loading = false
            this.isLoading = false
            this.finished = false
        },
        getData() {
            var data = {
                page: this.page,
                size: 20
            }
            if (this.status[this.chooseTab]) {
                data.query = {
                    status: this.status[this.chooseTab],
                    userId: this.user.id
                }
            } else {
                data.query = {
                    userId: this.user.id
                }
            }
            return this.$http
                .post('/withdrawApply/all', data)
                .then(res => {
                    if (res.first) {
                        this.list = []
                    }
                    this.list = this.list.concat(res.content)
                    this.loading = false
                    if (res.last) {
                        this.finished = true
                    } else {
                        this.page++
                    }
                })
                .catch(e => {})
        }
    },
    components: {
        record
    }
}
</script>
<style lang="less" scoped>
.list {
    background-color: #f2f4f5;
}
.top {
    position: sticky;
    top: 0;
    z-index: 20;
}
.content {
    min-height: 100vh;
    position: relative;
}
.tab-title {
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 24px;
        height: 24px;
    }

    .img-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 4px;

        img {
            width: 8px;
            height: 5px;

            &:last-child {
                margin-top: 2px;
            }
        }
    }
}
.order-list {
    padding: 15px 14px;

    .order-info {
        margin-bottom: 15px;
    }
}
</style>
