<template>
  <div class="manage">
    <el-container style="height: 110vh;">
      <el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41)">
        <Aside :isCollapse="isCollapse" :logoTextshow="logoTextshow"></Aside>
      </el-aside>

      <el-container>
        <el-header style=" border-bottom: 1px solid #ccc;">

          <Header :collapseBtnClass="collapseBtnClass" @asideCollapse="collapse" :user="user" ></Header>
        </el-header>

        <el-main>

         <router-view @refreshUser="getUser"></router-view>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import Aside from "../components/Aside";
import Header from "../components/Header";

export default {

  name: 'HomeView',

  data() {

    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };

    return {
      tableData: Array(10).fill(item),
      collapseBtnClass:'el-icon-s-fold',
      isCollapse: false,
      sideWidth:200,
      logoTextshow:true,
      user: {},

    }
  },
  created(){
    this.getUser()
  },
  components:{
    Header,
    Aside
  }

  ,

  methods:{
    collapse() {  // 点击收缩按钮触发
       // 点击收缩按钮触发
        this.isCollapse = !this.isCollapse
        if (this.isCollapse) {  // 收缩
          this.sideWidth = 64
          this.collapseBtnClass = 'el-icon-s-unfold'
          this.logoTextshow = false
        } else {   // 展开
          this.sideWidth = 200
          this.collapseBtnClass = 'el-icon-s-fold'
          this.logoTextshow = true
        }
      },
    getUser(){
      let username=localStorage.getItem("user")? JSON.parse(localStorage.getItem("user")).username :""
      //从后台获取数据
      this.request.get("/user/username/" + username).then(res=>{
        //重新赋值后台的最新user数据
      this.user=res.data

      });
    },

  }



}
</script>

<style>

</style>