<template>
    <div class="page">
        <div class="card">
            <!-- <uni-steps :options="data" direction="column" :active="2"></uni-steps> -->
            <ul class="list">
                <li>
                    <span class="key">账单类型：</span>
                    <span class="value">{{ data.type | type }}</span>
                </li>
                <li>
                    <span class="key">账单金额：</span>
                    <span class="value">{{ data.amount / 100 }}</span>
                </li>
                <li>
                    <span class="key">创建时间：</span>
                    <span class="value">{{ data.createdTime || "" }}</span>
                </li>
                <li>
                    <span class="key">备注：</span>
                    <span class="value remark">{{ data.remark || "" }}</span>
                </li>
                <li>
                    <span class="key">状态：</span>
                    <span class="value">{{ data.status || "" }}</span>
                </li>
                <li>
                    <span class="key">结算时间：</span>
                    <span class="value">{{ data.settlementTime || "" }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import uSteps from "../../components/uni-steps/uni-steps";

export default {
    name: "",
    components: { MyImage, uSteps },
    filters: {
        status(v) {
            let obj = {
                0: "审核中",
                1: "待打款",
                2: "已完成",
                3: "未通过",
                4: "打款失败",
            };
            let str = obj[v];
            return str || "";
        },
        type(v) {
            let obj = {
                1: "充值",
                2: "消费",
                3: "退款",
                4: "收益",
                5: "收益返还",
                6: "提现",
            };
            let str = obj[v];
            return str || "";
        },
    },
    // 数据
    data() {
        return {
            data: {},
            id: "",
        };
    },
    onLoad(opts) {
        this.id = opts.id;
        this.getDetail();
    },
    async onShow() {},

    // 函数
    methods: {
        getDetail() {
            uni.showLoading({
                title: "加载中...",
            });
            this.api
                .get("/User/GetWithdrawalDetail", { id: this.id })
                .then((res) => {
                    uni.hideLoading();
                    this.data = res.data;
                });
        },
    },

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

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


<style lang="scss" scoped>
.page {
    height: 100vh;
    background-color: #fff;
}
.card {
    // margin: px(40) px(40);
    // border: 1px solid #efefef;
    padding: px(40);
    // background-color: #fff;
    .tit {
        font-size: px(44);
        font-weight: bold;
        padding-bottom: px(20);
    }
}

.card /deep/ uni-steps {
    .uni-steps__column-text {
        padding: px(40) 0;
    }
}
.list {
    border-bottom: 1px solid #f1f1f1;
    li {
        height: px(120);
        line-height: 1.5;
        display: flex;
        align-items: center;
        border-top: 1px solid #f1f1f1;
        .key {
            width: px(220);
            color: #666;
            flex-shrink: 0;
        }
    }
}
</style>