<template>
  <div class="page-container">
    <Head @listenMenuId="getMenuId"></Head>
    <div class="container-bottom">
      <Nav :menuId="menuId" v-show="menuId"></Nav>
      <Content v-if="menuId"></Content>
      <home-page v-if="!menuId "></home-page>
    </div>
  </div>
</template>
<script>
import Head from './homecomponents/Head'
import Nav from './homecomponents/Nav'
import Content from './homecomponents/Content'
import HomePage from './homecomponents/HomePage'
export default {
  name: "MainPage",
  components:{
    Head,Nav,Content,HomePage
  },
  data() {
    return {
      menuId: 0,
      menuName: []
    };
  },
  watch: {
    // 菜单头部浏览器前进或后退首页隐藏左边菜单
    '$route' (to, from) {
      if (to.path == '/mainPage') {
        this.menuId = 0
      } 
    }
  },
  mounted() {
  },
  methods: {
   getMenuId: function(id,arr) {
      this.menuId = id;
      sessionStorage.setItem('id', id);
    },
    // getMenuName (arr) {
    //   // console.log(arr)
    //   // this.menuName = arr
    // }
  }
};
</script>
<style scoped lang="stylus">
.page-container {
  width: 100%;
  height: 100%;
}
.container-bottom {
  flex: 1;
  display: flex;
  width: 100%;
  height: calc(100vh - 90px);
  // height: 100%;
}
/deep/ .ivu-input::-webkit-input-placeholder{
  color: #718EBD;
}
/deep/ .ivu-input::-moz-placeholder{   /* Mozilla Firefox 19+ */
  color: #718EBD;
}
/deep/ .ivu-input::-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
  color: #718EBD;
}
/deep/ .ivu-input::-ms-input-placeholder{  /* Internet Explorer 10-11 */
  color: #718EBD;
}
</style>