<template>
  <div id="sidebars" :class="{sidebar:true,sideminibar:true}" style="background:#292f3b">
    <!-- <el-menu class="mcd-menu" :collapse="true" active-text-color="#303133">
      <el-submenu :index="index + ''" v-for="(child,index) in navData" :key="index">
        <template slot="title">
          <span style="position: absolute;top: 60px;left: 0px">{{child.title}}</span>
        </template>
        <el-submenu
          :index="index + '-' + index0"
          v-for="(item, index0) in child.subs"
          :key="index + '-' + index0"
        >
          <span slot="title">{{item.title}}</span>
          <div style="overflow-y: auto; max-height: 500px">
            <el-menu-item
              style="font-size: 14px"
              :index="index + '-' + index0 + itemIndex"
              :key="index + '-' + index0 + itemIndex"
              v-for="(item0,itemIndex) in item.data"
              :href="'#'+item0.index"
              @click="addHeaderTabs(item0)"
            >
              <span style="color:red" v-if="item0.index">*</span>
              {{item0.title}}
            </el-menu-item>
          </div>
        </el-submenu>
      </el-submenu>
    </el-menu>-->

    <el-menu
      style="height:100%;"
      default-active="2"
      class="el-menu-vertical-demo"
      route
      background-color="#fff"
      text-color="#000"
      :default-active="path"
      :default-openeds="open_list"
      @select="handleSelect"
    >
      <el-submenu index="1" class="navs">
        <template slot="title">
          <span>单据查询</span>
        </template>
        <el-menu-item-group>
          <el-menu-item class="item-1" index="/pu/pu_order/pu_order_invoices">上传单据</el-menu-item>
          <!-- <el-menu-item index="/pu/pu_order/pu_order">采购订单(面料)</el-menu-item> -->
          <el-menu-item  index="/pu/pu_order/pu_order_invoices_download">下载单据</el-menu-item>
           <el-menu-item class="item-2" index="/pu/pu_order/history">历史统计</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2" class="navs">
        <template slot="title">
          <span>单据类型定义</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/pu/pu_order/form_type">数据格式</el-menu-item>
          <!-- <el-menu-item index="/pu/pu_order/form_type">单据类型</el-menu-item> -->
          <!-- <el-menu-item class="item-2" index="/pu/pu_order/pu_order_out_garment">数据检测</el-menu-item> -->
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4" class="navs">
        <template slot="title">
          <span>我的关联</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/hsEdi/relevance">我的关联</el-menu-item>
          <!-- <el-menu-item index="/hsEdi/safety">添加关联</el-menu-item> -->
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3" class="navs">
        <template slot="title">
          <span>系统设置</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/camera/camera">摄像设置</el-menu-item>
          <el-menu-item class="item-1"  v-if="bIsAdmin" index="/pu/pu_order/user_mess">用户管理</el-menu-item>
          <el-menu-item index="/hsEdi/c_information">公司信息</el-menu-item>
          <el-menu-item index="/hsEdi/safety">安全中心</el-menu-item>
          <el-menu-item class="item-2" index="/hsEdi/aid">帮助中心</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
export default {
  name: 'v-sidebar',
  data() {
    return {
      iconData: { metas: '' },
      systems: '',
      items: '',
      value: '',
      open_list: ['1', '2', '3', '4'],
      input2: '',
      navData: [
        { title: '采购订单', subs: [] },
        { title: '出货订单', subs: [] },
        { title: '系统设置', subs: [] }
      ],
      navs: false,
      isHover: false,
      path: '/hsEdi/c_information',
      bIsAdmin: ''
    }
  },
  components: {
    VuePerfectScrollbar
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      this.path = to.fullPath
      if (this.path.indexOf('/pu/pu_order/data_layout/') > -1) {
        this.path = '/pu/pu_order/form_type'
      }
    }
  },
  computed: {
    onRoutes() {},
    toggleSystem() {
      return this.$store.state.toggleSystem
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push({ path: key })
    }
  },
  created() {
    this.$nextTick(_ => {
      if (sessionStorage.user) {
        const user = JSON.parse(sessionStorage.user)
        this.bIsAdmin = user.bIsAdmin
      }
      this.path = this.$route.fullPath
    })
  }
}
</script>
<style lang="scss" type="text/scss" >
#sidebar .el-menu-item.is-active {
  background-color: rgb(231, 235, 240) !important;
}
.el-menu-item {
  text-align: center;
  height: 40px;
}
.navs > .el-submenu__title {
  background: #292f3b !important;
  color: #fff !important;
}
.el-menu-item-group > ul {
  background: #292f3b;
  //  width:93%;
  // margin: 0 auto;
}
.el-menu-item-group > ul > li {
  background: #fff;
  width: 93%;
  margin: 0 auto;
}
.el-menu-item-group > ul > .item-1 {
  border-radius: 5px 5px 0 0;
}
.el-menu-item-group > ul > .item-2 {
  border-radius: 0 0 5px 5px;
}
.el-menu-item-group > ul > .is-active {
  background: #d4e2f7 !important;
}
.el-menu-item-group__title {
  padding: 0;
}

#sidebars > .el-menu {
  background: #292f3b !important;
}
.sidebar {
  height: 100%;
  display: block;
  position: fixed;
  min-width: 220px;
  left: 0;
  top: 70px;
  background-color: rgb(239, 240, 241);
}
// .sideminibar {
//   padding-top: 10px;
//   box-sizing: border-box;
//   top: 60px;
// }
.mcd-menu {
  width: 80px;
  background-color: rgb(41, 47, 59);
  box-sizing: border-box;
  border-right: none;
  .el-submenu {
    height: 80px;
  }
  .mcd-img {
    height: 35px;
    width: 35px;
    position: absolute;
    top: 10px;
    left: 22.5px;
  }
  .el-submenu__title {
    height: 80px !important;
    line-height: 80px !important;
  }
  .el-submenu .el-menu-item {
    height: 48px;
    line-height: 48px;
  }
  .el-submenu__title:hover {
    background-color: #fff;
  }
  .el-submenu__title:hover > span {
    color: #409eff !important;
  }
}
.el-menu--collapse > .el-menu-item span,
.el-menu--collapse > .el-submenu > .el-submenu__title span {
  overflow: visible;
  width: 100%;
  height: auto;
  display: block;
  visibility: visible;
  font-size: 12px;
  text-align: center;
  text-indent: 0;
  line-height: 12px;
  color: #fff;
}
</style>

