<template>
  <el-container class="df" style="height: 100%; border: 1px solid #eee">
    <el-header style="text-align: right; font-size: 12px;">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item>新增</el-dropdown-item>
          <el-dropdown-item>删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>王小虎</span>
    </el-header>
  <el-container>
    <el-aside width="220px" class="layout-menu" style="background:#42485B">
      <el-menu
          class="el-menu-vertical-demo"
          text-color="#fff"
          :router="true"
          style="background:#42485B"
          >
          <template v-for="item in menus">
              <el-submenu v-if="item.children && item.children.length>0" :index="item.id">
                  <template slot="title">
                      <i class="el-icon-location"></i>
                      <span>{{item.title}}</span>
                  </template>
                  <el-menu-item :key="children.id" v-for="children in item.children" :index="children.id"  :route="{path: children.path}">{{children.title}}</el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="item.id"   :route="{path: item.path}">
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{item.title}}</span>
              </el-menu-item>
          </template>
      </el-menu>
    </el-aside>
    
      <div class="layout-content flex1">
        <router-view></router-view>
      </div>
  </el-container>
</el-container>

</template>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>

<script>
  const MENUS = [
    { id: '1', title: '总揽', pid: 0, icon: 'menu-home', path: '/home2' ,
    },

    { id: '2', title: '共公模块组件', pid: 0, icon: "menu-system" ,
        children:[
            { id: '2-1', title: '列表1', pid: 2, path: '/testList' },
            { id: '2-2', title: '列表2', pid: 2, path: '/testList2' },
            { id: '2-4', title: '详情布局页', pid: 2, path: '/layoutPage' },
            { id: '2-3', title: '静态组件', pid: 2, path: '/testList/detail' },
        ]
    },
    { id: '4', title: '设备资产管理', pid: 0, icon: "menu-system" ,
        children:[

            { id: '4-5', title: '字典设置', pid: 8, path: '/dict' },
            { id: '4-6', title: '6标签模版', pid: 4, path: '/labelTp' },
            { id: '4-7', title: '12-1流程设置', pid: 48, path: '/processSetting' },
            { id: '4-8', title: '10-1职务管理', pid: 4, path: '/authority' },
            { id: '4-9', title: '4-2任务详情', pid: 4, path: '/task' },
            { id: '4-10', title: '2-3配件更换', pid: 4, path: '/replacement' },
            { id: '4-1', title: '2-2我的单据', pid: 4, path: '/myOrder' },
            
        ]
    },
    { id: '5', title: '运维管理', pid: 0, icon: "menu-system" ,
        children:[

            { id: '5-1', title: '故障申报', pid: 8, path: '/osmList' },
            { id: '5-2', title: '故障详情', pid: 4, path: '/osmDetail' },
            { id: '5-3', title: '打印', pid: 4, path: '/osmPrint' },
            { id: '5-4', title: '知识库', pid: 48, path: '/knowlage' },
            
        ]
    },
    { id: '6', title: '运营平台', pid: 0, icon: "menu-system" ,
        children:[

            { id: '6-1', title: '概览', pid: 8, path: '/ompHome' },
            { id: '6-2', title: '列表', pid: 4, path: '/ompList' },
            { id: '6-3', title: '详情', pid: 4, path: '/ompDetail' },
            { id: '6-4', title: '首页设置', pid: 48, path: '/ompSetting' },
            { id: '6-5', title: '字典', pid: 48, path: '/ompDict' },
            
        ]
    },
    { id: '7', title: '代理商', pid: 0, icon: "menu-system" ,
        children:[

            { id: '7-1', title: '概览', pid: 7, path: '/prmHome' },
            
        ]
    },
    { id: '10', title: '共公组件使用示使', pid: 0, icon: 'menu-home', path: '/' ,
    },
    
]
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item),
        menus: MENUS
      }
    }
  };
</script>