<template>
  <div class="canteenManagementHome">
    <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 class="itemFlex" key="historicalVisitors">
              <div :class="[chooseMenuList === 'historicalVisitors' ? 'menuIcon menuIcon1_2' : 'menuIcon menuIcon1_1']"></div><div>历史访客</div>
            </a-menu-item>
            <a-menu-item class="itemFlex" key="visitorSetting">
              <div :class="[chooseMenuList === 'visitorSetting' ? 'menuIcon menuIcon2_2' : 'menuIcon menuIcon2_1']"></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: 'visitorManagementHome',
  data () {
    return {
      defaultSelectedKeys: 'defaultSelectedKeys',
      chooseMenuList: 'historicalVisitors'
    }
  },
  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>