<template>
    <transition name="fade" mode="out-in">
        <router-view v-loading="loading" />
    </transition>
</template>

<script>
import MenuMixins from '../mixins/menu.js'
import { mapMutations, mapState } from 'vuex'
import meAPI from '../api/me.js'
import menuAPI from '../api/menu.js'
import axios from 'axios'

export default {
    mixins: [
        MenuMixins
    ],
    created () {
        axios.interceptors.request.use(function (config) {
            config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
            return config;
        }, function (error) {
            return Promise.reject(error);
        })

        axios.interceptors.response.use(response => {
            return response;
            }, error => {
            const response = error.response
            switch(response.status) {
                case 401: this.$router.push('/login'); break;
                case 403: this.$router.push('/403'); break;
                case 400: this.$message.warning(response.data.message); break;
                case 500: this.$message.error('服务器出错！'); break;
            }
            return Promise.reject(error);
        })
    },
    mounted () {
        this.setToken(localStorage.getItem('token'))

        this.$router.beforeEach((to, from, next) => {
            if (this.loggedIn) {
                const route = this.allRoutes.find(route => route.url == to.path)
                if (route || to.path == '/403') {
                    next()
                } else {
                    next({
                        path: '/403'
                    })
                }
            } else {
                next()
            }
        })

        this.checkRoute()
    },
    computed: {
        ...mapState({
            token: state => state.basics.token,
            loggedIn: state => state.basics.loggedIn,
            me: state => state.basics.me,
        }),
        isAdminPath () {
            return this.allRoutes.findIndex(item => item.url == this.$route.path) > -1 ? true : false
        }
    },
    watch: {
        '$route' () {
            this.checkRoute()
        },
    },
    data () {
        return {
            loading: false
        }
    },
    methods: {
        ...mapMutations('basics', [
            'setMe',
            'setMenus',
            'setToken'
        ]),
        checkRoute() {
            if (this.$route) {
                if (this.$route.meta) {
                    if (this.$route.meta.requiresAuth === false) {
                        console.log('ok')
                        return false
                    }
                }
            }

            if (!this.loggedIn) {
                this.loading = true
                menuAPI.query(data => {
                    this.setMenus(data.data)
                    meAPI.query(data => {
                        this.loading = false
                        this.setMe(data)
                        const route = this.allRoutes.find(route => route.url == this.$route.path)
                        if (!route) {
                            this.$router.push('/403')
                        }
                    }, () => {
                        this.loading = false
                    })
                }, () => {
                    this.loading = false
                })
            }
        }
    }
    
}
</script>

<style lang="less" scoped>
.layout {
    display: flex;
    width: 100vw;
    overflow: hidden;
    .menu {
        width: 210px;
    }
    .content {
        flex: 1;
        height: 100vh;
        width: 100px;
        box-sizing: border-box;
        .view {
            padding: 20px;
        }
    }
}
</style>