<template>
  <div id="Home">
    <el-container>
      <el-header style="padding: 0"><v-head @refresh="toRefresh"></v-head></el-header>
      <el-container>
        <el-aside width="200px"><v-sidebar></v-sidebar></el-aside>
        <el-main>
          <div class="content-box" :class="{ 'content-collapse': collapse }">
            <v-tags></v-tags>
            <el-col :span="24" class="content">
              <transition name="move" mode="out-in">
                <el-row>
                  <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
                  <el-col :span="24" class="container" style="padding: 15px">
                    <el-scrollbar style="height: 81vh">
                      <router-view style="height: 70vh; padding: 20px" :key="viewKey"></router-view>
                    </el-scrollbar>
                  </el-col>
                </el-row>
              </transition>
              <el-backtop target=".content"></el-backtop>
            </el-col>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import vHead from './Header.vue';
import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue';
import breadcrumb from './breadcrumb.vue';
import bus from './bus';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'Home',
  props: {},
  components: { vHead, vSidebar, vTags, breadcrumb },
  data: function () {
    return {
      collapse: false,
      tagsList: [],
      viewKey: new Date().getTime(),
    };
  },
  created() {
    bus.$on('collapse-content', (msg) => {
      this.collapse = msg;
    });
    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
    bus.$on('tags', (msg) => {
      let arr = [];
      for (let i = 0, len = msg.length; i < len; i++) {
        msg[i].name && arr.push(msg[i].name);
      }
      this.tagsList = arr;
    });
  },
  methods: {
    toRefresh() {
      this.viewKey = new Date().getTime();
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden !important;
}
</style>
