<template>
  <div :class="['side-bar', collapse ? 'collapse' : '']">
     <div class="collapse-btn" @click="collapseChage">
        <span class="side-title" v-if="!collapse">{{ currentNavBar.item_name }}</span>
        <i class="iconfont" v-if="collapse">&#xe607;</i>
        <i class="iconfont" v-else>&#xe606;</i>
    </div>
    <div class="side-bar-menu">
      <el-menu
        :default-active="currentMenuRoute"
        :default-openeds="currentOpenedsIndex"
        :collapse="collapse"
        text-color="#606266"
        active-text-color="#1890FF"
        unique-opened>
        <template v-for="(item,index) in menus">
          <template v-if="item.children || item.children.length">
            <el-submenu :index="`${item.mvc_url}_${index}`" :key="item.item_id" >
              <template slot="title">
                <i :class="['menu-icon',item.mvc_icon_css]"></i>
                <span slot="title">{{ item.item_name }}</span>
              </template>
              <template v-for="subItem in item.children">
                <el-menu-item :index="`${subItem.mvc_url}`" :key="subItem.item_id" @click.native="handleSubMenuClick(subItem)">{{ subItem.item_name }}</el-menu-item>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="`${item.mvc_url}_${index}`" :key="item.item_id">
              <i :class="['menu-icon',item.mvc_icon_css]"></i>
              <span slot="title">{{ item.item_name }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
import bus from '@/assets/bus'
export default {
    name: 'LayoutSidebar',
    props: {
        currentNavBar: {
            type: Object,
            default: () => {
                return []
            }
        },
        currentMenuRoute: {
            type: String,
            default: ''
        }
    },
    watch: {
        currentNavBar: {
            deep: true,
            handler (newV, oldV) {
                if (Object.keys(newV).length) {
                    this.currentOpenedsIndex = []
                    this.menus = newV.children
                }
            }
        },
        userInfo (val) {
            if (val) {
                let role = val.UserRole.filter(item => { return item.RoleCode === 'Administrator' })
                let registerUserManager = val.UserRole.filter(item => { return item.RoleCode === 'RegisterUserManager' })
                this.items[2].permission = role.length > 0
                this.items[1].permission = role.length > 0 // 系统管理员角色才能操作微信设置模块
                if (registerUserManager.length > 0) {
                    this.items[2].permission = true
                    this.items[2].subs.length = 0
                    this.items[2].subs.push(
                        {
                            title: '登记用户管理',
                            index: '/systemManagement/registerUserManage/RegisterUserManage'
                        }
                    )
                }
            }
        }
    },
    data () {
        return {
            collapse: false,
            menus: [],
            currentOpenedsIndex: []
        }
    },
    computed: {
        onRoutes () {
            //  console.log('this.$route.path',this.$route.path.replace('/', ''));
            return this.$route.path
        },
        userInfo () {
            return this.$store.state.userInfo
        }
    },
    methods: {
    // 侧边栏折叠
        collapseChage () {
            this.collapse = !this.collapse
            bus.$emit('collapse', this.collapse)
        },
        handleSubMenuClick (menuItem) {
            this.$emit('handleMenuClick', menuItem)
        }
    },
    created () {
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg
        })
    },
    mounted () {
    // this.$nextTick(() => {
    //   window.onresize = () => {
    //     if (document.body.clientWidth < 1500) {
    //       this.collapse = false
    //       bus.$emit('collapse', this.collapse)
    //     }
    //   }
    // })
    }
}
</script>

<style lang="less" scoped>
.side-bar {
  position: absolute;
  left: 0;
  top: 64px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  // overflow-y: scroll;
  background: #fff;
  .collapse-btn {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: #F2F2F2;
    cursor: pointer;
    .side-title {
      flex: 1;
      color: #303133;
      font-weight: 600;
    }
  }
  .side-bar-menu {
    flex: 1;
    overflow-y: scroll;
    /deep/.el-menu {
      border-right: 0;
      .el-submenu__title {
        padding-left: 15px !important;
        i {
          margin-right: 0px !important;
        }
        span {
          // font-weight: 600;
          font-size: 16px;
          color: #000;
        }
      }
      .el-menu-item {
        padding-left: 50px !important;
      }
      .el-submenu.is-active .el-submenu__title,
      .el-submenu__title:hover {
         span {
          color: #409EFF !important;
         }
        i {
          color: #409EFF !important;
        }
       background-color: #fff;
      }
      .el-menu-item.is-active {
        background-color: #E6F7FF;
        border-right: 3px solid #1890FF;
      }
      .el-menu-item:hover {
        background-color: #E6F7FF;
        // border-right: 3px solid #1890FF;
        color: #1890FF !important;
        // border-right: 3px solid #138DFF;
      }
    }
  }
  .side-bar-menu::-webkit-scrollbar {
    width: 0;
  }
  &:not(.collapse) {
    width: 200px;
  }
}

</style>
