<template>
  <div class="my-content-wrap">
    <yw-other-header :headerIcon.sync="headerIcon" :headerName="headerName"></yw-other-header>
    <div class="my-content-content">
      <div class="dictionary-wrap" :style="{ 'min-height': bgHeight }">
        <div class="my-left-aside">
          <yw-left-aside :tabListData="tabListData" :activeSelTab="activeSelTab" @setSelectTab="setSelectTab"></yw-left-aside>
        </div>
        <div class="my-right-wrap">
          <router-view @showTab="showTab"></router-view>
        </div>
      </div>
    </div>
    <yw-footer></yw-footer>
  </div>
</template>

<script>
import { getRequest } from '@/api/api';
import ywOtherHeader from '@/components/yw-other-header';
import ywLeftAside from '@/components/yw-left-aside';
import ywFooter from '@/components/yw-footer/yw-footer';
export default {
  name: 'dictionary',
  data() {
    return {
      requestProject: 'gic-bizdict',
      bgHeight: window.screen.availHeight - 320 + 'px',
      tabList: [],
      tabListData: [],
      activeSelTab: '',
      // 头部的icon和name
      headerIcon: '',
      headerName: '',
      headerCode: ''
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.headerIcon = this.$route.query.icon;
      this.headerName = this.$route.query.name;
      this.headerCode = this.$route.query.code;
      this.activeSelTab = this.$route.query.tabId;
      this.getMenuTree();
    },
    // 获取左侧
    getMenuTree() {
      let para = {
        requestProject: 'gic-authcenter'
      };
      getRequest('/gic-authcenter/loginuser', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 0) {
            this.entranceList = [];
            let entranceList = resData.result.menuTree ? resData.result.menuTree : [];
            entranceList.forEach(item => {
              if (item.code == this.headerCode) {
                let tabListData = item.nodeChildren ? item.nodeChildren : [];
                this.tabListData = this.getNewTabList(tabListData);
                if (!this.activeSelTab) {
                  this.activeSelTab = this.tabListData[0].children.length > 0 ? this.tabListData[0].children[0].tabId : this.tabListData[0].tabId;
                }
              }
            });
          } else {
            this.$message.error(resData.message);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 整理左侧数据
    getNewTabList(tabListData) {
      tabListData.forEach(item => {
        if (item.isShow == 1) {
          item.tabId = item.id;
          item.tabName = item.menuName;
          item.icon = item.iconUrl ? item.iconUrl : 'iconcaidan';
          item.onlyIconActive = false;
          item.children = item.nodeChildren ? item.nodeChildren : [];
          if (item.children.length > 0) {
            item.children.forEach(el => {
              el.icon = '';
            });
            this.getNewTabList(item.children);
          }
        }
      });
      return tabListData;
    },
    // 选择后返回tabId，做各路由判断
    setSelectTab(item) {
      this.$router.push({
        path: item.uri,
        query: {
          name: this.headerName,
          icon: this.headerIcon,
          code: this.headerCode,
          tabId: item.tabId
        }
      });
    },
    // 各路由返回的tabId
    showTab(tabId) {
      this.activeSelTab = tabId;
    }
  },
  components: {
    ywOtherHeader,
    ywLeftAside,
    ywFooter
  }
};
</script>

<style lang="less" scoped>
.my-content-content {
  background: #f0f2f5;
}
.dictionary-wrap {
  display: flex;
  height: 100%;
  background: #fff;
}
</style>
