<template>
  <div id="index">
    <vue-api-header />
    <div class="api-body border-box">
      <div class="api-body-wrap flex border-box">
        <vue-api-aside
          :active-sel-tab="activeSelTab"
          @setSelectTab="setSelectTab" />
        <div
          class="api-body-right border-box"
          style="height: calc(100vh - 56px);">
          <transition
            name="fade"
            mode="out-in">
            <router-view @showTab="showTab" />
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//  :style="{ height: windowH }"
import vueApiHeader from '@/components/vue-api-header.vue';
import vueApiAside from '@/components/vue-api-aside.vue';
/* import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error'; */
export default {
  name: 'Index',
  components: {
    vueApiHeader,
    vueApiAside
    // customDialog
    // vueOfficeHeader
  },
  data() {
    return {
      projectName: 'haoban-manage-web', // 当前项目名
      windowH: window.screen.height - 56 - 40 - 72 + 'px', // 页面内容高度
      collapseFlag: false, // 折叠参数
      activeSelTab: ''
    };
  },
  mounted() {
    const that = this;
    that.contentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 204 + 'px';
  },
  methods: {
    /**
     * @description: 路由跳转
     * @param {String} route
     * @author: 无尘
     */
    changeRoute(route) {
      this.$router.push(route);
    },
    /**
     * @description: 处理路由跳转
     * @param {Object} val
     * @author: 无尘
     */
    toRouterView(val) {
      const that = this;
      // 模拟检查数据,有两个参数
      /* {
       name:,
       path:
      }*/
      that.$router.push({
        path: val.path
      });
    },

    /**
     * @description: 各路由返回 tabId
     * @param {String} id
     * @author: 无尘
     */
    showTab(id) {
      let that = this;
      that.activeSelTab = id;
    },
    /**
     * @description: 选择后返回tabCode，做各路由判断
     * @param {Object} item
     * @author: 无尘
     */
    setSelectTab(item) {
      const that = this;
      let tabCode = item.tabCode;
      if (item.hasOwnProperty('children') && !!item.children.length) {
        tabCode = item.children[0].tabCode;
        if (item.children[0].hasOwnProperty('children') && !!item.children[0].hasOwnProperty('children').length) {
          tabCode = item.children[0].children[0].tabCode;
        }
      }
      that.$router.push({
        path: item.tabUrl,
        query: {
          tabCode: tabCode
        }
      });
    },
    /**
     * @description: 获取数据概览
     * @author: 无尘
     */
    getDataOverview() {
      /*  const that = this;
      let para = {
        all: false,
        fetchData: true
      }; */
      /* getRequest('/haoban-manage-web/home/find-enterprise-data', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.dataOverview = resData.result;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        }); */
    }
  }
};
</script>
<style lang="less">
#index {
  position: relative;
  width: 100%;
  .el-button--text:focus,
  .el-button--text:hover {
    color: #2656d4;
  }
  .api-body {
    position: relative;
    width: 100%;
    // height: 100%;
    height: calc(100% - 56px);
    margin-top: 56px;
    overflow: hidden;
    &-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      overflow-y: hidden;
    }
    &-left {
      position: fixed;
      width: 150px;
      min-width: 150px;
      max-width: 150px;
      height: 100%;
      background: rgba(255, 255, 255, 1);
      box-shadow: 2px 0px 5px 0px rgba(186, 186, 186, 0.2);
      z-index: 4;
    }
    &-right {
      position: relative;
      width: calc(100% - 150px);
      min-width: 1200px;
      overflow-y: hidden;
      background: #f5f7fa;
      margin-left: 150px;
      .api-body-content {
        position: relative;
        width: 100%;
        min-width: 1200px;
        height: 100%;
        background: #f5f7fa;
        overflow: auto;
        .common-nav {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 3;
        }
        .common-body-main {
          position: relative;
          // width: 100%;
          // min-height: calc(100% - 40px);
          // min-height: 100%;
          height: unset;
          margin: 60px 20px 20px 20px;
          // background: #f5f7fa;
          background: #fff;
          // padding-top: 60px;
          // overflow-y: auto;
          .api-main-content {
            position: relative;
            width: 100%;
            min-height: calc(100vh - 140px);
            padding: 20px;
            background: #fff;
            overflow-y: auto;
            // overflow-y: auto;
          }
        }
      }
    }
  }
}
.el-table .el-table__empty-block {
  height: 256px;
}

.el-table__empty-text {
  width: auto;
  margin-bottom: 80px;

  &::before {
    content: ' ';
    display: block;
    width: 60px;
    height: 60px;
    background: url(../../assets/no-data_icon.png) no-repeat center;
    margin: 0px auto 22px auto;
  }
}

.line-18 {
  line-height: 18px;
}

.search-wrap-right .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  color: #5584ff;
  border-color: #5584ff;
  background-color: #fff;
}

.search-wrap-right .el-radio-button__inner:hover {
  color: #5584ff;
}
</style>
