<template>
  <div class="left-nav">
    <transition name="slide-fade">
      <Menu
        ref="menu"
        :active-name="$route.meta.title && $route.meta.title.join('-')"
        :open-names="[$route.meta.title && $route.meta.title[0]]"
        :width="'256px'"
        theme="dark"
      >
        <div v-show="!navArrow">
          <div class="layout-logo-left">
            <!-- <img src="../assets/images/logo-nav.png" /> -->
            <img :src="logo" />
          </div>
          <Submenu
            v-for="(item, index) in navList"
            :key="index"
            :name="item.title"
          >
            <template slot="title">
              <Icon :type="item.icon"></Icon>
              {{ item.title }}
            </template>
            <Menu-item
              v-for="(subItem, subIndex) in item.subList"
              :key="subIndex"
              :name="`${item.title}-${subItem.title}`"
              :to="subItem.index"
            >
              {{ subItem.title }}
            </Menu-item>
          </Submenu>
        </div>
      </Menu>
    </transition>
  </div>
</template>
<script>
import logo from '../assets/images/logo-nav.png';
export default {
  data() {
    return {
      logo,
      navList: [
        {
          title: '组件列表',
          icon: 'ios-paper',
          subList: [
            {
              title: 'list',
              index: '/list'
            },
            {
              title: 'rowTools',
              index: '/components/rowTools'
            }
          ]
        }
      ],
      navArrow: false
    };
  },
  methods: {
    // 管理员
    handleAdminNav(role) {
      this.navList = [
        {
          title: '表单管理',
          icon: 'ios-paper',
          subList: [
            {
              title: '表单列表',
              index: '/formMajor'
            },
            {
              title: '高级字段',
              index: '/formMajorPro'
            },
            {
              title: '表格高级字段',
              index: '/formMajorInTable'
            },
            {
              title: '弹窗高级字段',
              index: '/formMajorModal'
            }
          ]
        },
        {
          title: '公共代码管理',
          icon: 'md-medical',
          subList: [
            {
              title: '公共代码',
              index: '/dataSource'
            }
          ]
        },
        {
          title: '静态资源管理',
          icon: 'ios-paper',
          subList: [
            {
              title: 'JS配置',
              index: '/resourceJs'
            },
            {
              title: 'JSON配置',
              index: '/resourceJson'
            }
          ]
        }
      ];
      if (role === '管理员') {
        this.setNavList({
          title: '系统设置',
          icon: 'md-medical',
          subList: [
            {
              title: '部门管理',
              index: '/formBu'
            },
            {
              title: '用户权限设置',
              index: '/userRole'
            },
            {
              title: 'BU管理',
              index: '/department'
            },
            {
              title: '模板配置',
              index: '/resourceModel'
            }
          ]
        });
      }
    },
    setNavList(item) {
      if (item) { this.$set(this.navList, 3, item); }
    },
    // 路由切换时展开对应的menu菜单
    handleNav() {
      this.$refs.menu.$children.map((item, index) => {
        this.$set(item, 'opened', false);
      });
      this.$nextTick(() => {
        this.$refs.menu.updateOpened();
      });
    },
    handleNavArrow() {
      this.navArrow = !this.navArrow;
      this.$emit('onNavArrowChange', this.navArrow);
    }
  }
};
</script>
<style scoped lang="less">
.left-nav {
  height: 100%;
  background: #191a23;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  position: relative;
  transition: width 2s;
  .layout-logo-left {
    line-height: 63px;
    text-align: center;
    overflow: hidden;
    img {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .nav-arrow {
    position: absolute;
    right: -20px;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
  }
}
.ivu-menu-dark,
.ivu-menu,
.ivu-menu-submenu,
.ivu-menu-submenu .ivu-menu-submenu-title,
.ivu-menu-submenu-title:hover,
.ivu-menu-opened,
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened {
  background: #191a23;
}
ul.ivu-menu {
  overflow-y: auto;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}
// .slide-fade-enter-active {
//   transition: width 2s;
// }
// .slide-fade-leave-active {
//   transition: width 2s;
// }
// .slide-fade-enter, .slide-fade-leave-to
// /* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
//   // transform: translateX(-200px);
// }
</style>
<style>
.ivu-menu-submenu-title,
.ivu-menu-submenu-title:hover {
  background: #191a23 !important;
}
</style>
