<template>
    <div class="wrap">
        <div class="setting box-shadow">
            <router-view></router-view>
        </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 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: "setting",
    computed: {
        ...mapState(["userInfo"])
    },
    components: {
        noAuth,
        authWaiting,
        authFailed,
        authSubmitFailed,
        noBindBankcard
    },
    data() {
        return {
            dialogVisibleNoAuth: false,
            dialogVisibleAuthWaiting: false,
            dialogVisibleAuthFailed: false,
            dialogVisibleAuthSubmitFailed: false
        };
    },
    methods: {
        closeDialog() {
            this.dialogVisibleNoAuth = false;
        },
        closeDialogAuthWaiting() {
            this.dialogVisibleAuthWaiting = false;
        },
        closeDialogAuthFailed() {
            this.dialogVisibleAuthFailed = false;
        },
        closeDialogAuthSubmitFailed() {
            this.dialogVisibleAuthSubmitFailed = false;
        }
    },
    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";

.setting {
    background: #fff;
}
</style>
