<template>
    <div class="page">
        <ul class="list">
            <li class="item" v-for="item of list" :key="item.id">
                <div class="name">
                    {{ item.date | 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>
            <!-- <li class="item">
                <div class="name">
                    yyy/MM/dd <span class="status">审核中</span>
                </div>
                <div class="right">
                    ￥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,
            list: [],
        };
    },
    filters: {
        status(v) {
            let obj = {
                0: "未结算",
                1: "已结算",
            };
            let str = obj[v];
            return str || "";
        },
    },

    onLoad() {
        this.getList();
    },
    async onShow() {},
    onPullDownRefresh() {
        this.getList(true);
    },
    onReachBottom() {
        this.getMoreList();
    },
    // 函数
    methods: {
        getList(isPull) {
            this.pageIndex = 1;
            uni.showLoading({
                title: "加载中...",
            });
            this.api
                .get("/User/GetBillList", {
                    pageIndex: this.pageIndex++,
                })
                .then((res) => {
                    if(isPull){
                        uni.stopPullDownRefresh();
                    }
                    uni.hideLoading();
                    this.list = res.data.data;
                });
        },
        getMoreList() {
            this.api
                .get("/User/GetBillList", {
                    pageIndex: this.pageIndex,
                })
                .then((res) => {
                    if (res.data.data.length) {
                        this.pageIndex++;
                    }
                    this.list = [...this.list, ...res.data.data];
                });
        },

        goDetail(val){
            
            this.$store.commit("common/update", {
                billData: val,
            });
            this.router.push('/pages/wallet/detail');
        }
    },

    // 数据计算
    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>