<template>
  <!-- <div>
    <vue-gic-header
      :projectName="projectName"
      @collapseTag="collapseTag"
      @toRouterView="toRouterView"
    ></vue-gic-header>
    <div
      class="layout"
      :style="{ height: bodyHeight - 64 + 'px'}"
    >
      <div class="app-main">
        <div class="rou-container">
          <div class="achievementwrap-left content-wrap"
            v-if="slideShow"
            :style="{height: (bodyHeight - 64) + 'px'}">
            <vue-gic-aside-menu
              :projectName="projectName"
              :leftModulesName="leftModulesName"
              :collapseFlag="collapseFlag">
            </vue-gic-aside-menu>
          </div>
          <div class="right-maincontainer">
            <keep-alive>
              <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
          </div>
        </div>
      </div>
    </div>
  </div> -->
  <div class="container">
    <dm-layout projectName="member">
      <keep-alive :include="keepAlive">
        <router-view :key="$route.path"></router-view>
      </keep-alive>
    </dm-layout>
  </div>
</template>

<script>
 import { doFetch } from "../../components/axios/api";
 import url from "../../components/axios/url";
import AppMain from "./components/AppMain";
export default {
  name: "layout",
  data() {
    return {
      keepAlive: [],
      collapseFlag: false,
      menuRouter: [],
      bodyHeight: document.body.clientHeight || document.documentElement.clientHeight,
      leftModulesName: "会员",
      projectName: "member"
    };
  },
  computed: {
    slideShow() {
      return this.$store.state.slideShow;
    }
  },
  methods: {
    setKeepAlive(to, from) {
      if (Array.isArray(to.meta.fromPath)) {
        const isKeepAlive = to.meta.fromPath.some(el => {
          let menuUrlReg = el;
          let pathConfigReg = /(:.*)(\/?)/;
          const pathRegStr = '([\\d\\w]+[\\-]*[\\d\\w]*)';
          while (pathConfigReg.test(menuUrlReg)) {
            menuUrlReg = menuUrlReg.replace(pathConfigReg, `${pathRegStr}$2`);
          }
          pathConfigReg = /(\/\*)(\/?)/;
          while (pathConfigReg.test(menuUrlReg)) {
            menuUrlReg = menuUrlReg.replace(pathConfigReg, `${pathRegStr}$2`);
          }
          const reg = new RegExp(`^${menuUrlReg}$`);
          return reg.test(from.path);
        });
        if (!isKeepAlive) {
          this.keepAlive = this.keepAlive.filter(el => el != to.meta.componentName);
        }
        setTimeout(() => {
          if (this.keepAlive.every(el => el != to.meta.componentName)) {
            this.keepAlive.push(to.meta.componentName);
          }
        }, 100);
      }
    },
    toRouterView(val) {
      this.$router.push({
        path: val.path
      });
    },
    getClerkMenu() {
       doFetch(url.clerkMenu,{
         project: 'gic-web'
       }).then(res => {
         this.menuRouter = res.data.result;
       }).catch(err => {
        //  checkStatus(err);
       })
    },
    collapseTag(val) {
      this.collapseFlag = !this.collapseFlag;
    }
  },
  created() {
    this.setKeepAlive(this.$route, {});
    this.$router.beforeEach((to, from, next) => {
      this.setKeepAlive(to, from);
      next();
    });
    this.getClerkMenu();
    window.onresize = () => {
      return (() => {
        this.bodyHeight =
          document.body.clientHeight || document.documentElement.clientHeight;
      })();
    };
  },
  components: {
    AppMain
  }
};
</script>

<style lang="stylus">
.layout {
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 1200px;
  padding-top: 64px;
  background-color: #f0f2f5;

  .app-main {
    height: 100%;
  }
}

.user-header-pop {
  min-width: 95px;
}

.el-popover.user-header-pop {
  min-width: 95px;
}

.rou-container {
  display: flex;
  height: 100%;

  .right-maincontainer {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
