<template>
    <div class="sidebar">
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"
            background-color="#324157"
            text-color="#bfcbd9"
            active-text-color="#20a0ff"
            unique-opened
            router
        >
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <span slot="title">{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu
                                v-if="subItem.subs"
                                :index="subItem.index"
                                :key="subItem.index"
                            >
                                <template slot="title">{{ subItem.title }}</template>
                                <el-menu-item
                                    v-for="(threeItem,i) in subItem.subs"
                                    :key="i"
                                    :index="threeItem.index"
                                >{{ threeItem.title }}
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item
                                v-else
                                :index="subItem.index"
                                :key="subItem.index"
                            >{{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
    import bus from '../common/bus';

    export default {
        data() {
            return {
                collapse: false,
                items: [
                    // 系统首页
                    // {
                    //     index: 'dashboard',
                    //     title: '系统首页'
                    // },

                    // 数据可视化管理
                    {
                        index: 'dataManage',
                        title: '数据可视化',
                        subs: [
                            {
                                index: '/data/autoTestData',
                                title: '线上接口自动化监控'
                            },
                            // {
                            //     index: '/data/codeCheckData',
                            //     title: '代码质量趋势'
                            // },
                        ]
                    },
                    // 基础管理
                    // {
                    //     index: 'basicsManage',
                    //     title: '基础配置',
                    //     subs: [
                    //         {
                    //             index: '/project/page',
                    //             title: '项目管理'
                    //         },
                    //         {
                    //             index: '/department/page',
                    //             title: '部门管理'
                    //         },
                    //     ]
                    // },
                    // 测试发布管理
                    // {
                    //     index: 'qaPublishManage',
                    //     title: '测试发布',
                    //     subs: [
                    //         {
                    //             index: '/publish/page',
                    //             title: '发布记录'
                    //         },
                    //         {
                    //             index: '/submit/page',
                    //             title: '提测单'
                    //         },
                    //         {
                    //             index: '/publish/version/page',
                    //             title: '发布版本管理'
                    //         }
                    //     ]
                    // },
                    // 代码质量
                    // {
                    //     index: 'sonarManage',
                    //     title: '代码质量',
                    //     subs: [
                    //         {
                    //             index: '/sonar/result',
                    //             title: '代码检测结果'
                    //         },
                    //         {
                    //             index: '/sonar/summaryIssues',
                    //             title: '代码检测问题汇总'
                    //         }
                    //     ]
                    // },
                    // web自动化
                    {
                        index: 'webselemium',
                        title: 'web自动化',
                        subs: [
                            {
                                index: '/uiProject',
                                title: 'UI项目管理'
                            },
                            {
                                index: '/uiProjectPage',
                                title: 'UI页面管理'
                            },
                            {
                                index: '/uiProjectPageElement',
                                title: 'UI页面元素管理'
                            },
                            {
                                index: '/uiProjectTestCase',
                                title: 'UI测试用例'
                            },
                            {
                                index: '/uiProjectTask',
                                title: 'UI任务管理'
                            },
                            {
                                index: '/uiPositioning',
                                title: 'UI定位'
                            },
                            {
                                index: '/uiElementOperation',
                                title: 'UI元素操作'
                            }
                        ]

                    },
                    // {
                    //     icon: 'el-icon-lx-cascades',
                    //     index: 'appium',
                    //     title: 'APP自动化',
                    //     subs: [
                    //         {
                    //             index: 'appProject',
                    //             title: 'APP项目管理'
                    //         },
                    //         {
                    //             index: 'appProjectPage',
                    //             title: 'APP页面管理'
                    //         },
                    //         {
                    //             index: 'appProjectPageElement',
                    //             title: 'APP页面元素管理'
                    //         },
                    //         {
                    //             index: 'appProjectTestCase',
                    //             title: 'APP测试用例'
                    //         },
                    //         {
                    //             index: 'appProjectTask',
                    //             title: 'APP任务管理'
                    //         },
                    //         {
                    //             index: 'appPositioning',
                    //             title: 'APP定位'
                    //         },
                    //         {
                    //             index: 'appElementOperation',
                    //             title: 'APP元素操作'
                    //         },
                    //     ]
                    //
                    // },
                    // 接口自动化
                    {
                        index: 'api',
                        title: '接口自动化',
                        subs: [
                            // {
                            //     index: '/apiProject',
                            //     title: 'API项目管理'
                            // },
                            // {
                            //     index: '/apiProjectModule',
                            //     title: 'API服务管理'
                            // },
                            // {
                            //     index: '/apiProjectTestCase',
                            //     title: 'API测试用例'
                            // },
                            // {
                            //     index: '/apiBusinessTest',
                            //     title: 'API业务测试'
                            // },
                            // {
                            //     index: '/apiTask',
                            //     title: 'API任务管理'
                            // },
                            {
                                index: '/apiManagementPage',
                                title: 'API接口管理'
                            },
                            {
                                index: '/apiScenarioUseCase',
                                title: 'API场景用例'
                            },
                            {
                              index: '/apiTestPlan',
                              title: 'API测试计划'
                            },
                          {
                            index: '/apiEnvironment',
                            title: 'API环境设置'
                          },
                          {
                            index: '/apiDatabase',
                            title: 'API数据库管理'
                          },

                        ]

                    },
                    // 性能测试
                    {
                        index: 'performanceTest',
                        title: '性能测试',
                        subs: [
                            {
                                index: '/performanceProject',
                                title: '性能测试项目'
                            },
                            {
                                index: '/performanceProjectScript',
                                title: '性能测试脚本'
                            }
                            // {
                            //     index: 'performanceTask',
                            //     title: '性能测试任务'
                            // },
                        ]

                    },

                    // 流量回放
                    // {
                    //     index: 'playbackManage',
                    //     title: '流量回放',
                    //     subs: [
                    //         {
                    //             index: '/querydiff/page',
                    //             title: 'querydiff任务列表'
                    //         }
                    //     ]
                    // },
                    // 覆盖率
                    // {
                    //     index: 'jacocoManage',
                    //     title: '代码覆盖率',
                    //     subs: [
                    //         {
                    //             index: '/jacoco/report',
                    //             title: '查看覆盖率报告'
                    //         },
                    //         {
                    //             index: '/jacoco/create',
                    //             title: '生成覆盖率报告'
                    //         }
                    //     ]
                    // },
                    // 调用链
                    // {
                    //     index: 'callGraphManage',
                    //     title: '项目调用链',
                    //     subs: [
                    //         {
                    //             index: '/java/call/graph/page',
                    //             title: '调用链查询'
                    //         },
                    //         {
                    //             index: '/java/call/graph4callee/create',
                    //             title: '生成向上调用链'
                    //         },
                    //         {
                    //             index: '/java/call/graph4caller/create',
                    //             title: '生成向下调用链'
                    //         },
                    //         {
                    //             index: '/java/call/graph4diff/create',
                    //             title: '生成版本差异调用链'
                    //         }
                    //     ]
                    // }
                ]
            };
        },
        computed: {
            onRoutes() {
                return this.$route.path;
            }
        },
        created() {
            // 通过 Event Bus 进行组件间通信，来折叠侧边栏
            bus.$on('collapse', msg => {
                this.collapse = msg;
                bus.$emit('collapse-content', msg);
            });
        }
    };
</script>

<style scoped>
a {
    text-decoration: none;
    font-size: 14px;
    line-height: 56px;
    height: 56px;
    color: rgb(191, 203, 217);
    font-family: 'Helvetica', 'webfont', serif !important;
}
    .sidebar {
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        overflow-y: scroll;
    }

    .sidebar::-webkit-scrollbar {
        width: 0;
    }

    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 250px;
    }

    .sidebar > ul {
        height: 100%;
    }
</style>
