<script>
import ZooHeader from "@/components/ZooHeader.vue";
import ZooAside from "@/components/ZooAside.vue";
import ZooMain from "@/components/ZooMain.vue";
import ZooFooter from "@/components/ZooFooter.vue";
import {mapActions} from "vuex";
import {refreshData} from "@/utils/common.js";

export default {
  name: "ZooPanel",
  computed: {
  },
  data() {
    return {

    }
  },
  methods: {
    ...mapActions(['getUsers','getAnimals','getArchives','getBreedingPlans','getHealths'])
  },
  components: {
    ZooHeader,
    ZooAside,
    ZooMain,
    ZooFooter
  },
  mounted() {
    console.log("登录用户",this.$store.state.loginUser)
    //初始化数据
    // this.getUsers();
    // this.getAnimals();
    // this.getBreedingPlans();
    // this.getArchives();
    // this.getHealths();
    refreshData()
  }
}
</script>

<template>
  <div id="panel-root" class="center">
    <ZooAside class="aside absolute"></ZooAside>
    <ZooHeader class="header absolute"></ZooHeader>
    <ZooMain class="main absolute"><router-view></router-view></ZooMain>
    <ZooFooter class="footer absolute">软件项目管理-动物信息管理系统</ZooFooter>
  </div>
</template>

<style scoped>
#panel-root {
  width: 1300px;
  height: 700px;
  /*background-color: pink;*/
}
.aside {
  width: 200px;
  height: 698px;
}
.header {
  height: 60px;
  top: 0;
}
.footer {
  height: 20px;
  bottom: 0;
  text-align: center;
  line-height: 20px;
  background-color: lightgray;
}
.main {
  /*有footer*/
  height: 616px;

  /*没footer*/
  /*height: 636px;*/
  top: 61px;
}
.aside, .header, .main, .footer {
  border: gray solid 1px;
}
.header, .main, .footer {
  width: 1098px;
  right: 0;
}

</style>