<template>
  <div class="siderBar">
    <el-menu :default-active="activeIndex" unique-opened class="el-menu-vertical bigMenuVertical" router @open="handleOpen" @select="handleSelect" :collapse="isCollapse">
      <el-submenu v-for="info in infos" :key="info.id" :index="info.pageurl">
        <template slot="title">
          <i class="iconfont" v-html="info.moduleimageurl"></i>
          <span slot="title">{{info.modulename}}</span>
        </template>
        <el-menu-item v-for="item in info.childModuleinfos" v-if="item.pageurl!='/mobility'" :key="item.id" :index="item.pageurl"><i class="iconfont" v-html="item.moduleimageurl"></i>&nbsp;{{item.modulename}}</el-menu-item>
        <li class="el-menu-item mobility" v-else><router-link to="/mobility" target="_blank"><i class="iconfont" v-html="item.moduleimageurl"></i>&nbsp;{{item.modulename}}</router-link></li>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
  import Api from '@/api/index.js'

  export default{
    name: 'SiderBar',
    conputed: {
      isCollapse () {
        return this.$store.state.isCollapse
      }
    },
    data () { 
      return { 
        activeIndex: '',
        infos: [],
        curIndex: '0',
        childModuleinfos: '', // 新增定义
        menuUrl: [] // 菜单链接集合
      }
    },
    watch: {
      $  (newVal, oldVal) {
        this.activeIndex = newVal.path 
        let uUrl = newVal.path
        var curData = this.infos[this.curIndex].childModuleinfos
        this.getChilds(this.infos, 'childModuleinfos')

        if (this.menuUrl.indexOf(uUrl) === -1) {
          this.$router.replace('/permission')
        }
        for (var i = 0; i < curData.length; i++) {
          if (uUrl === curData[i].pageurl) {
            this.$emit('change', curData[i].modulename)
            return false
          }
        }
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        let yObj = localStorage.getItem('gisopUserInfo')
        if (yObj !== null) {
          let yId = JSON.parse(yObj).info.userguid.trim()
          Api.getAllCatalog(yId, '0').then(data => {
            this.loading = false
            if (data.status === 0) {
              this.infos = data.data
              if (data.data.length === 0) {
                this.$router.replace('/permission')
              } else {
                this.getJsonData(data.data, 'childModuleinfos')
                this.getChilds(data.data, 'childModuleinfos')

                if (this.menuUrl.indexOf('/serviceMonitor/serviceAccess') === -1) {
                  this.$router.replace(this.menuUrl[0])
                }
              }
            } else {
              this.$message({
                type: 'error',
                message: '请求失败'
              })
            }
          }).catch(res => { 
            this.loading = false
            this.$message({
              type: 'error',
              message: '获取数据失败'
            })
          })
        }
      },
      // 抽取json数据
      getJsonData (data, children) {
        let arr = []
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < data[i][children].length; j++) {
            arr.push({pageurl: data[i][children][j].pageurl, modulename: data[i][children][j].modulename})
          }
        }
        this.$store.dispatch('setSideMenu', arr)
        return arr
      },
      // 递归判断是否存在某个页面
      getChilds (data, children) {
        for (var i = 0; i < data.length; i++) {
          if (data[i].parentguid !== null) {
            this.menuUrl.push(data[i].pageurl)
          } else {

          }
        
          if (data[i][children] !== null) {
            this.getChilds(data[i][children], 'childModuleinfos')
          } else {

          }
        }
        return data
      },
      // 打开时获取
      handleOpen (key, keyPath) {
        for (var i = 0; i < this.infos.length; i++) {
          if (key === this.infos[i].id) {
            this.curIndex = i
            return false
          }
        }
      },
      handleSelect (index, indexPath) {
        /* if (index === '/mobility') {
          this.$router.push({
            path: '/mobility',
            target: '_blank'
          })
        } */
      }
    }
  }
</script>

<style lang="scss">
  .siderBar{
    >.el-menu {
      border-radius: 0;
      
      .el-menu-item{ 
        color: #eee;
        &:hover { 
          color: #fff;
        }
      }

      .iconfont { 
        margin-right: 6px;
        font-size: 20px;
      }
    }

    .smallMenu {
      width: 50px;
      background: #353d48;
      li {
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;

        i {
          font-size: 20px;
          width: 50px;
          color: #898f9f;
        }
      }
    }    
  }
</style>
