<template>
  <a-layout id="components-layout-demo-top-side">
    <a-layout-header class="header">
      <div class="logo">
        <img src="../../assets/logo.png" />
      </div>
      <a-menu
        theme="light"
        mode="horizontal"
        :defaultSelectedKeys="['accountManagement']"
        :style="{ lineHeight: '64px' }"
        @click="routerPush"
      >
        <!-- <a-menu-item key="1">应用管理</a-menu-item> -->
        <a-menu-item key="accountManagement">支付管理</a-menu-item>
        <!-- <a-menu-item key="3">设备管理</a-menu-item>
        <a-menu-item key="4">位置管理</a-menu-item>
        <a-menu-item key="5">权限管理</a-menu-item> -->
      </a-menu>
    </a-layout-header>
    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>首页</a-breadcrumb-item>
        <a-breadcrumb-item v-for="item in title" :key="item">{{item}}</a-breadcrumb-item>
      </a-breadcrumb>
      <router-view/>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      mingwork后台管理系统
    </a-layout-footer>
  </a-layout>
</template>

<script>
export default {
  name: 'home',
  components: {},
  data () {
    return {
      title: []
    }
  },
  created () {
    this.title = this.$route.meta.title ? this.$route.meta.title.split('/') : ''
  },
  watch: {
    $route (to, from) {
      this.title = to.meta.title.split('/')
    }
  },
  computed: {},
  methods: {
    routerPush (obj) {
      this.$router.push({ name: obj.key })
    }
  },
  mounted () {}
}
</script>

<style>
#components-layout-demo-top-side .logo {
  width: 200px;
  height: 31px;
  float: left;
  margin-right: 25px;
}
#components-layout-demo-top-side .logo img{
  width: 100%;
}
.ant-layout-header{
  background: #ffffff !important;
}
</style>