<template>
  <el-container>
    <!-- 页眉 -->
    <el-header><Header /></el-header>
    <el-container class="container">
      <!-- 导航 -->
      <el-aside :width="is_collapse ? '65px' : '210px'">
        <NavigationMenu :menu_current="menu_current" :nav_config="nav_config" :is_collapse="is_collapse" @switchFold="switchFold" @clickNav="clickNav" />
      </el-aside>
      <!-- 页面 -->
      <el-main class="page-main">
        <main-header></main-header>
        <!-- 子路由 -->
        <keep-alive><router-view></router-view></keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Header from './components/Header.vue';
import NavigationMenu from './components/Navigation-menu.vue';
import MainHeader from './components/Main-header.vue';
import { mapActions, mapGetters, mapMutations } from 'vuex';
import { Loading } from 'element-ui';
import menu from '../../api/menu.js';
import system from '../../api/system.js';
import tree from "../../utils/TreeNode.js"

export default {
  menu_name: 'Home',
  components: {
    Header,
    NavigationMenu,
    MainHeader
  },
  data() {
    return {
      // 导航配置
      menu_current: null, // 当前导航
      nav_config: [
        {
          menu_name: '平台模型管理',
          icon: 'el-icon-menu',
          router: '0',
          children: [
            {
              menu_name: '模型主表维护',
              icon: 'el-icon-menu',
              router: '/FlameTableInfo'
            },
            {
              menu_name: '模型从表维护',
              icon: 'el-icon-menu',
              router: '/FlameTableInfoItem'
            },
            {
              menu_name: '查询主表维护',
              icon: 'el-icon-menu',
              router: '/flameQuery'
            },
            {
              menu_name: '查询从表维护',
              icon: 'el-icon-menu',
              router: '/flameQueryItem'
            }
          ]
        },

        {
          menu_name: '系统功能管理',
          icon: 'el-icon-menu',
          router: '2',
          children: [
            {
              menu_name: '系统功能菜单',
              icon: 'el-icon-menu',
              router: '/PageMenu'
            },
            {
              menu_name: '系统角色管理',
              icon: 'el-icon-menu',
              router: '/PageRole'
            },
            {
              menu_name: '系统用户管理',
              icon: 'el-icon-menu',
              router: '/PageUser'
            }
          ]
        },

        {
          menu_name: '基础数据管理',
          icon: 'el-icon-menu',
          router: '1',
          children: [
            {
              menu_name: '系统组织结构',
              icon: 'el-icon-menu',
              router: '/PageOrg'
            },
            {
              menu_name: '系统人员列表',
              icon: 'el-icon-menu',
              router: '/PagePerson'
            },

            {
              menu_name: '数据权限维度',
              icon: 'el-icon-menu',
              router: '/PageDataPermissonType'
            },
            {
              menu_name: '用户数据权限',
              icon: 'el-icon-menu',
              router: '/PageDataPermisson'
            },
            {
              menu_name: '系统参数维护',
              icon: 'el-icon-menu',
              router: '/PageConfig'
            },
            {
              menu_name: '系统序列维护',
              icon: 'el-icon-menu',
              router: '/PageSerial'
            }
          ]
        },
        {
          menu_name: '业务主数据管理',
          icon: 'el-icon-menu',
          router: '3',
          children: [
            {
              menu_name: '品牌信息维护',
              icon: 'el-icon-menu',
              router: '/MasterBrand'
            },
            {
              menu_name: '商品信息维护',
              icon: 'el-icon-menu',
              router: '/MasterGood'
            },
            {
              menu_name: '企业信息维护',
              icon: 'el-icon-menu',
              router: '/PageEnterprise'
            },
            {
              menu_name: '应用信息维护',
              icon: 'el-icon-menu',
              router: '/PageApp'
            }
          ]
        },
        {
          menu_name: '测试组件管理',
          icon: 'el-icon-menu',
          router: '4',
          children: [
            {
              menu_name: '测试树型的表格',
              icon: 'el-icon-menu',
              router: '/PageGridTree'
            },
            {
              menu_name: '测试双树页面',
              icon: 'el-icon-menu',
              router: '/test'
            },
            {
              menu_name: 'MarkDown测试页面',
              icon: 'el-icon-menu',
              router: '/PageMarkDown'
            },
            {
              menu_name: '测试SingleTree',
              icon: 'el-icon-menu',
              router: '/PageTreeSingle'
            }
          ]
        }
      ],
      // 导航展开
      is_collapse: false,
      data_list: [],
      table_menu_name: 'flame_table_info_item'
      // control_type:'Multi-Select',
      // key_id:'1671301807735073976'
    };
  },
  computed: {
    ...mapGetters('global', ['getOneTableInfoByTableName', 'flameTableInfoCount', 'flameTableInfoItemCount', 'flameTableInfoItems', 'flameTableInfos', 'navInfo'])
  },
  created() {},
  mounted() {
    let that = this;
    system.call_method('Sys_Flame_Menu', 'getUserMainMenu', {}, res => {
      if (res.result === true) {
        let menus = tree.getTreeBy(res.items,'flame_id','p_id','display_order','desc')
        console.log('menus==',menus,res.items);
        let i=0;
        menus.forEach(e=>{
          e.router = i;
          i++;
        });
        that.nav_config = menus;
      } else {
        console.log(res.items);
      }
    });
    // 加载用户的菜单
    // menu.getMenuList('sys_user', {}, res => {
    //   console.log('getmenulist:',res);
    //   that.nav_config = res;
    // });
  },
  methods: {
    ...mapActions('global', ['testOne', 'selectTab']),
    ...mapMutations('global', ['setUserInfo']),
    // 切换导航状态
    switchFold(e) {
      let that = this;
      that.is_collapse = e;
    },
    // 点击导航栏
    clickNav(tab) {
      let that = this;
      console.log('tab------',tab);
      
      
      
      let loading = Loading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, .7)'
      });
      that.selectTab(tab).then(loading.close());
    }
  }
};
</script>

<style lang="scss" scoped>
.el-header {
  background: $theme-color-1;
  padding: $spacing-small $spacing-mini;
}
.el-main {
  background: $theme-gray-3;
  padding: $spacing-small $spacing-small;
}
.container {
  height: calc(100% - 60px);
  display: flex;
  .page-main {
    height: 100%;
    flex-shrink: 2;
  }
}
</style>
