<template>
  <div class="sidebar">
    <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" background-color="#ffffff" text-color="#727372" active-text-color="#ffd04b" unique-opened router>
      <template v-for="(item, n) in items">
        <template v-if="item.subs">
          <el-submenu :index="selectLink(item.menuLink)+n" :key="n">
            <template slot="title">
              <i :class="'menuIcon iconfont '+ item.icon"></i>{{ item.title }}
            </template>
            <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="selectLink(subItem.menuLink)">
        
              <span>{{subItem.title}}</span>
            
            </el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="selectLink(item.menuLink)" :key="n">
            <i :class="'menuIcon iconfont '+item.icon"></i>{{ item.title }}
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
            {
              icon: 'el-icon-setting',
              index: 'null1',
              title: '目标',
              menuLink: '',
              subs: [
                {
                  index: 'playing',
                  title: '安全生产目标管理',
                  menuLink: '/menuhome/menuhome'
                },
              ]
            },
            {
              icon: 'el-icon-menu',
              index: '4',
              title: '机构与职责',
              subs: [
                {
                  index: 'playing',
                  title: '安全生产职责管理',
                  menuLink: '/menuhome/menuhome/jigouduty'
                },
                
              ]
            },
        ],
        // items: []
      }
    },
    props:[
      'id'
    ],
    computed:{
      onRoutes(){
        // var myPath = this.$route.path.replace('/','')
        var myPath = this.$route.path

        console.log('onRoutes', myPath)

        if(myPath == 'addCourse' || myPath == 'courseClassify' || myPath == 'addKeTi' || myPath == 'checkKeTi' || myPath == 'studentManage' || myPath == 'addQuestion' || myPath == 'AnswerAnalyze' || myPath == 'StudentAnalyze'){
          // 模考课程
          return 'course'
        }
        else{
          return myPath;
        }

      },
    },
    created(){
      console.log(this.id)
      // this.loadMenuApi()
    },
    methods: {
      async loadMenuApi(){
        var data = new FormData()
        // data.append("roleId", this.id)
        console.log(this.id)
        const res = await this.$api.post('zhizai-1.0/tb/menu/selectMenu', data)
        console.log(res.data)
        if (res.data.message === true){
          var message = res.data.data
          var list = []
          for(var i=0; i<message.length; i++){
            if(message[i].fatherId == 0){
              list.push(message[i])
            }
          }
          if(list.length >0){
            for(var i=0; i<list.length; i++){
              var arr = []
              for(var j=0; j<message.length; j++){
                if(message[j].fatherId == list[i].id){
                  arr.push(message[j])
                  list[i].subs = arr
                }
              }
            }
          }
          this.items = list
          console.log(list)
        }
      },
      selectLink(url){
        var myUrl = ''
        if(url == null || url == ''){
          myUrl = 'null1'
        }else {
          myUrl = url.replace(/\s/ig,'');
        }
        console.log('selectLink', myUrl)

        return myUrl
      }
    }
  }
</script>

<style scoped lang="less">
  .sidebar{
    display: block;
    position: absolute;
    width: 13%;
    left: 0;
    // top: 70px;
    top: 1.2rem;
    bottom:0;
    background: #2E363F;
    overflow-y: auto;

    .tipNum{
      display: inline-block;
      /* display: inline; */
      background: red;
      width: 18px;
      /* height: 20px; */
      line-height: 18px;
      font-size: 12px;
      font-weight: 700;
      border-radius: 100%;
      text-align: center;
      color: #ffffff;
      margin-top: -10px;
    }
  }
  .sidebar > ul {
    height:100%;
  }
  .menuIcon{
    font-size: 20px;
    margin-right: 3px;
  }

</style>
