<template>
    <main class="wrap" v-loading="loading">
        <section class="layout-box clearfix" v-if="noStore">
            <div
                class="notice-succ box-shadow"
                v-if="storeInfo.authStatus == 2 || storeInfo.authStatus == 3"
            >
                <p>您的境外收款账户提交成功！</p>
            </div>
            <div class="notice box-shadow" v-else>
                <p>请店铺授权并激活您的收款账户</p>
            </div>
            <div class="layout-content box-shadow store-info">
                <div class="store-info-top clearfix">
                    <h4 v-if="showInput">
                        {{ storeInfo.storeName }}
                        <a href="javascript:;" @click="showFrom">修改名称</a>
                    </h4>
                    <div class="update-store-name clearfix" v-else>
                        <el-form
                            :model="ruleForm"
                            :rules="rules"
                            ref="ruleForm"
                            label-width="100px"
                            class="update-ruleForm"
                        >
                            <el-form-item prop="name">
                                <el-input v-model="ruleForm.name" maxlength="30"></el-input>
                            </el-form-item>
                            <el-form-item class="clearfix">
                                <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                                <el-button type="primary" plain @click="showFrom">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="icon-site">
                        <i></i>
                        <span>{{ storeInfo.storeTheSiteName }}</span>
                    </div>
                    <el-button
                        type="primary"
                        v-if="storeInfo.authStatus == 2 || storeInfo.authStatus == 3"
                        @click="toAccount"
                        class="btn-back"
                    >返回</el-button>
                    <el-button type="danger" v-else @click="toApply(storeInfo.id)">店铺授权</el-button>
                </div>
                <div class="store-info-bottom clearfix">
                    <div class="layout-currency withdraw-deposit">
                        <h3
                            class="currency-num"
                            v-if="noAccountInfo"
                        >{{ storeInfo.currencySymbol }}{{ formatNum(accountInfo.waitingBookedAmt) }}</h3>
                        <h3
                            class="currency-num"
                            v-else
                        >{{ storeInfo.currencySymbol }}{{ formatNum(0) }}</h3>
                        <div class="hr"></div>
                        <div class="explain-ch">待入账金额(USD)</div>
                    </div>
                    <div class="layout-currency withdraw-deposit">
                        <h3
                            class="currency-num"
                            v-if="noAccountInfo"
                        >{{ storeInfo.currencySymbol }}{{ formatNum(accountInfo.freezedBalance) }}</h3>
                        <h3
                            class="currency-num"
                            v-else
                        >{{ storeInfo.currencySymbol }}{{ formatNum(0) }}</h3>
                        <div class="hr"></div>
                        <div class="explain-ch">在途金额(USD)</div>
                    </div>
                    <div class="layout-currency balance">
                        <h3
                            class="currency-num"
                            v-if="noAccountInfo"
                        >{{ storeInfo.currencySymbol }}{{ formatNum(accountInfo.availableBalance) }}</h3>
                        <h3
                            class="currency-num"
                            v-else
                        >{{ storeInfo.currencySymbol }}{{ formatNum(0) }}</h3>
                        <div class="hr"></div>
                        <div class="explain-ch">可提现金额(USD)</div>
                    </div>
                </div>
            </div>
            <div class="layout-content box-shadow" v-if="noAccountInfo">
                <div class="accont-title clearfix">
                    <h3>账户信息</h3>
                </div>
                <ul class="account-info-list">
                    <li>
                        <dl>
                            <dt>银行所在地</dt>
                            <dd>Bank Location</dd>
                        </dl>
                        <div class="store-info-content">{{ accountInfo.bankCountryCode }}</div>
                    </li>
                    <li v-if="siteType === 1">
                        <dl>
                            <dt>9位收款路线号码</dt>
                            <dd>9-Digit Routing Number</dd>
                        </dl>
                        <div class="store-info-content">
                            {{ accountInfo.aba }}
                            <div
                                class="tag-read"
                                :data-clipboard-text="accountInfo.aba"
                                @click="copy"
                            >复制</div>
                        </div>
                    </li>
                    <li v-if="siteType === 2">
                        <dl>
                            <dt>机构编码</dt>
                            <dd>Institution Number</dd>
                        </dl>
                        <div class="store-info-content">
                            {{ accountInfo.currentAmt }}
                            <div
                                class="tag-read"
                                :data-clipboard-text="accountInfo.currentAmt"
                                @click="copy"
                            >复制</div>
                        </div>
                    </li>
                    <li v-if="siteType === 4">
                        <dl>
                            <dt>银行识别码</dt>
                            <dd>BIC</dd>
                        </dl>
                        <div class="store-info-content">
                            {{ accountInfo.currentAmt }}
                            <div
                                class="tag-read"
                                :data-clipboard-text="accountInfo.currentAmt"
                                @click="copy"
                            >复制</div>
                        </div>
                    </li>
                    <li v-if="siteType === 2">
                        <dl>
                            <dt>账户类型</dt>
                            <dd>Account Type</dd>
                        </dl>
                        <div class="store-info-content">{{ accountInfo.currentAmt }}</div>
                    </li>
                    <li v-if="siteType === 3">
                        <dl>
                            <dt>银行分类代码</dt>
                            <dd>Bank Sort Code</dd>
                        </dl>
                        <div class="store-info-content">
                            {{ accountInfo.currentAmt }}
                            <div
                                class="tag-read"
                                :data-clipboard-text="accountInfo.currentAmt"
                                @click="copy"
                            >复制</div>
                        </div>
                    </li>
                    <li v-if="siteType === 2">
                        <dl>
                            <dt>转账编号</dt>
                            <dd>Transit Number</dd>
                        </dl>
                        <div class="store-info-content">
                            {{ accountInfo.currentAmt }}
                            <div
                                class="tag-read"
                                :data-clipboard-text="accountInfo.currentAmt"
                                @click="copy"
                            >复制</div>
                        </div>
                    </li>
                    <li v-if="siteType === 4">
                        <dl>
                            <dt>国际银行账户号码</dt>
                            <dd>IBAN</dd>
                        </dl>
                        <div class="store-info-content">
                            {{ accountInfo.currentAmt }}
                            <div
                                class="tag-read"
                                :data-clipboard-text="accountInfo.currentAmt"
                                @click="copy"
                            >复制</div>
                        </div>
                    </li>
                    <li v-else>
                        <dl>
                            <dt>银行账号</dt>
                            <dd>Bank Account Number</dd>
                        </dl>
                        <div class="store-info-content">
                            {{ accountInfo.bankCardNo }}
                            <div
                                class="tag-read"
                                :data-clipboard-text="accountInfo.bankCardNo"
                                @click="copy"
                            >复制</div>
                        </div>
                    </li>
                    <li>
                        <dl>
                            <dt>账户持有人姓名</dt>
                            <dd>Account Holder's Name</dd>
                        </dl>
                        <div class="store-info-content">
                            与您在电商平台的注册名称保持一致
                            <router-link
                                to="/guide/accountName"
                                target="_blank"
                                class="tag-read"
                            >如何填写？</router-link>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="layout-content box-shadow" v-if="noAccountInfo">
                <div class="accont-title clearfix">
                    <h3>如何安全绑定账户？</h3>
                </div>
                <ul class="layout-list">
                    <li>
                        在Amazon卖家中心完成收款账户的绑定，即可畅快收款
                        <router-link to="/guide/bindCard" target="_blank">查看使用指南&gt;</router-link>
                    </li>
                </ul>
            </div>
        </section>
        <section class="layout-box clearfix" v-else>
            <div class="notice box-shadow">
                <p>余额查询失败，请重试</p>
            </div>
        </section>
    </main>
</template>

<script>
import { mapState } from "vuex";
import Clipboard from "clipboard";
import { api_findStoreDetailInfo, api_editStoreName } from "api/portal.js";
export default {
    name: "detail",
    data() {
        return {
            ruleForm: {
                name: ""
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入店铺名称",
                        trigger: "blur"
                    }
                ]
            },
            accountInfo: {},
            storeInfo: {},
            siteType: 1,
            noStore: true,
            noAccountInfo: false,
            loading: true,
            showInput: true
        };
    },
    computed: {
        ...mapState(["userInfo"])
    },
    methods: {
        init() {
            let id = this.$route.query.id;
            if (id === undefined) {
                this.$router.push({
                    path: "/account"
                });
            } else {
                let findStoreDetailInfoParams = {
                    params: {
                        kycStoreId: id
                    }
                };

                api_findStoreDetailInfo(findStoreDetailInfoParams).then(res => {
                    if (res.success) {
                        if (res.data.accountInfo) {
                            this.noAccountInfo = true;
                            this.accountInfo = res.data.accountInfo;
                        }

                        this.storeInfo = res.data.storeInfo;
                        this.ruleForm.name = this.storeInfo.storeName;
                        if (
                            res.data.storeInfo.storeTheSiteCode ===
                            "NORTH_AMERICA_SITE"
                        ) {
                            this.siteType = 1;
                        } else if (
                            res.data.storeInfo.storeTheSiteCode ===
                            "CANASA_SITE"
                        ) {
                            this.siteType = 2;
                        } else if (
                            res.data.storeInfo.storeTheSiteCode ===
                            "ENGLAND_SITE"
                        ) {
                            this.siteType = 3;
                        } else {
                            this.siteType = 4;
                        }
                    } else {
                        this.$message.error(res.msg);
                        if (res.code == -8) {
                            this.noStore = false;
                        }
                    }
                    this.loading = false;
                });
            }
        },
        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 + "");
        },
        copy() {
            var clipboard = new Clipboard(".tag-read");
            clipboard.on("success", e => {
                this.$message.success("复制成功");
                // 释放内存
                clipboard.destroy();
            });
            clipboard.on("error", e => {
                // 不支持复制
                this.$message.error("该浏览器不支持自动复制");
                // 释放内存
                clipboard.destroy();
            });
        },
        toApply(id) {
            let failed = this.userInfo.loginInfo.certificationStatus;
            if (failed == "FAILURE") {
                this.$message.error("实名认证失败,暂不可以申请收款账户");
            } else {
                this.$router.push({
                    path: "/account/update",
                    query: {
                        id: id
                    }
                });
            }
        },
        toAccount() {
            this.$router.push({
                path: "/account"
            });
        },
        showFrom() {
            this.showInput = !this.showInput;
            this.ruleForm.name = this.storeInfo.storeName;
        },
        submitForm(formName) {
            let id = this.$route.query.id;
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let editStoreNameData = {
                        data: {
                            kycStoreId: id,
                            storeName: this.ruleForm.name
                        }
                    };
                    api_editStoreName(editStoreNameData).then(res => {
                        if (res.success) {
                            this.init();
                        } else {
                            this.$message.error(res.msg);
                        }
                        this.showInput = true;
                    });
                } else {
                    return false;
                }
            });
        }
    },
    created() {
        this.init();
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.wrap {
    min-height: calc(100vh - 184px);
}
.notice {
    margin-bottom: 20px;
    padding: 20px;
    background: #fff8e8;
    p {
        line-height: 22px;
        padding-left: 32px;
        font-size: 14px;
        text-align: left;
        background: url(~assets/images/icon-notice.png) left 0 no-repeat;
        background-size: 20px 20px;
        color: #cc3333;
    }
}
.notice-succ {
    margin-bottom: 20px;
    padding: 20px;
    background: #dfebdd;
    p {
        line-height: 22px;
        padding-left: 32px;
        font-size: 14px;
        text-align: left;
        background: url(~assets/images/icon-notice-succ.png) left 0 no-repeat;
        background-size: 20px 20px;
        color: #53a849;
    }
}
.store-info {
    padding: 20px;
    .store-info-top {
        position: relative;
        padding-bottom: 20px;
        border-bottom: 1px solid #eaeaea;
        h4 {
            float: left;
            margin-right: 10px;
            height: 36px;
            line-height: 36px;
            a {
                margin-left: 10px;
                font-size: 14px;
                font-weight: normal;
                color: #3d86e9;
            }
        }
        .icon-site {
            float: left;
            margin-top: 4px;
            margin-left: 10px;
            i {
                display: inline-block;
                width: 74px;
                height: 28px;
                background: url(~assets/images/icon-platform-amazon-small.jpg)
                    no-repeat;
            }
            span {
                display: inline-block;
                margin-top: 6px;
                font-size: 14px;
                vertical-align: top;
            }
        }
        .el-button.btn-back {
            position: absolute;
            top: -8px;
            right: 0;
            padding: 10px 50px;
            width: initial;
            font-size: 18px;
        }
    }
    .store-info-bottom {
        height: 230px;
        background: url(~assets/images/bg-bind-store.png) no-repeat;
        .layout-currency {
            float: left;
            width: 33%;
            height: 130px;
            margin: 50px 0;
            box-sizing: border-box;
            h3 {
                font-size: 36px;
                font-weight: normal;
                color: #3d86e9;
            }
        }
        .withdraw-deposit {
            border-right: 1px solid #dcdcda;
        }
        .hr {
            position: relative;
            width: 286px;
            height: 1px;
            margin: 28px auto 32px;
            background: #e6e6e6;
            &::before {
                content: "";
                position: absolute;
                top: -1px;
                left: 50%;
                width: 176px;
                height: 3px;
                margin-left: -88px;
                background: #3d86e9;
            }
        }
        .explain-ch {
            font-size: 16px;
        }
    }
    .update-store-name {
        float: left;
        height: 36px;
        & /deep/ .el-form-item {
            float: left;
            margin-right: 12px;
            margin-bottom: 0;
            .el-form-item__content {
                height: 36px;
                line-height: 36px;
                margin-left: 0 !important;
                .el-input {
                    .el-input__inner {
                        width: 178px;
                        height: 36px;
                        line-height: 36px;
                    }
                }
                .el-button {
                    float: left;
                    margin-top: 4px;
                    padding: 8px 12px;
                    font-size: 14px;
                }
            }
        }
    }
}
.account-info-list {
    padding: 0 0 26px;
    li {
        height: 40px;
        margin-top: 26px;
        font-size: 14px;
        color: #333;
        dl {
            float: left;
            width: 264px;
            padding-left: 20px;
            text-align: left;
            dt {
                margin-bottom: 4px;
            }
            dd {
                color: #999;
            }
        }
        .store-info-content {
            float: left;
            .tag-read {
                display: inline-block;
                margin-left: 20px;
                color: #3d86e9;
                cursor: pointer;
            }
        }
    }
}
</style>
