<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-03-20 14:36:37
 * @LastEditors: 无尘
 * @LastEditTime: 2020-05-14 16:14:12
 -->
<template>
  <div class="my-customer-wrap common-set-wrap salesleads-wrap">
    <vue-office-header :projectName="projectName" @collapseTag="collapseTag" @toRouterView="toRouterView"> </vue-office-header>
    <div class="enterprise-wrap__body">
      <div id="content" class="content">
        <nav-crumb :navpath="navpath" @selectBrandId="selectBrandId"> </nav-crumb>
        <div class="content-body">
          <div class="right-content border-box">
            <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);">
                  <common-detail-left :tabListData="tabListData" :activeSelTab="activeSelTab" @setSelectTab="setSelectTab"></common-detail-left>
                </div>
                <div class="apps-content-right border-box">
                  <transition name="fade" mode="out-in">
                    <router-view v-if="activeBrand" :brandId="activeBrand" :activeGroupId="activeGroup" :tabType="activeTab" @showTab="showTab" @reNav="reNav"></router-view>
                  </transition>
                </div>
              </div>
            </div>
          </div>
          <!-- <vue-gic-footer></vue-gic-footer> -->
          <!-- 公共组件 -->
        </div>
      </div>
    </div>
    <expired-dialog v-if="expiredFlag"></expired-dialog>
  </div>
</template>
<script>
import navCrumb from '@/components/nav/nav-app.vue';
import commonDetailLeft from '@/components/app/app-detail-left.vue';
import expiredDialog from '@/components/company/expired-dialog.vue';
import vueOfficeHeader from '@/components/vue-office-header';
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
export default {
  name: 'salesleads',
  data() {
    return {
      bgHeight: window.screen.availHeight - 288 + 'px',
      activeSelTab: '11',
      activeTab: '11',
      activeBrand: '',
      activeGroup: '',
      expiredFlag: false,
      navpath: [
        {
          name: '首页',
          path: '/index'
        },
        {
          name: '营销任务',
          path: '/trafficTaskSet'
        }
      ],
      defaultNavpath: [
        {
          name: '首页',
          path: '/index'
        },
        {
          name: '营销任务',
          path: '/trafficTaskSet'
        }
      ],
      tabListData: [
        {
          tabId: '1',
          tabName: '话务任务',
          icon: 'iconjichushezhi',
          children: [
            {
              tabId: '11',
              tabName: '话务任务设置',
              icon: 'iconribaoshezhi'
            },
            {
              tabId: '12',
              tabName: '话务任务记录',
              icon: 'iconribaoshezhi',
              // collapsFlag: true, // 三级菜单手动设置默认展开
              children: [
                {
                  tabId: '121',
                  tabName: '门店视图'
                },
                {
                  tabId: '122',
                  tabName: '任务视图'
                }
              ]
            }
          ]
        },
        {
          tabId: '2',
          tabName: '群发任务',
          icon: 'iconjichushezhi',
          children: [
            {
              tabId: '21',
              tabName: '群发任务记录',
              icon: 'iconjichushezhi',
              children: [
                {
                  tabId: '211',
                  tabName: '门店视图'
                },
                {
                  tabId: '212',
                  tabName: '计划视图'
                }
              ]
            }
          ]
        }
      ],
      navName: {
        11: '话务任务-话务任务设置',
        121: '话务任务-话务任务记录-门店视图',
        1211: '任务详情',
        122: '话务任务-话务任务记录-任务视图',
        1221: '任务门店详情',
        12211: '任务详情',
        211: '群发任务-群发任务记录-门店视图',
        2111: '任务详情',
        212: '群发任务-群发任务记录-计划视图',
        2121: '任务门店详情',
        21211: '任务详情'
      },
      navFrontPath: {
        11: '/trafficTaskSet',
        121: '/trafficTaskSet',
        1211: '/taskRecord',
        122: '/trafficTaskSet',
        1221: '/taskView',
        211: '/trafficTaskSet',
        2111: '/grStoreList',
        212: '/trafficTaskSet',
        2121: '/grTaskList'
      }
    };
  },
  computed: {},
  methods: {
    toRouterView(val) {
      let that = this;
      that.$router.push({
        path: val.path
      });
    },
    changeRoute(path) {
      this.$router.push(path);
    },
    setSelectTab(item) {
      let that = this;
      that.activeTab = item.tabId;
      this.navpath[2] = { name: this.navName[item.tabId], path: '' };
      switch (item.tabId) {
        case '1':
          that.changeRoute(`/trafficTaskSet`);
          break;
        case '11':
          that.changeRoute(`/trafficTaskSet`);
          break;
        case '12':
          that.changeRoute(`/taskRecord`);
          break;
        case '121':
          that.changeRoute(`/taskRecord`);
          break;
        case '122':
          that.changeRoute(`/taskView`);
          break;
        case '2':
          that.changeRoute(`/grStoreList`);
          break;
        case '21':
          that.changeRoute(`/grStoreList`);
          break;
        case '211':
          that.changeRoute(`/grStoreList`);
          break;
        case '212':
          that.changeRoute(`/grTaskList`);
          break;
      }
    },

    selectBrandId(id, groupId) {
      let that = this;
      that.activeBrand = id;
      that.activeGroup = groupId;
      sessionStorage.setItem('userInfoBrandId', id);
      that.getExpired(); // 到期通知
    },
    getExpired() {
      const that = this;
      let para = {
        enterpriseId: that.activeBrand
      };
      getRequest('/haoban-manage3-web/enterprise-is-over', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.expiredFlag = resData.result;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 各路由返回 tabId
     */
    showTab(id) {
      let ids = [...arguments];
      let that = this;
      that.activeTab = id;
      that.activeSelTab = id;
      this.navpath = [...this.defaultNavpath];
      if (ids.length) {
        ids.map(tabId => {
          this.navpath[this.navpath.length - 1].path = tabId === '21211' ? `/grStoreList?ecmPlanId=${this.$route.query.ecmPlanId}` : tabId === '12211' ? `/taskViewDetail?ecmId=${this.$route.query.ecmId}` : this.navFrontPath[tabId];
          this.navpath.push({ name: this.navName[tabId], path: '' });
        });
      }
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {},
      // 深度观察监听
      deep: true
    },
    activeGroup: function(newData, oldData) {
      const that = this;
      that.activeGroup = newData;
    }
  },
  mounted() {
    this.activeBrand = sessionStorage.getItem('userInfoBrandId');
    if (this.activeBrand) this.getExpired(); // 到期通知
    document.documentElement.style.backgroundColor = '#f0f2f5';
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: {
    navCrumb,
    commonDetailLeft,
    vueOfficeHeader,
    expiredDialog,
    errMsg
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.bg-82C5FF {
  background: #82c5ff;
}
.color-508CEE {
  color: #508cee;
}
.color-FF585C {
  color: #ff585c;
}
.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: 0 20px 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 {
        width: calc(100% - 157px);
        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>
<style lang="scss">
.salesleads-popover {
  padding: 14px !important;
  .m-b-10 {
    margin-bottom: 10px;
  }
  p {
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    line-height: 20px;
  }
  .temp {
    color: #909399;
    margin-bottom: 4px;
  }
  .m-l--6 {
    margin-left: -6px;
  }
  .m-b-14 {
    margin-bottom: 14px;
  }
}
</style>
