<template>
    <div id="main" v-bind:class="{ fold: isFold }">
        <page-menu
            @menuFold="menuFold"
            :menuItems="menuItems"
            ref="menu"
        ></page-menu>
        <bread-crumb></bread-crumb>
        <router-view class="mainBox" ref="curRouter"></router-view>
    </div>
</template>

<script>
// @ is an alias to /src
import pageMenu from "./page/pageMenu";
import breadCrumb from "@/views/page/breadCrumb";

export default {
    name: "index",
    components: {
        pageMenu,
        breadCrumb,
    },
    data() {
        return {
            isFold: false, // menu是否折叠
            menuItems: [],
        };
    },
    methods: {
        menuFold(flag) {
            this.isFold = flag;
        },
        getMenuItems() {
            this.$axios({
                method: "POST",
                url: this.$api.common.getMyMenuTree,
                data: {},
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.menuItems = res.info;

                    this.$nextTick(() => {
                        let menuKind = this.$route.meta.menuKind;
                        if (
                            menuKind &&
                            menuKind !== "mainPage" &&
                            menuKind !== "personalInformation"
                        ) {
                            let name = "";
                            switch (menuKind) {
                                case "modelLibrary":
                                    name = "模型库";
                                    break;
                                case "algorithmsLibrary":
                                    name = "算法库";
                                    break;
                                case "sceneLibrary":
                                    name = "场景库";
                                    break;
                                case "workManagement":
                                    name = "工作管理";
                                    break;
                                case "systemManagement":
                                    name = "系统管理";
                                    break;
                                default:
                                    break;
                            }

                            let menu = this.menuItems.find(
                                (i) => i.name === name
                            );
                            if (menu) this.$refs.menu.$refs.menu.open(menu.id);
                        }
                    });
                } else {
                    this.$message.error(res.message || "获取用户菜单失败");
                }
            });
        },
        getUserInfo() {
            this.$axios({
                method: "POST",
                url: this.$api.common.getCurrentUserInfo,
                data: {},
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.$store.commit("getUserId", res.info.id);
                    this.$store.commit("getUsername", res.info.username);
                    this.$store.commit("getRoleCode", res.info.roleCode);
                    this.$store.commit("getUseType", res.info.useType);
                } else {
                    this.$message.error(res.message || "获取用户信息失败");
                }
            });
        },
    },
    created() {
        let { code, ticket } = this.$route.query;

        if (code && ticket) {
            localStorage.clear();
            this.$axios({
                method: "post",
                url: this.$api.common.single,
                data: { code, ticket },
            }).then((res) => {
                if (res.code == 200 && !!res.info.access_token) {
                    localStorage.setItem(
                        "Authorization",
                        res.info.token_type + " " + res.info.access_token
                    );
                    localStorage.setItem(
                        "refreshToken",
                        res.info.refresh_token
                    );
                    localStorage.setItem("expiresTime", res.info.expires_time);

                    this.$nextTick(() => {
                        // this.$refs.curRouter.init &&
                        //     this.$refs.curRouter.init();

                        this.getMenuItems();
                        this.getUserInfo();
                    });
                } else {
                    this.$message.error(res.message || "网络异常");
                }
            });
        } else {
            this.getMenuItems();
            this.getUserInfo();
        }
    },
};
</script>

<style scoped lang="less">
#main {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding-top: 50px;
    padding-left: 150px;
}

#main.fold {
    padding-left: 60px;
}

.fold {
    /deep/ .breadCrumbPanel {
        left: 60px;
    }
}

.mainBox {
    padding-bottom: 60px;
    // overflow: auto;
}

/deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
    border: 1px solid @gray;
    border-bottom-color: @themeColor;
    border-radius: 3px 3px 0 0;
    font-size: 14px;
    font-weight: bold;

    &:first-child {
        border-right-color: transparent;
    }

    &:nth-child(2) {
        border-left-color: transparent;
    }

    &.is-active {
        border: 1px solid @themeColor;
        border-bottom-color: #ffffff;
    }
}
</style>
