<template>
  <div class='adminbank-project-box'>
    <AsideNav :list='C_asideList' :asideHide='Data_asideHide' :asideTrigger='_asideTrigger' />
    <Container>
      <HeaderNav :list='C_headerList' :name='C_username'/>
      <Content :asideHide='Data_asideHide' :fullScreen='Data_fullScreen' :fullScreenStatus='Data_fullScreenStatus'>
        <div class='content-box'>
          <a class='anticon icon-arrowsalt fullscreen-icon' @click='_fullScreen' v-if='Data_fullScreen'></a>
          <component v-bind='C_content'></component>
        </div>
      </Content>
    </Container>
  </div>
</template>

<script>
  import './style.less';
  
  import ProfilePage from '../profile/profile'
    
  export default {
    data () {
      return {
        Data_asideHide: false,
        Data_fullScreen: false,
        Data_fullScreenStatus: false,
        Data_headerList: [
          {
            title: this.$lang('CHANGEPLAT'),
            url: '/home',
            target: true,
            hot: true,
            key: true,
          }
        ]
      }
    },
    computed: {
      C_headerList () {
        let header = this.$config.router.header || [];
        return header.concat(this.Data_headerList);
      },
      C_asideList () {
        let aside = this.$config.router.aside || [];
        return aside;
      },
      C_username () {
        return 'Mr Good';
      },
      
      C_content () {
        const { page, child, action } = this.$route.params;
        
        let pageObj = this.$config.page;
        
        let toUpCase = (str) => {
          return str
            ? `${str.substring(0,1).toUpperCase()}${str.substring(1)}`
            : '';
        }
        
        let comp;
        let title;
        let curPage = `${toUpCase(page)}${toUpCase(child)}${toUpCase(action)}Page`;
        console.log(curPage)
        if (!page) {
          comp = this.$COMP.Welcome;
          title = this.$config.title || this.$lang('HSB');
          this.Data_fullScreen = false;
          document.title = title;
        } else {
          if (pageObj[curPage]) {
            comp = pageObj[curPage];
            console.log(pageObj[curPage])
            this.Data_fullScreen = pageObj[curPage].meta.fullScreen;
            title = pageObj[curPage].meta && pageObj[curPage].meta.title ? pageObj[curPage].meta.title +' | '+this.$config.title : this.$config.title || this.$lang('HSB');
            document.title = title;
          } else {
            switch (curPage) {
              case 'ProfilePage': 
                comp = ProfilePage;
                
            title = ProfilePage.meta && ProfilePage.meta.title ? ProfilePage.meta.title +' | '+this.$config.title : this.$config.title || this.$lang('HSB');
            document.title = title;
            
                break;
              default:
              
            title = this.$COMP.Welcome.meta && this.$COMP.Welcome.meta.title ? this.$COMP.Welcome.meta.title +' | '+this.$config.title : this.$config.title || this.$lang('HSB');
            document.title = title;
            // title = pageObj[curPage].meta && pageObj[curPage].meta.title ? pageObj[curPage].meta.title +' | '+this.$config.title : this.$config.title || this.$lang('HSB');
            // document.title = title;
            
                comp = this.$COMP.Welcome;
                break;
            }
            this.Data_fullScreen = false;
          }
        }
        
        return {
          is: comp
        };
      }
    },
    created () {
    },
    methods: {
      _asideTrigger () {
        this.Data_asideHide = !this.Data_asideHide;
      },
      _fullScreen () {
        this.Data_fullScreenStatus = !this.Data_fullScreenStatus;
      }
    },
  }
</script>