<template>
  <a-layout id="components-layout-demo-responsive">
    <a-layout-sider
      breakpoint="lg"
      collapsed-width="0"
      @collapse="onCollapse"
      @breakpoint="onBreakpoint"
    >
      <div class="logo" >个人数据中心</div>
      <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
        <a-menu-item key="1" @click="on_active(0)">
          <a-icon type="user" />
          <span class="nav-text">{{now_type[0]}}</span>
        </a-menu-item>
        <a-menu-item key="2" @click="on_active(1)">
          <a-icon type="video-camera" />
          <span class="nav-text">{{now_type[1]}}</span>
        </a-menu-item>
        <a-menu-item key="3" @click="on_active(2)">
          <a-icon type="upload" />
          <span class="nav-text">{{now_type[2]}}</span>
        </a-menu-item>
        <a-menu-item key="4" @click="on_active(3)">
          <a-icon type="user" />
          <span class="nav-text">{{now_type[3]}}</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header :style="{ background: '#fff', padding: 0, }" style="font-size:32px; text-align:center;">{{now_type[now_key]}}</a-layout-header>
      <a-layout-content :style="{ margin: '24px 16px 0' }">
        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
          {{content}}
        </div>
      </a-layout-content>
      <a-layout-footer style="textAlign: center">
        PC客户端demo ©2021 Created by 馒头骑士
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  name: 'landing-page',
  methods: {
    onCollapse(collapsed, type) {
      console.log(collapsed, type);
    },
    onBreakpoint(broken) {
      console.log(broken);
    },
    on_active(id){
      this.now_key = id;
      this.on_load_content();
    },
    on_load_content(){
      this.content = "欢迎来到"+this.now_type[this.now_key]+"界面！！！";
    }
  },
  data(){
    return{
      content:"",
      now_type:['个人信息','资料管理','历史信息','好友'],
      now_key:0,
    }
  },
  mounted(){
    // 在挂载的时候先自己选定第一个  然后输出界面
    this.on_active(0);
  }
};
</script>

<style>

#components-layout-demo-responsive{
  height: 700px;
}

#components-layout-demo-responsive .logo {
  color: white;
  font-size: 18px;
  text-align: center;
  
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
  padding-top: 2px;
}
</style>