<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>
            <div class="withdraw" v-if="$route.query.tradeType=='TRADE_WITHDRAW'">
                <ul class="detail-box" v-loading="loading">
                    <li>
                        <b>创建时间</b>
                        <span>{{ detailData.tradeDate }}</span>
                        <b>批次单号</b>
                        <span>{{ detailData.batchNo }}</span>
                    </li>
                    <li>
                        <b>应收手续费</b>
                        <span>{{ detailData.accountsReceivableFee.toFixed(4) }}</span>
                        <b>实收手续费</b>
                        <span>{{ detailData.withdrawFee.toFixed(4) }}</span>
                    </li>
                    <li>
                        <b>提现账号</b>
                        <span>{{ detailData.currencyDesc }}账户</span>
                        <b>到账银行账户</b>
                        <span style="line-height: 24px;">
                            {{ detailData.bankCardNo }}
                            <br />
                            {{ detailData.bankName }}
                        </span>
                    </li>
                    <li>
                        <b>提现币种</b>
                        <span>{{ detailData.currencyDesc }}</span>
                        <b>到账币种</b>
                        <span>{{ detailData.buyCurrencyDesc }}</span>
                    </li>
                    <li>
                        <b>提现金额</b>
                        <span>{{ formatNum(detailData.amt) }}</span>
                        <b>到账金额</b>
                        <span>{{ formatNum(detailData.actualAmt) }}</span>
                    </li>
                    <li>
                        <b>结汇汇率</b>
                        <span>{{ detailData.useRate }}</span>
                        <b>状态</b>
                        <span>{{ detailData.processStatusDes }}</span>
                    </li>
                </ul>
                <a
                    href="javascript:;"
                    class="layout-btn"
                    @click="downloadRecord(detailData.batchNo)"
                >下载回执账单</a>
                <span>*提示：仅支持下载交易成功的回执</span>
                <div class="center-title clearfix">
                    <h3>出账明细</h3>
                </div>
                <el-table :data="tradeList" style="width: 100%" empty-text="很遗憾，暂无数据！">
                    <el-table-column prop="txnNo" label="单号"></el-table-column>
                    <el-table-column label="电商平台">
                        <template
                            slot-scope="scope"
                        >{{ scope.row.storePlateFormName }}{{ scope.row.storeTheSiteName }}</template>
                    </el-table-column>
                    <el-table-column prop="storeName" label="店铺名称"></el-table-column>
                    <el-table-column label="出账金额">
                        <template
                            slot-scope="scope"
                        >{{ formatNum(scope.row.amt) }} {{ scope.row.currency }}</template>
                    </el-table-column>
                    <el-table-column label="实收手续费">
                        <template
                            slot-scope="scope"
                        >{{ scope.row.withdrawFee.toFixed(4) }} {{ scope.row.currency }}</template>
                    </el-table-column>
                    <el-table-column prop="processStatusDes" label="交易状态"></el-table-column>
                </el-table>
            </div>
        </div>
    </main>
</template>

<script>
import { api_tradeDetail, api_downloadGenerateRecord } 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/deal"
                });
            } else {
                let tradeDetailData = {
                    params: {
                        tradeType: tradeType,
                        tradeId: id
                    }
                };
                api_tradeDetail(tradeDetailData).then(res => {
                    if (res.success) {
                        if (res.data == null) {
                            this.$router.push({
                                path: "/record/deal"
                            });
                        } else {
                            this.detailData = res.data.tradeDetail;
                            this.tradeList = res.data.tradeList;
                        }
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.loading = false;
                });
            }
        },
        goBack() {
            this.$router.push({
                path: "/record/deal"
            });
        },
        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 + "");
        },
        downloadRecord(val) {
            let downloadGenerateRecordParams = {
                params: {
                    generateFileType: "GENERATE_TRADE_WITHDRAW_RECORD",
                    id: val
                }
            };
            api_downloadGenerateRecord(downloadGenerateRecordParams).then(
                res => {
                    const blob = new Blob([res]);
                    const fileName = "提现回执单" + val + ".pdf";
                    let status;
                    var reader = new FileReader();
                    reader.onload = e => {
                        let str = e.target.result.substring(
                            e.target.result.indexOf("success") + 9
                        );
                        status = str.substring(0, 4);
                        if (status == "true") {
                            if ("download" in document.createElement("a")) {
                                // 非IE下载
                                const elink = document.createElement("a");
                                elink.download = fileName;
                                elink.style.display = "none";
                                elink.href = URL.createObjectURL(blob);
                                document.body.appendChild(elink);
                                elink.click();
                                URL.revokeObjectURL(elink.href); // 释放URL 对象
                                document.body.removeChild(elink);
                            } else {
                                // IE10+下载
                                navigator.msSaveBlob(blob, fileName);
                            }
                        } else {
                            this.$message.error(
                                "仅支持下载交易成功的回执账单，请您耐心等待交易结果"
                            );
                        }
                    };
                    reader.readAsText(blob);
                }
            );
        }
    },
    data() {
        return {
            detailData: {},
            loading: false,
            tradeList: []
        };
    },
    created() {
        this.init();
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.withdraw /deep/ .el-table {
    margin: 20px 0;
    padding: 0 20px;
    &::before {
        content: "";
        height: 0;
    }
    th {
        padding: 0;
        height: 36px;
        text-align: center;
        border-bottom: 1px solid transparent;
        background: #f5f5f5;
    }
    td {
        text-align: center;
        border-bottom: 1px solid transparent;
    }
    .el-table__empty-text {
        width: initial;
        &::before {
            content: "";
            display: block;
            width: 191px;
            height: 131px;
            margin: 40px 0 0;
            background: url(~assets/images/icon-status-no-data.png) no-repeat;
            background-size: 191px 131px;
        }
    }
    .el-button {
        width: 100%;
        span {
            display: block;
            width: 100%;
        }
    }
}
.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: 46px;
        }
    }
}
.layout-btn + span {
    display: block;
    margin-top: -30px;
    font-size: 14px;
}
</style>
