<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-03-20 14:36:37
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-25 15:32:01
 -->
<template>
  <div class="my-customer-wrap common-set-wrap">
    <vue-office-header :project-name="projectName" :current-menu-code="currentMenuCode" @collapseTag="collapseTag" @toRouterView="toRouterView" @leftData="leftData"> </vue-office-header>
    <div class="enterprise-wrap__body">
      <div id="content" class="content">
        <div class="content-body">
          <div class="right-content border-box" :style="{padding: showAsideMenu ? '20px': '0 20px 20px 20px'}">
            <div class="right-box" style="min-height: calc(100vh - 86px);">
              <div class="apps-content flex" style="min-height: calc(100vh - 86px);">
                <div class="apps-content-left w-157" style="min-height: calc(100vh - 86px)" v-show="showAsideMenu">
                  <common-detail-left :tab-list-data="tabListData" :active-sel-tab="activeSelTab" @setSelectTab="setSelectTab"></common-detail-left>
                </div>
                <div class="apps-content-right border-box" :style="{width: showAsideMenu ? 'calc(100% - 157px)' : '100%',paddingLeft: showAsideMenu ? '10px': '0'}">
                  <transition name="fade" mode="out-in">
                    <router-view :brand-id="activeBrand" :active-group-id="activeGroup" :tab-type="activeTab" @showTab="showTab" @showAsideMenu="show => showAsideMenu = show"></router-view>
                  </transition>
                </div>
              </div>
            </div>
          </div>
          <!-- <vue-gic-footer></vue-gic-footer> -->
          <!-- 公共组件 -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import commonDetailLeft from '@/components/app/app-detail-left.vue';
import vueOfficeHeader from '@/components/vue-office-header.vue';
/* import fetch from '@/api/menu-auth.js';
const { getRoleMenu } = fetch; */
export default {
  name: 'EnterpriseSetIndex',
  components: {
    commonDetailLeft,
    vueOfficeHeader
  },
  data() {
    return {
      bgHeight: window.screen.availHeight - 288 + 'px',
      activeSelTab: '1',
      activeTab: '1',
      currentMenuCode: 'enterprise',
      tabListData: [
        /* {
          tabId: '1',
          menuCode: 'enterpriseSet',
          tabName: '企业信息',
          icon: 'iconqiyexinxi'
        },
        {
          tabId: '2',
          menuCode: 'admin',
          tabName: '权限管理',
          icon: 'iconqiyexinxi',
          children: [
            {
              tabId: '2-1',
              menuCode: 'admin-list"',
              tabName: '管理员'
            },
            {
              tabId: '2-2',
              menuCode: 'store-admin-list',
              tabName: '门店角色'
            }
          ]
        },
        {
          tabId: '3',
          menuCode: 'superAdmin',
          tabName: '超级管理员',
          icon: 'iconqiyexinxi'
        } */
      ],
      activeBrand: '', // 商户(品牌) id
      activeGroup: '', // 商户(品牌) groupId
      showAsideMenu: true,
    };
  },
  mounted() {
    // const that = this;
    document.documentElement.style.backgroundColor = '#f0f2f5';
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  methods: {
    /**
     * @description: 路由跳转
     * @param {Object} val
     * @author: 无尘
     */
    toRouterView(val) {
      const that = this;
      // //有两个参数
      // {
      //  name:,
      //  path:
      // }
      that.$router.push({
        path: val.path
      });
    },
    /**
     * @description: 路由跳转
     * @param {String} path
     * @author: 无尘
     */
    changeRoute(path) {
      this.$router.push(path);
    },
    /**
     * @description: 返回 的 brandId
     * @param {String} id
     * @param {String} groupId
     * @author: 无尘
     */
    selectBrandId(id, groupId) {
      const that = this;
      that.activeBrand = id;
      that.activeGroup = groupId;
    },
    /**
     * @description: 选择后返回tabId，做各路由判断
     * @param {Object} item
     * @author: 无尘
     */
    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);
      }
    },

    /**
     * @description: 各路由返回 menuUrl
     * @param {String} menuUrl
     * @author: 无尘
     */
    showTab(menuUrl) {
      const that = this;
      that.activeTab = menuUrl;
      that.activeSelTab = menuUrl;
    },
    /**
     * @description: 获取左侧数据
     * @param {Array} arr
     * @author: 无尘
     **/
    leftData(arr) {
      const that = this;
      that.tabListData = arr[0].children;
    }
  },
  watch: {
    '$route.path'() {
      this.showAsideMenu = true;
    },
    activeBrand: function(newData, oldData) {
      const that = this;
      that.activeBrand = newData;
    },
    activeGroup: function(newData, oldData) {
      const that = this;
      that.activeGroup = newData;
    }
  }
};
</script>
<style type="text/less" lang="less" scoped>
.line-h-18 {
  line-height: 18px;
}
.tooltip-text {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-all;
}
.my-customer-wrap {
  height: 100%;
}

.content {
  padding-top: 46px;
  min-width: 1400px;
  box-sizing: border-box;
}

.right-content {
  /*width: 100%;*/
  padding: 20px;
  min-height: calc(100% - 157px);
  .right-box {
    background: #fff;
    min-height: 500px;
    padding: 0px;
    .apps-content {
      .apps-content-left {
        min-width: 157px;
        height: 100%;
        background: #fff;
        overflow-x: hidden;
        overflow-y: auto;
        .apps-content-left__title {
          height: 55px;
          line-height: 55px;
          padding: 0 0 0 18px;
        }
        .tab-left-list-cell {
          position: relative;
          text-align: left;
          margin-top: 15px;
          height: 30px;
          line-height: 30px;
          white-space: nowrap;
          overflow: hidden;
          cursor: pointer;
          &:hover {
            background: rgba(24, 144, 255, 0.06);
            i {
              color: #2f54eb;
            }
          }
          &.active-tab {
            background: rgba(24, 144, 255, 0.06);
            &::before {
              content: ' ';
              position: absolute;
              left: 0;
              top: 0;
              bottom: 0;
              width: 2px;
              background: #2f54eb;
              z-index: 1;
            }
            i {
              color: #2f54eb;
            }
          }
          .child-tab-left-list {
            li {
              position: relative;
              text-align: left;
              height: 30px;
              line-height: 30px;
              white-space: nowrap;
              overflow: hidden;
              cursor: pointer;
              &:hover {
                background: rgba(24, 144, 255, 0.06);
                i {
                  color: #2f54eb;
                }
              }
              &.active-tab {
                background: rgba(24, 144, 255, 0.06);
                &::before {
                  content: ' ';
                  position: absolute;
                  left: 0;
                  top: 0;
                  bottom: 0;
                  width: 2px;
                  background: #2f54eb;
                  z-index: 1;
                }
                i {
                  color: #2f54eb;
                }
              }
            }
          }
        }
      }
      .apps-content-right {
        // padding-left: 10px;
        background: #f0f2f5;
        .daily-set-wrap {
          height: 100%;
          background: #fff;
        }
        .app-detail-wrap {
          height: 100%;
          background: #fff;
        }
        .common-set-wrap {
          height: 100%;
          background: #fff;
        }
      }
    }
  }
}
</style>
