<template>
    <div class="page">
        <ul class="list">
            <li class="item" v-for="item of withdrawalList" :key="item.id" @click="goDetail(item)">
                <div class="name">
                    {{ item.applyTime | dateFormat("yyyy/MM/dd") }}
                    <span class="status">{{ item.status | status }}</span>
                </div>
                <div class="right">
                    ￥{{ item.amount / 100 }}
                    <my-image
                        class="arrow"
                        src="/static/common/arrows_left.png"
                    ></my-image>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";

export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            pageIndex: 1,
            withdrawalList: [],
        };
    },
    filters: {
        status(v) {
            let obj = {
                0: "审核中",
                1: "待打款",
                2: "已完成",
                3: "未通过",
                4: "打款失败",
            };
            let str = obj[v];
            return str || "";
        },
        method(v) {
            let obj = {
                1: "微信",
                2: "银行卡",
            };
            return obj[v] || "";
        },
    },
    onLoad() {
        this.getList();
    },
    async onShow() {},
    onPullDownRefresh() {
        this.getList(true);
    },
    onReachBottom() {
        this.getMoreList();
    },
    // 函数
    methods: {
        getList(isPull) {
            this.pageIndex = 1;
            uni.showLoading({
                title: "加载中...",
            });
            this.loading = true;
            this.api
                .get("/User/GetWithdrawalList", {
                    pageIndex: this.pageIndex++,
                })
                .then((res) => {
                    if (isPull) {
                        uni.stopPullDownRefresh();
                    }
                    uni.hideLoading();
                    this.withdrawalList = res.data.data;
                });
        },
        getMoreList() {
            this.api
                .get("/User/GetWithdrawalList", {
                    pageIndex: this.pageIndex,
                })
                .then((res) => {
                    if (res.data.data.length) {
                        this.pageIndex++;
                    }
                    this.withdrawalList = [
                        ...this.withdrawalList,
                        ...res.data.data,
                    ];
                });
        },

        goDetail(val) {
            this.router.push({
                path: "/pages/wallet/withdrawal-detail",
                query: {
                    id: val.id,
                },
            });
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
    },

    // 数据监听
    watch: {},
};
</script>


<style lang="scss" scoped>
.page {
    min-height: 100vh;
    background-color: #fff;
}
.list {
    border-top: 1px solid #f1f1f1;
    .item {
        height: px(120);
        padding: 0 px(35);
        font-size: px(44);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;
    }
    .arrow {
        width: px(40);
        height: px(40);
        flex-shrink: 0;
        transform: rotate(180deg);
        margin-left: px(30);
        /deep/ img {
            width: px(40);
            height: px(40);
        }
    }
    .right {
        display: flex;
        align-items: center;
        font-size: px(44);
        color: #666;
    }
    .status {
        margin-left: px(30);
    }
}
</style>