<template>
      <div v-if="!routes.hidden" v-show="menuIsShow(routes)">
        <template v-if="!hasChild(routes.children)">
            <app-link :to="getResolvePathUrlRoutes">
                <el-menu-item :index="getResolvePathUrlRoutes">
                    <menu-title :icon="routes.meta.icon||(routes.meta&&routes.meta.icon)" :title="routes.meta.title" />
                </el-menu-item>
            </app-link>
        </template>

        <el-submenu v-else :index="getResolvePathUrlRoutes" popper-append-to-body>
            <template slot="title">
                <menu-title v-if="routes.meta" :icon="routes.meta && routes.meta.icon" :title="routes.meta.title" />
            </template>
            <sidebar-menu-item
                v-for="child in routes.children"
                :key="getResolvePathUrlRoutes + '/' + child.path"
                :routes="child"
                :base-path="getBasePath"
                :resolve-path="getResolvePathUrlRoutes"
                :active-top-menu="getActiveTopMenu"
                class="nest-menu"
            />
        </el-submenu>
    </div>
</template>
<script>
import path from 'path';
import { isExternal } from "@/utils/validate";
import { getBelongTopMenuPath } from '@/utils/permission';
import MenuTitle from './Item';
import AppLink from './Link';
export default {
    name: 'SidebarMenuItem',
    props: {
        // route object
        routes: {
            type: Object,
            required: true
        },
        // 根路径地址
        basePath: {
            type: String,
            required: true
        },
        // 上级路径地址
        resolvePath: {
            type: String,
            default: ''
        },
        activeTopMenu: {
            type: String,
            default: ''
        }
    },
    components: {
        MenuTitle,
        AppLink
    },
    computed: {
        getBasePath: function() {
            return this.basePath;
        },
        getActiveTopMenu: function () {
            if (this.activeTopMenu !== '') {
                return this.activeTopMenu;
            }
            const route = this.$route;
            /*
            const { meta, path } = route;
            if (meta.belongTopMenu) {
                return meta.belongTopMenu;
            }
            return '/' + path.split('/')[1];
            */
            return getBelongTopMenuPath(route);
        },
        getResolvePathUrlRoutes: function() {
            return this.resolvePathUrl(this.routes.path);
        }
    },
    mounted() {
        this.onlyOneChild = null;
    },
    methods: {
        hasOneShowingChild(children = [], parent) {
            const showingChildren = children.filter((item) => {
                if (item.hidden) {
                return false;
                } else  {
                // Temp set(will be used if only has one showing child)
                this.onlyOneChild = item;
                return true;
                }
            });

            // When there is only one child router, the child router is displayed by default

            if (showingChildren.length === 1) {
                // console.log(showingChildren[0].meta.title)
                return true;
            }

            // Show parent if there are no child router to display
            if (showingChildren.length === 0) {
                this.onlyOneChild = { ...parent, path: "", noShowingChildren: true };
                return true;
            }

            return false;
        },
        menuIsShow(route) {
            let activeTopMenu = this.getBasePath;
            const { meta } = route;
            if (meta.belongTopMenu) {
                activeTopMenu = meta.belongTopMenu;
            }
            return activeTopMenu === this.getActiveTopMenu;
        },
        hasChild(children = []) {
            const showChildren = children.filter(item => {
                if (item.hidden) {
                    return false;
                } else {
                    return true;
                }
            });
            // console.log(showChildren)
            if (showChildren.length > 0) {
                return true;
            }
            return false;
        },
        // resolvePath(routePath) {
        //     if (isExternal(routePath)) {
        //         return routePath;
        //     }
        //     if (isExternal(this.basePath)) {
        //         return this.basePath;
        //     }
        //     return path.resolve(this.basePath, routePath);
        // },
        resolvePathUrl(routePath) {
            if (isExternal(routePath)) {
                return routePath;
            }
            // console.log(this.resolvePath, routePath)
            return path.resolve(this.resolvePath, routePath);
        }
    }
};
</script>