<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 14:44:45
 * @LastEditors: 无尘
 * @LastEditTime: 2020-10-23 09:37:09
 -->
<template>
  <div class="review-wrap">
    <!-- 公共头部菜单 -->
    <vue-office-header :project-name="projectName" :current-menu-code="currentMenuCode" @collapseTag="collapseTag" @toRouterView="toRouterView" @leftData="leftData"> </vue-office-header>
    <div class="setting-wrap__body">
      <div id="content" class="content">
        <div class="content-body">
          <div class="content-body-inner flex border-box">
            <div class="apps-content-left w-157" style="min-height: calc(100vh - 86px);">
              <common-detail-left :tab-list-data="tabListData" :active-sel-tab="activeSelTab" @setSelectTab="setSelectTab"></common-detail-left>
            </div>
            <div class="apps-content-right border-box">
              <transition name="fade" mode="out-in">
                <router-view :brand-id="activeBrand" :active-group-id="activeGroup" :tab-type="activeTab" @showTab="showTab"></router-view>
              </transition>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vueOfficeHeader from '@/components/vue-office-header.vue';
import commonDetailLeft from '@/components/app/app-detail-left.vue';
import fetch from '@/api/menu-auth.js';
const { getRoleMenu } = fetch;
export default {
  name: 'ReviewCenter',
  components: {
    vueOfficeHeader,
    commonDetailLeft
  },
  data() {
    return {
      projectName: 'haoban-manage-web', // 当前项目名
      collapseFlag: false, // 折叠参数
      activeSelTab: '1',
      activeTab: '1',
      currentMenuCode: 'app-controls',
      tabListData: [
        /* {
          tabId: '1',
          tabName: '待审核',
          menuCode: 'unreview',
          icon: 'icondaishenhe_orange'
        },
        {
          tabId: '2',
          tabName: '已审核',
          menuCode: 'reviewed',
          icon: 'iconrenwu1'
        } */
      ]
    };
  },
  methods: {
    /**
     * 路由跳转
     *  @param {String} path
     */
    changeRoute(path) {
      this.$router.push(path);
    },
    /**
     * 选择后返回menuUrl，做各路由判断
     *  @param {Object} item
     */
    setSelectTab(item) {
      const that = this;
      that.activeTab = item.menuUrl;
      if (item.target == 1) {
        if (item.menuUrl.indexOf('http') != -1) {
          window.open(item.menuUrl);
        }else {
          window.open(`/haoban-4/${item.menuUrl}`);
        }
      }else {
        that.$router.push(item.menuUrl);
      }
    },

    /**
     * 各路由返回 menuUrl
     *  @param {String} menuUrl
     */
    showTab(menuUrl) {
      const that = this;
      that.activeTab = menuUrl;
      that.activeSelTab = menuUrl;
      that.tabListData.forEach(ele => {
        if (ele.menuUrl == menuUrl) {
          ele.onlyIconActive = false;
        }
        if (!!ele.children) {
          ele.children.forEach(el => {
            if (el.menuUrl == menuUrl) {
              ele.onlyIconActive = true;
            }
            if (!!el.children) {
              el.children.forEach(item => {
                if (item.menuUrl == menuUrl) {
                  ele.onlyIconActive = true;
                }
              });
            }
          });
        }
      });
    },
    // 处理路由跳转
    toRouterView(val) {
      const that = this;
      // 模拟检查数据,有两个参数
      /* {
       name:,
       path:
      }*/
      that.$router.push({
        path: val.path
      });
    },

    // 折叠事件
    collapseTag(val) {
      const that = this;
      that.collapseFlag = val;
    },
    /**
     * 获取左侧数据
     *  @param {Array} arr
     **/
    leftData(arr) {
      const that = this;
      arr[0].children.forEach((ele, i) =>{
        ele.tabId =  i + 1;
        ele.tabName =  ele.menuName;
        if (!!ele.children && ele.children.length) {
          that.setChildData(ele, i + 1);
        }
      });
      that.tabListData = arr[0].children;
    },
    setChildData(ele, pid) {
      const that = this;
      ele.children.forEach((ele, i) =>{
        ele.tabId =  pid + '-' + (i + 1);
        ele.tabName =  ele.menuName;
        if (!!ele.children && ele.children.length) {
          that.setChildData(ele, pid + '-' + (i + 1));
        }
      });
    },
    getData() {
      const that = this;
      const para = {};
      getRoleMenu(para)
        .then(res => {
          if (res.code == '0000') {
            const arr = res.result.map(ele => ele.menuCode);
            let newData = [];
            that.tabListData.forEach(ele => {
              if (arr.includes(ele.menuCode)) {
                newData.push(ele);
              }
            });
            that.tabListData = newData;
          }
        })
        .catch(function(error) {

        });
    }
  }
};
</script>
<style lang="less">
.review-wrap {
  background-color: #f0f2f5;
}
.setting-wrap__body {
  .content {
    padding-top: 46px;
    /* height: calc(100% - 64px);
    overflow-y: auto;*/
    min-width: 1400px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    .content-body {
      .content-body-inner {
        padding: 20px;
        min-height: calc(100% - 86px);
      }
      .apps-content-left {
        min-width: 157px;
        // height: 100%;
        background: #fff;
        overflow-x: hidden;
        overflow-y: auto;
      }
      .apps-content-right {
        width: calc(100% - 157px);
        padding-left: 10px;
        background: #f0f2f5;
      }

      .common-set-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        overflow-y: auto;

        .right-content {
          /*width: 100%;*/
          min-height: calc(100% - 86px);

          .right-box {
            background: #fff;
            padding: 20px;
          }
        }
      }
    }
  }
}

.el-table__body-wrapper .el-table__empty-block {
  height: 256px;
}

.el-table__empty-text {
  width: auto;
  margin-bottom: 0px;
}
</style>
