<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-03-20 14:36:37
 * @LastEditors: 无尘
 * @LastEditTime: 2020-05-13 14:43:29
 -->
<template>
  <div class="my-customer-wrap common-set-wrap">
    <nav-crumb :navpath="navpath" @selectBrandId="selectBrandId"> </nav-crumb>
    <div class="right-content border-box">
      <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 :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 :brandId="activeBrand" :activeGroupId="activeGroup" :tabType="activeTab" @showTab="showTab"></router-view>
            </transition>
          </div>
        </div>
      </div>
    </div>
    <expired-dialog v-if="expiredFlag"></expired-dialog>
    <!-- <vue-gic-footer></vue-gic-footer> -->
    <!-- 公共组件 -->
  </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 errMsg from '@/common/js/error';
// import showMsg from '@/common/js/showmsg';
import { getRequest } from '@/api/api';
export default {
  name: 'reviewed',
  data() {
    return {
      bgHeight: window.screen.availHeight - 288 + 'px',
      appName: '话务任务',
      activeSelTab: '11',
      activeTab: '11',
      // 面包屑参数
      navpath: [
        {
          name: '首页',
          path: '/index'
        },
        {
          name: '话务任务',
          path: ''
        }
      ],
      tabListData: [
        {
          tabId: '1',
          tabName: '话务任务记录',
          icon: 'iconhuawushuju',
          onlyIconActive: false,
          children: [
            {
              tabId: '11',
              tabName: '门店视图',
              icon: ''
            },
            {
              tabId: '12',
              tabName: '话务任务视图',
              icon: ''
            }
          ]
        },
        {
          tabId: '3',
          tabName: '会话任务列表',
          icon: '.iconhuihuajinglingicon-'
        },
        {
          tabId: '2',
          tabName: '任务设置',
          icon: 'iconbuliangpingjiashezhi',
          onlyIconActive: false,
          children: [
            {
              tabId: '21',
              tabName: '话务任务设置',
              icon: ''
            },
            {
              tabId: '22',
              tabName: '会话任务设置',
              icon: ''
            },
            {
              tabId: '23',
              tabName: '不良评价回访设置',
              icon: ''
            }
          ]
        }
      ],
      activeBrand: '', // 商户(品牌) id
      activeGroup: '', // 商户(品牌) groupId
      expiredFlag: false
    };
  },
  computed: {},
  methods: {
    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
          });
        });
    },
    /**
     * 路由跳转
     */
    changeRoute(path) {
      this.$router.push(path);
    },

    /**
     * 返回 的 brandId
     */
    selectBrandId(id, groupId) {
      let that = this;
      that.activeBrand = id;
      that.activeGroup = groupId;
      that.getExpired(); // 到期通知
    },

    /**
     * 选择后返回tabId，做各路由判断
     */
    setSelectTab(item) {
      let that = this;
      that.activeTab = item.tabId;
      switch (item.tabId) {
        case '1':
        case '11':
          that.changeRoute(`taskRecord`);
          break;
        case '12':
          that.changeRoute(`taskView`);
          break;
        case '2':
        case '21':
          that.changeRoute(`trafficTaskSet`);
          break;
        case '22':
          that.changeRoute(`taskSessionSet`);
          break;
        case '23':
          that.changeRoute(`badEvaluateSet`);
          break;
        case '3':
          that.changeRoute(`taskList`);
          break;
      }
    },

    /**
     * 各路由返回 tabId
     */
    showTab(id) {
      let that = this;
      that.activeTab = id;
      that.activeSelTab = id;
      that.tabListData.forEach(ele => {
        if (ele.tabId == id) {
          ele.onlyIconActive = false;
        }
        if (!!ele.children) {
          ele.children.forEach(el => {
            if (el.tabId == id) {
              ele.onlyIconActive = true;
            }
            if (!!el.children) {
              el.children.forEach(item => {
                if (item.tabId == id) {
                  ele.onlyIconActive = true;
                }
              });
            }
          });
        }
      });
    },
    changeNavShow(val) {
      const that = this;
      if (val.path == '/taskViewDetail') {
        that.navpath = [
          {
            name: '首页',
            path: '/index'
          },
          {
            name: '话务任务',
            path: '/taskView'
          },
          {
            name: '话务任务视图详情',
            path: ''
          }
        ];
      } else if (val.path == '/newSession') {
        that.navpath = [
          {
            name: '首页',
            path: '/index'
          },
          {
            name: '话务任务',
            path: '/taskView'
          },
          {
            name: that.$route.query.repairId ? '编辑会话任务' : '新建会话任务',
            path: ''
          }
        ];
      } else {
        that.navpath = [
          {
            name: '首页',
            path: '/index'
          },
          {
            name: '话务任务',
            path: ''
          }
        ];
      }
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        const that = this;
        that.changeNavShow(val);
      },
      // 深度观察监听
      deep: true
    },
    activeBrand: function(newData, oldData) {
      const that = this;
      that.activeBrand = newData;
    },
    activeGroup: function(newData, oldData) {
      const that = this;
      that.activeGroup = newData;
    }
  },
  mounted() {
    const that = this;
    that.changeNavShow(that.$route);

    document.documentElement.style.backgroundColor = '#f0f2f5';
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: {
    navCrumb,
    commonDetailLeft,
    expiredDialog
  }
};
</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%;
}
.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: 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% - 160px);
        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>
