<template>
    <div class="main">

        <div class="main-banner">
            <div class="main-banner-title">
                VUE 公共组件
            </div>
        </div>

        <div class="main-wrapper">
            <!--左侧菜单-->
            <div class="main-wrapper-sidebar">
                <ul class="menu-root">
                    <li>
                        
                        <!--组件更新日志-->
                        <div>
                            <router-link style="cursor: pointer;" class="main-wrapper-sidebar-link" to="/updateLog">
                                更新日志
                            </router-link>
                        </div>

                        <ul class="ul-type">
                            <li class="line" 
                                :class="['line', activeValue==item.value?'active':'']" 
                                v-for="(item,index) in typeItems"
                                @click="typeChange(item)"
                                :key="index" >{{item.title}}
                            </li>
                        </ul>

                        <!--基础组件-->
                        <a class="main-wrapper-sidebar-link" href="javascript:javascript:void(0);">基础组件</a>
                        <ul class="menu-sub">
                            <li v-for="(menuItem, menuIndex) in menuItems.basic" :key="menuIndex">
                                <router-link :to="menuItem.path">{{menuItem.title}}</router-link>
                            </li>
                        </ul>

                        <!--业务组件-->
                        <a class="main-wrapper-sidebar-link" href="javascript:javascript:void(0);">业务组件</a>
                        <ul class="menu-sub">
                            <li v-for="(menuItem, menuIndex) in menuItems.businessComponents" :key="menuIndex">
                                <router-link :to="menuItem.path">{{menuItem.title}}</router-link>
                            </li>
                        </ul>

                    </li>
                </ul>
            </div>

            <!--主体内容 Start-->
            <div class="main-wrapper-container">
                <router-view></router-view>
            </div>
            <!--主体内容 End-->



        </div>

        <!--目录-->
        <div>
            <catolog :catalog-data="catalogData"></catolog>
        </div>

    </div>
</template>

<script>

    import catolog from './Catalog.vue';
    import menuItems from '../mock/menuItems.json';//左侧菜单配置数据

    export default{
        name: "App",
        components: {catolog},
        data(){
            return {
                catalogData: [],
                menuItems:menuItems.pc,
                typeItems:[
                    {
                        title:'PC端组件',
                        value:0
                    },
                    {
                        title:'移动端组件',
                        value:1
                    }
                ],
                activeValue:0
            }
        },
        methods: {
            //跳转到不同的路由页面,滚动条置顶
            anchorLink(to){

                let query = to.query;
                if (query && query.anchor) {

                    this.$nextTick(x => {
                        let anchor = this.$el.querySelector('#' + query.anchor);

                        if (anchor && anchor.offsetTop) {

                            window.scroll(0, anchor.offsetTop)
                        }
                    })
                }


                this.$nextTick(x => {

                    let anchorLinkArr = this.$el.querySelectorAll(".anchor-link");
                    let catalogData = [];

                    if (anchorLinkArr && anchorLinkArr.length > 0) {

                        for (var i = 0, len = anchorLinkArr.length; i < len; i++) {

                            catalogData.push({id: anchorLinkArr[i].id, label: anchorLinkArr[i].getAttribute('label')});

                        }
                    }


                    this.catalogData = catalogData;

                })
            },
            //组件类型切换
            typeChange(item){

                this.activeValue=item.value;
                this.resetLeftMenu();

                if(this.activeValue==0){
                    this.$router.push('/pc/autoComplete');
                }
                else
                {
                    this.$router.push('/m/vMTable');
                }

            },
            //重置菜单导航
            resetLeftMenu(){

                switch(this.activeValue){
                    case 0:

                        this.menuItems=menuItems.pc;

                    break;
                    case 1:

                        this.menuItems=menuItems.mobile;

                    break;
                }

            }
        },
        mounted(){

            let type=window.location.hash.split('/')[1];

            if(type=='m'){
                this.activeValue=1;
            }
            else
            {
                this.activeValue=0;
            }

            this.resetLeftMenu();

        },
        watch: {

            $route(to, from){

                this.anchorLink(to);

            }
        }
    }


</script>
