<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-03-20 14:36:37
 * @LastEditors: 无尘
 * @LastEditTime: 2020-11-09 10:10:59
 -->
<template>
  <div class="my-customer-wrap common-set-wrap">
    <nav-crumb :navpath="navpath" @selectBrandId="selectBrandId"> </nav-crumb>
    <div class="right-content">
      <div class="right-box" style="min-height: calc(100vh - 112px);">
        <div class="apps-content flex" style="min-height: calc(100vh - 112px);">
          <div class="apps-content-left w-157" style="min-height: calc(100vh - 112px);">
            <common-detail-left :tab-list-data="tabListData" :active-sel-tab="activeSelTab" @setSelectTab="setSelectTab"> </common-detail-left>
          </div>
          <div class="apps-content-right">
            <transition name="fade" mode="out-in">
              <router-view :brand-id="activeBrand" :active-group-id="activeGroup" :tab-type="activeTab" @showTab="showTab" @change-nav="changeNav"> </router-view>
            </transition>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import navCrumb from '@/components/nav/nav-app.vue';
import commonDetailLeft from '@/components/app/app-detail-left.vue';
// import errMsg from '@/common/js/error';
// import showMsg from '@/common/js/showmsg';
export default {
  name: 'Reviewed',
  components: {
    navCrumb,
    commonDetailLeft
  },
  props: {
    appMenuData: {
      type: [ Array, Object ],
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      wxEnterpriseId: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).wxEnterpriseId : '',
      activeSelTab: '1',
      activeTab: '1',
      // 面包屑参数
      navpath: [
        {
          name: '首页',
          path: '/app-list'
        }
      ],
      tabListData: [
        /* {
          tabId: '1',
          menuName: '指标列表',
          iconUrl: 'iconweidu',
          menuUrl: '/target-list',
          children: []
        },
        {
          tabId: '2',
          menuName: '指标任务',
          iconUrl: 'iconrenqun',
          menuUrl: '/target-task',
          children: []
        },
        {
          tabId: '3',
          menuName: '下发设置',
          iconUrl: 'iconziliaocopy',
          menuUrl: '/target-set',
          children: []
        }*/
      ],
      activeBrand: '', // 商户(品牌) id
      activeGroup: '', // 商户(品牌) groupId
    };
  },
  mounted() {
    const that = this;
    that.tabListData = JSON.parse(JSON.stringify(that.appMenuData));
    document.documentElement.style.backgroundColor = '#f0f2f5';
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  methods: {
    /**
     * @description: 返回 的 brandId
     * @param {String} id
     * @param {String} groupId
     * @author: 无尘
     */
    selectBrandId(id, groupId) {
      const that = this;
      that.activeBrand = id;
      that.activeGroup = groupId;
    },
    /**
     * @description: 路由跳转
     * @param {String} path
     * @author: 无尘
     */
    changeRoute(path) {
      this.$router.push(path);
    },
    /**
     * @description: 选择后返回menuUrl，做各路由判断
     * @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}?applicationId=${that.$route.query.applicationId}`);
      }
    },

    /**
     * @description: 各路由返回 menuUrl
     * @param {String} menuUrl
     * @author: 无尘
     */
    showTab(menuUrl) {
      const that = this;
      that.activeTab = menuUrl;
      that.activeSelTab = menuUrl;
    },
    // 修改面包屑
    changeNav(arr) {
      this.navpath = [
        {
          name: '首页',
          path: '/app-list'
        },
        ...arr
      ];
    }
  },
  watch: {
    activeBrand: function(newData, oldData) {
      const that = this;
      that.activeBrand = newData;
    },
    appMenuData: function(newData, oldData) {
      const that = this;
      that.tabListData = JSON.parse(JSON.stringify(newData));
      // that.setCurrent();
    }
  }
};
</script>
<style type="text/less" lang="less" scoped>
.line-h-18 {
  line-height: 18px;
}

.my-customer-wrap {
  height: 100%;
  // 拖拽排序公共样式
  .move-row-cell {
    .icontuozhuaiopen {
      display: none;
    }
    &.show-icon {
      .icontuozhuaiopen {
        display: inline-block;
        vertical-align: middle;
      }
    }
    &:hover {
      .icontuozhuaiopen {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}
.right-content {
  /*width: 100%;*/
  padding: 0 20px 20px 20px;
  min-height: calc(100% - 160px);
  .right-box {
    background: #fff;
    min-height: 500px;
    padding: 0px;
    .apps-content {
      .apps-content-left {
        min-width: 205px;
        height: 100%;
        background: #fff;
        overflow-x: hidden;
        overflow-y: auto;
      }
      .apps-content-right {
        width: calc(100% - 205px);
        padding-left: 10px;
        background: #f0f2f5;
        .common-app-right {
          height: 100%;
          padding: 20px;
          box-sizing: border-box;
          background: #fff;
          &.no-padding {
            padding: 0;
          }
          .font-22 {
            font-size: 22px;
          }
        }
      }
    }
  }
}
</style>
