<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="item in menusCategory" :key="item.menuType" :label="item.title" :name="item.name" :lazy="true">
        <table-list :key="item.menuType" :menu-type="item.menuType" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TableList from './components/table-list.vue'
export default {
  name: 'SettingsMenus',
  components: {
    TableList
  },
  data() {
    return {
      activeName: 'manager',
      menusCategory: [
        {
          id: 1,
          title: '管理员菜单管理',
          name: 'manager',
          menuType: 1
        },
        {
          id: 2,
          title: '供应商管理',
          name: 'supplier',
          menuType: 2
        }
      ]
    }
  },
  created() {
    this.activeName = this.$route.query.activeName || 'manager'
  },
  methods: {
    handleClick() {}
  }
}
</script>

<style scoped>
.page-title {
  font-size: 18px;
  color: #404040;
}
</style>
