<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 14:44:45
 * @LastEditors: 无尘
 * @LastEditTime: 2020-12-01 17:09:04
 -->
<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 :app-menu-data="appMenuData"></router-view>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vueOfficeHeader from '@/components/vue-office-header.vue';
import fetch from '@/api/menu-auth.js';
const { getRoleMenu } = fetch;
import showMsg from '@/common/js/showmsg.js';
export default {
  name: 'AppIndexPage',
  components: {
    vueOfficeHeader
  },
  data() {
    return {
      projectName: 'haoban-manage-web', // 当前项目名
      currentMenuCode: 'app-controls',
      collapseFlag: false, // 折叠参数
      contentHeight: window.screen.availHeight - 5 + 'px',
      appMenuData: []
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getData();
    });
  },
  mounted() {
    const that = this;
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', that.goBack, false);
    }
    that.contentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 64 + 'px';
  },
  destroyed(){
    const that = this;
    window.removeEventListener('popstate', that.goBack, false);
  },
  methods: {
    /**
     * @description: 回退
     * @author: 无尘
     */
    goBack(){
      const that = this;
      if (that.$route.path == '/apps') {
        // replace替换原路由，作用是避免回退死循环
        that.$router.replace({ path: '/app-list' });
      }
    },
    /**
     * @description: 处理简单数组-->父子级
     * @param {Array} data
     * @return {Array}
     * @author: 无尘
     */
    treeData(data) {
      let tree = data.filter(father => {
        // 循环所有项
        let branchArr = data.filter(child => {
          return father.menuCode == child.parentCode && child.isShow == 1; // 返回每一项的子级数组
        });
        if (branchArr.length > 0) {
          father.hasSonNode = true;
          father.children = branchArr; // 如果存在子级，则给父级添加一个children属性，并赋值
        } else {
          father.children = [];
          father.hasSonNode = false;
        }
        return father.level == 2 && father.isShow == 1; // 返回第一层
      });
      return tree;
    },
    /**
     * @description: 获取菜单
     * @author: 无尘
     */
    getData() {
      const that = this;
      const para = {
        applicationId: that.$route.query.applicationId,
        appType: 2
      };
      getRoleMenu(para)
        .then(async res => {
          // 返回空数组
          if (!res.result || !res.result.length) {
            showMsg.showmsg('该应用您无权限操作，请联系超级管理员！', 'warning');
            that.$router.push('/app-list');
            return false;
          }
          // 这里考虑有子级情况，后端接口返回是一个一个的菜单，不是父子级
          that.appMenuData = await that.treeData(JSON.parse(JSON.stringify(res.result)));
          // 避免刷新后跳转路由改变
          const pathArr = res.result.map(ele => ele.menuUrl).join(',');
          if (pathArr.indexOf(that.$route.path) != -1) {
            return false;
          }
          if (that.appMenuData[0] && !!that.appMenuData[0].children && !!that.appMenuData[0].children.length && !!that.appMenuData[0].children[0].children && !!that.appMenuData[0].children[0].children.length) {
            that.$router.push(`${that.appMenuData[0].children[0].children[0].menuUrl}?applicationId=${that.$route.query.applicationId}`);
            return false;
          }
          if (that.appMenuData[0] && !!that.appMenuData[0].children && !!that.appMenuData[0].children.length) {
            that.$router.push(`${that.appMenuData[0].children[0].menuUrl}?applicationId=${that.$route.query.applicationId}`);
            return false;
          }
          that.$router.push(`${that.appMenuData[0].menuUrl}?applicationId=${that.$route.query.applicationId}`);
        })
        .catch(function(error) {

        });
    },
    /**
     * @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;
    }
  },
  computed: {}
};
</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>
