<template>
    <div class="container">
        <div class="header">
            <router-link class="logo-link" :to="{ path: '/' }">
                <img class="logo" src="../assets/nav_logo@3x (1).png" alt=""
            /></router-link>

            <div class="content">
                <!-- <div class="tabs">
                    <div
                        class="tab"
                        :class="{ active: active === item }"
                        v-for="(item, index) in tabs"
                        :key="index"
                        @click="tab(item)"
                    >
                        {{ item }}
                        <div class="slip" :class="{ active: item === active }"></div>
                    </div>
                </div> -->

                <el-tabs v-model="activeName" class="menus" @tab-click="change">
                    <el-tab-pane
                        v-for="(item, index) in menus"
                        :key="index"
                        :label="item.label"
                        :name="item.value"
                    ></el-tab-pane>
                </el-tabs>
                <div class="btn-list" v-if="isLogin">
                    <el-dropdown @command="onCommand" style="margin-left: 20px">
                        <span class="el-dropdown-link">
                            <img class="img" :src="avatarBox" />
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="nickname" style="word-break: keep-all"
                                >{{ userInfo.nickname }}
                            </el-dropdown-item>
                            <div class="border"></div>
                            <el-dropdown-item
                                v-if="userInfo.authStatus != 'SUCCESS'"
                                command="supply"
                                style="word-break: keep-all"
                                >去认证
                            </el-dropdown-item>
                            <el-dropdown-item command="edit" style="word-break: keep-all">编辑资料 </el-dropdown-item>
                            <div class="border"></div>
                            <el-dropdown-item command="logout">退出登录 </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <!-- <div v-else class="login" @click="show = true">[登录]</div> -->
                <el-button v-else class="login" plain @click="Login">[登录]</el-button>

                <!-- <div class="login login1">中文</div> -->
            </div>
        </div>
        <login-info ref="ref" @close="show = false"></login-info>
    </div>
</template>
<script>
import LoginInfo from '../components/LoginInfo.vue';
// import pageableTable from '@/mixins/pageableTable';
import { mapState, mapMutations } from 'vuex';
export default {
    // mixins: [pageableTable],
    components: { LoginInfo },
    watch: {
        $route() {
            this.getActive();
        }
    },
    data() {
        return {
            // tabs: ['铸造者', '收藏探索', '数字盲盒', '我的NFT', '了解更多'],
            active: '',
            show: false,
            activeName: '',
            lists: '',
            url: '/identityAuth/all',
            menus: [
                {
                    label: '铸造者',
                    value: '/casting'
                },
                {
                    label: '收藏探索',
                    value: '/collection'
                },
                {
                    label: '数字盲盒',
                    value: '/collection?type=BLIND_BOX'
                },
                {
                    label: '我的藏品',
                    value: '/my'
                },
                {
                    label: '了解更多',
                    value: 'wait'
                }
            ]
        };
    },
    computed: {
        ...mapState(['userInfo']),
        avatarBox() {
            return this.userInfo.avatar;
        }
    },
    mounted() {
        this.$EventBus.$on('login', () => {
            this.Login();
        });
        this.getActive();
        if (this.userInfo.authStatus !== 'NOT_AUTH') {
            setTimeout(() => {
                this.add();
            }, 1000);
        }
    },
    methods: {
        add() {
            this.$http
                .post(
                    '/identityAuth/all',
                    {
                        query: {
                            userId: this.userInfo.id
                        },
                        sort: 'createdAt,desc',
                        size: 1,
                        page: 0
                    },
                    {
                        body: 'json'
                    }
                )
                .then(res => {
                    this.lists = res.content[0].org;
                    console.log(this.lists);
                });
        },
        Login() {
            this.$refs.ref.flag();
        },
        ...mapMutations(['updateUserInfo']),
        batchRead() {},
        onCommand(command) {
            if (command === 'edit') {
                this.$router.push('/accountdata');
            } else if (command === 'nickname') {
                this.$router.push('/accountdata');
            } else if (command === 'logout') {
                localStorage.removeItem('webToken');
                this.updateUserInfo(null);
                this.$router.push('/');
            } else if (command === 'supply') {
                this.add();
                if (this.userInfo.authStatus === 'NOT_AUTH') {
                    this.$router.push('/authentication');
                } else {
                    this.$nextTick(() => {
                        console.log(this.lists);
                        setTimeout(() => {
                            if (this.userInfo.authStatus !== 'NOT_AUTH' && this.lists == false) {
                                this.add();
                                this.$router.push('/userauthentication');
                            }
                        }, 1000);
                        setTimeout(() => {
                            if (this.userInfo.authStatus !== 'NOT_AUTH' && this.lists == true) {
                                this.add();
                                this.$router.push('/enterpriseauthentication');
                            }
                        }, 1000);
                    });
                }
            }
        },
        getActive() {
            this.activeName = '';
            let menus = [...this.menus];
            menus.forEach(item => {
                let _route = this.parsePath(item.value);
                if (this.$route.path == _route.path && Object.keys(_route.query).length === 0) {
                    this.activeName = item.value;
                } else if (this.$route.path == _route.path) {
                    Object.keys(_route.query).forEach(key => {
                        if (_route.query[key] === this.$route.query[key]) {
                            this.activeName = item.value;
                        }
                    });
                }
            });
        },
        change(info) {
            if (info.paneName !== 'wait') {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
                this.$router.push(info.paneName);
            } else {
                this.wait();
            }
        },
        parsePath(path = '') {
            let hash = '';
            let query = {};

            let hashIndex = path.indexOf('#');
            if (hashIndex >= 0) {
                hash = path.slice(hashIndex);
                path = path.slice(0, hashIndex);
            }

            let queryIndex = path.indexOf('?');
            if (queryIndex >= 0) {
                query = this.parseQuery(path.slice(queryIndex + 1));
                path = path.slice(0, queryIndex);
            }

            return {
                path,
                query,
                hash
            };
        },
        parseQuery(query) {
            const res = {};
            console.log(query);
            query = query.trim().replace(/^(\?|#|&)/, '');

            if (!query) {
                return res;
            }

            query.split('&').forEach(param => {
                const parts = param.replace(/\+/g, ' ').split('=');
                const key = decode(parts.shift());
                const val = parts.length > 0 ? decode(parts.join('=')) : null;

                if (res[key] === undefined) {
                    res[key] = val;
                } else if (Array.isArray(res[key])) {
                    res[key].push(val);
                } else {
                    res[key] = [res[key], val];
                }
            });

            function decode(str = '') {
                try {
                    return decodeURIComponent(str);
                } catch (err) {
                    if (process.env.NODE_ENV !== 'production') {
                        //   warn(false, `Error decoding "${str}". Leaving it intact.`)
                    }
                }
                return str;
            }

            return res;
        }
    }
};
</script>
<style lang="less" scoped>
/deep/.btn-list {
    .el-tabs__nav-scroll {
        padding-left: 13px;
    }
    .el-tabs__item {
        font-weight: bold;
        font-size: 14px;
        width: 300px;
    }
}
/deep/ .el-dropdown-menu__item {
    font-weight: bold;
    text-align: center;
}
/deep/.menus {
    padding: 15px 25px 0;
    .el-tabs__item {
        padding: 0 25px;
        color: #939599;
        font-size: 18px;
        font-weight: 400;
        // font-weight: bold;
        &.is-active {
            color: #fff;
            font-weight: bold;
        }
        &:focus {
            &.is-active.is-focus {
                box-shadow: none;
            }
        }
    }

    .el-tabs__nav-wrap {
        &::after {
            background-color: transparent;
        }
    }
    .el-tabs__active-bar {
        background-color: transparent;
        &::after {
            content: '';
            position: absolute;
            left: 30%;
            right: 30%;
            background-color: #fff;
            top: 0;
            bottom: 0;
        }
    }
}

.border {
    margin: 6px 16px;
    height: 1px;
    background: #f2f3f5;
}

.container {
    height: 90px;
    background: #0f1111;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 20;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .logo {
            width: 170px;
            height: 60px;
        }
        .logo-link {
            padding: 15px 0px 15px 30px;
        }
        .content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .tabs {
                display: flex;
                align-items: center;
                padding-top: 10px;
                cursor: pointer;
                .tab {
                    width: 130px;
                    font-size: 18px;
                    font-weight: bold;
                    text-align: center;
                    color: #939599;
                    line-height: 28px;
                    &.active {
                        color: #ffffff;
                        font-weight: bold;
                    }
                    .slip {
                        width: 26px;
                        margin: 0 auto;
                        padding-bottom: 13px;
                        &.active {
                            border-bottom: 2px solid #fff;
                            border-radius: 2px;
                        }
                    }
                }
            }
            .btn-list {
                margin-right: 52px;
                .img {
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                    display: block;
                    margin-right: 30px;
                    border: 2px solid #fff;
                    cursor: pointer;
                }
            }

            .login {
                width: 83px;
                color: @prim;
                font-size: 16px;
                margin: 0 30px;
                height: 30px;
                line-height: 0px;
                background-color: transparent;
                .line(@radius:4px);
                border-width: 0;
                /deep/span {
                    position: relative;
                    z-index: 3;
                }
                // .line();
            }
        }
    }
}
</style>
