<template>
    <main class="wrap">
        <div class="layout-box">
            <div class="center-title clearfix">
                <h3>资金明细</h3>
                <a href="javascript:;" class="back-btn" @click="goBack">返回</a>
            </div>
            <ul
                class="detail-box"
                v-loading="loading"
                v-if="$route.query.tradeType=='TRADE_IN'"
            >
                <li>
                    <b>交易单号</b>
                    <span>{{ detailData.transinNoticeId }}</span>
                </li>
                <li>
                    <b>入账日期</b>
                    <span>{{ detailData.tradeDate }}</span>
                </li>
                <li>
                    <b>店铺名称</b>
                    <span>{{ detailData.storeName }}</span>
                </li>
                <li>
                    <b>类型</b>
                    <span>{{ detailData.tradeSubTypeEnumDesc }}</span>
                </li>
                <li>
                    <b>入账币种</b>
                    <span>{{ detailData.currencyDesc }}</span>
                </li>
                <li>
                    <b>入账金额</b>
                    <span>{{ formatNum(detailData.amt) }}</span>
                </li>
                <li>
                    <b>状态</b>
                    <span>{{ detailData.processStatusDes }}</span>
                </li>
                <li>
                    <b>平台</b>
                    <span>{{ detailData.plateformAndSite }}</span>
                </li>
            </ul>
            <ul
                class="detail-box"
                v-loading="loading"
                v-if="$route.query.tradeType=='TRADE_WITHDRAW'"
            >
                <li>
                    <b>交易单号</b>
                    <span>{{ detailData.tradeNo }}</span>
                </li>
                <li>
                    <b>类型</b>
                    <span>{{ detailData.tradeTypeDesc }}</span>
                </li>
                <li>
                    <b>提现币种</b>
                    <span>{{ detailData.currencyDesc }}</span>
                </li>
                <li>
                    <b>提现金额</b>
                    <span>{{ formatNum(detailData.outAmt) }}</span>
                </li>
                <li>
                    <b>结汇汇率</b>
                    <span>{{ detailData.useRate }}</span>
                </li>
                <li>
                    <b>应收手续费</b>
                    <span>{{ detailData.accountsReceivableFee }}</span>
                </li>
                <li>
                    <b>实收手续费</b>
                    <span>{{ detailData.chargeAmt }}</span>
                </li>
            </ul>
        </div>
    </main>
</template>

<script>
import { api_fundDetail } from "api/portal.js";
import utils from "utils/utils.js";
export default {
    name: "dealDetail",
    computed: {},
    components: {},
    methods: {
        init() {
            let id = this.$route.query.id;
            let tradeType = this.$route.query.tradeType;
            this.loading = true;

            if (id === undefined || tradeType === undefined) {
                this.$router.push({
                    path: "/record/fund"
                });
            } else {
                let fundDetailData = {
                    params: {
                        tradeType: tradeType,
                        tradeId: id
                    }
                };
                api_fundDetail(fundDetailData).then(res => {
                    if (res.success) {
                        if (res.data == null) {
                            this.$router.push({
                                path: "/record/fund"
                            });
                        } else {
                            this.detailData = res.data.tradeDetail;
                        }
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.loading = false;
                });
            }
        },
        goBack() {
            this.$router.push({
                path: "/record/fund"
            });
        },
        formatNum(strNum) {
            var outputmoney = function(number) {
                number = number.replace(/\,/g, ""); //把所有的逗号，清除
                if (isNaN(number) || number == "") return "";
                number = Math.round(number * 100) / 100;
                if (number < 0)
                    return (
                        "-" +
                        outputdollars(Math.floor(Math.abs(number) - 0) + "") +
                        outputcents(Math.abs(number) - 0)
                    );
                else
                    return (
                        outputdollars(Math.floor(number - 0) + "") +
                        outputcents(number - 0)
                    );
            };
            //格式化金额
            var outputdollars = function(number) {
                if (number.length <= 3) {
                    return number == "" ? "0" : number;
                } else {
                    var mod = number.length % 3;
                    var output = mod == 0 ? "" : number.substring(0, mod);
                    for (let i = 0; i < Math.floor(number.length / 3); i++) {
                        if (mod == 0 && i == 0) {
                            output += number.substring(
                                mod + 3 * i,
                                mod + 3 * i + 3
                            );
                        } else {
                            output +=
                                "," +
                                number.substring(mod + 3 * i, mod + 3 * i + 3);
                        }
                    }
                    return output;
                }
            };
            var outputcents = function(amount) {
                amount = Math.round((amount - Math.floor(amount)) * 100);
                return amount < 10 ? ".0" + amount : "." + amount;
            };
            return outputmoney(strNum + "");
        }
    },
    data() {
        return {
            detailData: {},
            loading: false
        };
    },
    created() {
        this.init();
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";

.layout-box {
    padding-bottom: 20px;
    background: #fff;
}
.center-title {
    position: relative;
}
.back-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    padding-left: 22px;
    font-size: 14px;
    background: url(~assets/images/icon-center-back.png) left center no-repeat;
    color: #3d86e9;
}
.detail-box {
    margin: 20px;
    border: 1px solid #eaeaea;
    li {
        display: flex;
        height: 52px;
        line-height: 52px;
        font-size: 14px;
        &:not(:last-child) {
            b {
                border-bottom: 1px solid #fff;
            }
            span {
                border-bottom: 1px solid #eff4ff;
            }
        }
        b {
            width: 232px;
            font-weight: normal;
            background: #f7f7f7;
        }
        span {
            flex: 1;
            text-align: left;
            padding-left: 86px;
        }
    }
}
</style>
