<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 14:44:45
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-17 15:22:20
 -->
<template>
  <div class="enterprise-wrap">
    <!-- 公共头部菜单 -->
    <vue-office-header :project-name="projectName" :current-menu-code="currentMenuCode" @collapseTag="collapseTag" @toRouterView="toRouterView"> </vue-office-header>
    <div class="enterprise-wrap__body">
      <div id="content" class="content">
        <div class="content-body" :style="{ height: contentHeight }">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vueOfficeHeader from '@/components/vue-office-header.vue';
export default {
  name: 'EnterprisePage',
  components: {
    vueOfficeHeader
  },
  data() {
    return {
      projectName: 'haoban-manage-web', // 当前项目名
      currentMenuCode: 'contactsList',
      collapseFlag: false, // 折叠参数
      contentHeight: window.screen.availHeight - 5 + 'px'
    };
  },
  mounted() {
    const that = this;
    that.contentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 64 + 'px';
  },
  methods: {
    /**
     * @description: 处理路由跳转
     * @param {Object} val
     * @author: 无尘
     */
    toRouterView(val) {
      let that = this;
      // 模拟检查数据
      // //有两个参数
      // {
      //  name:,
      //  path:
      // }
      that.$router.push({
        path: val.path
      });
    },

    /**
     * @description: 折叠事件
     * @param {Boolean} val
     * @author: 无尘
     */
    collapseTag(val) {
      let that = this;
      that.collapseFlag = val;
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        const that = this;
        that.currentMenuCode = 'contactsList';
      },
      // 深度观察监听
      deep: true
    },
  },
};
</script>
<style lang="less" scoped>
.enterprise-wrap {
  background: #f0f2f5;

  .enterprise-wrap__body {
    .content {
      padding-top: 46px;
      min-width: 1400px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
  }
}
</style>
