<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="[defaultSelectedKeys]"
        :style="{ lineHeight: '64px' }"
        @click="routerPush"
      >
        <a-menu-item key="accountManagement" v-if="this.$store.state.menuList.indexOf('3000') > -1">支付管理</a-menu-item>
        <a-menu-item key="classificationOfDishes" v-if="this.$store.state.menuList.indexOf('4000') > -1">食堂管理</a-menu-item>
        <!-- <a-menu-item key="historicalVisitors">访客管理</a-menu-item> -->
        <a-menu-item key="rightsManagement" v-if="this.$store.state.menuList.indexOf('9000') > -1">权限管理</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content style="padding: 16px 50px 0px 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">
      design by mingwork
    </a-layout-footer>
  </a-layout>
</template>

<script>
import store from './../../store'
import { $http } from '../../api/axios'
import { config } from '../../api/config'
export default {
  name: 'home',
  components: {},
  data () {
    return {
      title: [],
      selectList: [],
      defaultSelectedKeys: 'accountManagement'
    }
  },
  created () {
    let that = this
    this.title = this.$route.meta.title ? this.$route.meta.title.split('/') : ''
    this.defaultSelectedKeys = this.$route.matched[2] && this.$route.matched[2].name ? this.$route.matched[2].name : ''
    let data = {
      item: 'e-card'
    }
    $http.post('/admin/menu/user', data).then(res => {
      const result = that.getSelectList(res.data.data)
      store.dispatch('setMenuList', that.selectList)
      console.log(that.selectList)
    })
    config.ddconfig()
  },
  watch: {
    $route (to, from) {
      this.title = to.meta.title.split('/')
      this.defaultSelectedKeys = this.$route.matched[1] && this.$route.matched[1].name ? this.$route.matched[1].name : ''
    }
  },
  computed: {},
  methods: {
    routerPush (obj) {
      this.$router.push({ name: obj.key })
    },
    getSelectList (data) {
      console.log(data, '12313123')
      let that = this
      const addKey = data => data.map(item => {
        if (item.children.length > 0) {
          addKey(item.children)
        }
        that.selectList.push(item.id)
      })
      const result = addKey(data)
      return result
    }
  },
  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%;
  margin-top: -3px;
}
.ant-layout-header{
  background: #ffffff !important;
}
</style>