<template>
    <div class="wrap">
        <div class="my-account box-shadow">
            <div class="center-title clearfix">
                <h3>我的账户</h3>
            </div>
            <div class="my-account-content">
                <h3>
                    <span v-if="certificationStatus === 'NO_SUBMIT'">您尚未进行实名认证</span>
                    <span v-else>{{userInfo.loginInfo.certificationName}}</span>
                    <template v-if="certificationStatus === 'NO_SUBMIT'">
                        <em class="icon-card cl-grey">未认证</em>
                    </template>
                    <template
                        v-else-if="certificationStatus === 'SUBMIT_FAILURE' || certificationStatus === 'SUBMIT_WATING' || certificationStatus === 'SUBMIT_FIRST_TRIAL' || certificationStatus === 'FIRST_TRIAL_FAILURE' ||
            this.userInfo.loginInfo.certificationStatus === 'KYC_INFO_SUBMIT' ||
            this.userInfo.loginInfo.certificationStatus === 'CONTACTS_AUDIT_FAILURE'"
                    >
                        <em class="cl-blue icon-card-waiting">审核中</em>
                    </template>
                    <template v-else-if="certificationStatus === 'FAILURE'">
                        <em class="cl-red icon-card-failed">认证失败</em>
                    </template>
                    <template v-else>
                        <em class="cl-green icon-card-succ">已认证</em>
                    </template>
                </h3>
                <p>
                    登录账号：
                    <span>{{userInfo.loginInfo.phoneNo}}</span>
                </p>
            </div>
        </div>
        <div class="service-charge box-shadow">
            <div class="center-title clearfix">
                <h3>提现手续费费率</h3>
            </div>
            <div class="service-charge-content" v-loading="loading">
                <div class="service-charge-head clearfix">
                    <span>平台</span>
                    <span>费率</span>
                </div>
                <div class="service-charge-body" v-if="showWithdrawChargeList.length == 0">
                    <p>
                        申请境外收款账户后显示
                        <br />您可以
                        <router-link to="/account/apply">立即申请境外收款账户</router-link>
                    </p>
                </div>
                <ul v-else>
                    <li
                        class="clearfix"
                        v-for="(item, index) in showWithdrawChargeList"
                        :key="index"
                    >
                        <span>
                            <img src="~assets/images/icon-platform-amazon-small.jpg" alt />
                        </span>
                        <span>{{ item.storeTheSiteList }}</span>
                    </li>
                </ul>
            </div>
        </div>
        <no-auth :dialogVisibleNoAuth="dialogVisibleNoAuth" @close="closeDialog"></no-auth>
        <auth-waiting
            :dialogVisibleAuthWaiting="dialogVisibleAuthWaiting"
            @close="closeDialogAuthWaiting"
        ></auth-waiting>
        <auth-failed
            :dialogVisibleAuthFailed="dialogVisibleAuthFailed"
            @close="closeDialogAuthFailed"
        ></auth-failed>
        <auth-submit-failed
            :dialogVisibleAuthSubmitFailed="dialogVisibleAuthSubmitFailed"
            @close="closeDialogAuthSubmitFailed"
        ></auth-submit-failed>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { api_showWithdrawCharge } from "api/center";
import noAuth from "pages/dialog/noAuth";
import authWaiting from "pages/dialog/authWaiting";
import authFailed from "pages/dialog/authFailed";
import authSubmitFailed from "pages/dialog/authSubmitFailed";
import noBindBankcard from "pages/dialog/noBindBankcard";
export default {
    name: "account",
    computed: {
        ...mapState(["userInfo"])
    },
    components: {
        noAuth,
        authWaiting,
        authFailed,
        authSubmitFailed,
        authSubmitFailed
    },
    data() {
        return {
            dialogVisibleNoAuth: false,
            dialogVisibleAuthWaiting: false,
            dialogVisibleAuthFailed: false,
            dialogVisibleAuthSubmitFailed: false,
            certificationStatus: "",
            condition: true,
            loading: true,
            showWithdrawChargeList: []
        };
    },
    methods: {
        init() {
            let showWithdrawChargeParams = {
                params: {}
            };
            api_showWithdrawCharge(showWithdrawChargeParams).then(res => {
                if (res.success) {
                    this.showWithdrawChargeList = res.data;
                    this.loading = false;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        closeDialog() {
            this.dialogVisibleNoAuth = false;
        },
        closeDialogAuthWaiting() {
            this.dialogVisibleAuthWaiting = false;
        },
        closeDialogAuthFailed() {
            this.dialogVisibleAuthFailed = false;
        },
        closeDialogAuthSubmitFailed() {
            this.dialogVisibleAuthSubmitFailed = false;
        }
    },
    created() {
        this.init();
        this.certificationStatus = this.userInfo.loginInfo.certificationStatus;
    },
    beforeRouteLeave(to, from, next) {
        if (this.userInfo.loginInfo.certificationStatus === "NO_SUBMIT") {
            if (to.meta.auth) {
                this.dialogVisibleNoAuth = true;
            } else {
                next();
            }
        } else if (
            this.userInfo.loginInfo.certificationStatus === "SUBMIT_WATING" ||
            this.userInfo.loginInfo.certificationStatus === "SUBMIT_FAILURE" ||
            this.userInfo.loginInfo.certificationStatus ===
                "SUBMIT_FIRST_TRIAL" ||
            this.userInfo.loginInfo.certificationStatus === "KYC_INFO_SUBMIT"
        ) {
            if (to.meta.auth) {
                this.dialogVisibleAuthWaiting = true;
            } else {
                next();
            }
        } else if (this.userInfo.loginInfo.certificationStatus === "FAILURE") {
            if (to.meta.auth) {
                this.dialogVisibleAuthFailed = true;
            } else {
                next();
            }
        } else if (
            this.userInfo.loginInfo.certificationStatus ===
                "FIRST_TRIAL_FAILURE" ||
            this.userInfo.loginInfo.certificationStatus ===
                "CONTACTS_AUDIT_FAILURE"
        ) {
            if (to.meta.auth) {
                this.dialogVisibleAuthSubmitFailed = true;
            } else {
                next();
            }
        } else {
            next();
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.my-account {
    margin-bottom: 20px;
    background: #fff;
}
.my-account-content {
    text-align: left;
    padding: 30px 0 30px 48px;
    h3 {
        margin-bottom: 16px;
        font-size: 16px;
        font-weight: normal;
        em {
            font-size: 14px;
            font-style: normal;
        }
    }
    p {
        font-size: 14px;
        color: #999;
        span {
            color: #333;
        }
    }
}
.service-charge {
    min-height: 300px;
    background: #fff;
}
.service-charge-content {
    padding: 20px 20px 10px;
    ul {
        padding: 20px 0 0;
    }
    li {
        margin-bottom: 10px;
        span {
            float: left;
            width: 50%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }
    }
}
.service-charge-head {
    height: 36px;
    line-height: 36px;
    background: #f5f5f5;
    span {
        float: left;
        width: 50%;
        font-size: 14px;
    }
}
.service-charge-body {
    padding: 70px 0;
    font-size: 14px;
    p {
        line-height: 24px;
        color: #666;
        a {
            color: #3d86e9;
        }
    }
}
.cl-grey {
    color: #a1a1a1;
}
</style>
