<template>
  <div class="PaymentManagementHome">
    <a-layout style="padding: 24px 0; background: #fff; min-height: calc(100vh - 186px);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="accountManagement"><div :class="[chooseMenuList === 'accountManagement' ? 'menuIcon menuIcon1_2' : 'menuIcon menuIcon1_1']"></div>账户中心</a-menu-item>
            <a-menu-item class="itemFlex" key="rechargeRecord"><div :class="[chooseMenuList === 'rechargeRecord' ? 'menuIcon menuIcon2_2' : 'menuIcon menuIcon2_1']"></div>充值记录</a-menu-item>
            <a-menu-item class="itemFlex" key="allowancePayment"><div :class="[chooseMenuList === 'allowancePayment' ? 'menuIcon menuIcon3_2' : 'menuIcon menuIcon3_1']"></div>津贴发放</a-menu-item>
            <a-menu-item class="itemFlex" key="recordsOfConsumption"><div :class="[chooseMenuList === 'recordsOfConsumption' ? 'menuIcon menuIcon4_2' : 'menuIcon menuIcon4_1']"></div>消费记录</a-menu-item>
            <a-menu-item class="itemFlex" key="systemReconciliation"><div :class="[chooseMenuList === 'systemReconciliation' ? 'menuIcon menuIcon6_2' : 'menuIcon menuIcon6_1']"></div>系统对账</a-menu-item>
            <a-menu-item class="itemFlex" key="cashierManagement"><div :class="[chooseMenuList === 'cashierManagement' ? 'menuIcon menuIcon5_2' : 'menuIcon menuIcon5_1']"></div>设置收银员</a-menu-item>
            <a-menu-item class="itemFlex" key="SetAdministrators"><div :class="[chooseMenuList === 'SetAdministrators' ? 'menuIcon menuIcon5_2' : 'menuIcon menuIcon5_1']"></div>设置管理员</a-menu-item>
            <a-menu-item class="itemFlex" key="paymentManagementSetting"><div :class="[chooseMenuList === 'paymentManagementSetting' ? 'menuIcon menuIcon7_2' : 'menuIcon menuIcon7_1']"></div>设置中心</a-menu-item>
            <!-- <a-menu-item key="operationLog">操作日志</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: 'paymentManagementHome',
  data () {
    return {
      defaultSelectedKeys: 'defaultSelectedKeys',
      chooseMenuList: 'accountManagement'
    }
  },
  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{
  display: flex;
  align-items: center;
}
.menuIcon{
  width: 13px;
  height: 13px;
  margin-right: 5px;
  margin-top: 1px;
  background-size: cover;
  display: inline-block;
}
.menuIcon1_1{
  background-image: url('../../../assets/menuIcon/accountManagement1.png');
}
.menuIcon1_2{
  background-image: url('../../../assets/menuIcon/accountManagement2.png');
}
.menuIcon2_1{
  background-image: url('../../../assets/menuIcon/rechargeRecord1.png');
}
.menuIcon2_2{
  background-image: url('../../../assets/menuIcon/rechargeRecord2.png');
}
.menuIcon3_1{
  background-image: url('../../../assets/menuIcon/allowancePayment1.png');
}
.menuIcon3_2{
  background-image: url('../../../assets/menuIcon/allowancePayment2.png');
}
.menuIcon4_1{
  background-image: url('../../../assets/menuIcon/recordsOfConsumption1.png');
}
.menuIcon4_2{
  background-image: url('../../../assets/menuIcon/recordsOfConsumption2.png');
}
.menuIcon5_1{
  background-image: url('../../../assets/menuIcon/cashierManagement1.png');
}
.menuIcon5_2{
  background-image: url('../../../assets/menuIcon/cashierManagement2.png');
}
.menuIcon6_1{
  background-image: url('../../../assets/menuIcon/systemReconciliation1.png');
}
.menuIcon6_2{
  background-image: url('../../../assets/menuIcon/systemReconciliation2.png');
}
.menuIcon7_1{
  background-image: url('../../../assets/menuIcon/paymentManagementSetting1.png');
}
.menuIcon7_2{
  background-image: url('../../../assets/menuIcon/paymentManagementSetting2.png');
}
.menuIcon8_1{
  background-image: url('../../../assets/menuIcon/paymentManagementSetting1.png');
}
.menuIcon8_2{
  background-image: url('../../../assets/menuIcon/paymentManagementSetting2.png');
}
</style>