<template>
  <div class="rightsManagementHome">
    <a-layout style="padding: 24px 0; background: #fff; min-height: calc(100vh - 149px);min-width:1100px">
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          mode="inline"
          :defaultSelectedKeys="[defaultSelectedKeys]"
          :defaultOpenKeys="['sub1']"
          style="height: 100%"
          @click="routerPush"
        >
          <a-menu-item v-if="this.$store.state.menuList.indexOf('9100') > -1" class="itemFlex" key="rightsManagement">
            <div :class="[chooseMenuList === 'rightsManagement' ? 'menuIcon menuIcon1_2' : 'menuIcon menuIcon1_1']"></div><div>角色管理</div>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
        <router-view/>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
export default {
  name: 'rightsManagementHome',
  data () {
    return {
      defaultSelectedKeys: 'defaultSelectedKeys',
      chooseMenuList: 'rightsManagement'
    }
  },
  created () {
    this.defaultSelectedKeys = this.$route.name
    this.chooseMenuList = this.$route.name
  },
  watch: {
    $route (to, from) {
      this.defaultSelectedKeys = to.name
      this.chooseMenuList = to.name
    }
  },
  methods: {
    routerPush (obj) {
      this.chooseMenuList = obj.key
      this.$router.push({ name: obj.key })
    }
  }
}
</script>

<style lang="less" scoped>
  .itemFlex{
    vertical-align:bottom;
    display: flex;
    align-items: center;
  }
  .menuIcon{
    width: 13px;
    height: 13px;
    margin-right: 5px;
    margin-top: -2px;
    background-size: cover;
    display: inline-block;
  }
  .menuIcon1_2{
    background-image: url('../../../assets/canteenIcon/classificationOfDishes1.png');
  }
  .menuIcon1_1{
    background-image: url('../../../assets/canteenIcon/classificationOfDishes2.png');
  }
  .menuIcon2_2{
    background-image: url('../../../assets/canteenIcon/menuManagement1.png');
  }
  .menuIcon2_1{
    background-image: url('../../../assets/canteenIcon/menuManagement2.png');
  }
  .menuIcon3_2{
    background-image: url('../../../assets/canteenIcon/consumptionOrder1.png');
  }
  .menuIcon3_1{
    background-image: url('../../../assets/canteenIcon/consumptionOrder2.png');
  }
  .menuIcon4_2{
    background-image: url('../../../assets/canteenIcon/consumptionStatistics1.png');
  }
  .menuIcon4_1{
    background-image: url('../../../assets/canteenIcon/consumptionStatistics2.png');
  }
</style>