<template>
  <transition :duration="1000" name="face">
    <!-- class="main-content" -->
    <div id="mainHomeContent" ref="mainHomeContent" class="main-content" v-bind:class="[currentAct ? 'main-content-first' : 'main-content-second']">
      <div class="main-body">
        <div class="main-nav clearfix" ref="mainNavRef" :class="opencloseExpandBtnFlag?'':'mainNavOpenCloseExpand'">
          <!-- <div class="homepageN fl" @click="onHomeTabClick">            
            <div class="a-link">
              <img src="../assets/images/Tloa_home_returnhome@2x.png">
              工作台
            </div>
          </div> -->
          <div class="close-all-tab fr" >
            <span @click="closeAllTab">{{$t('btns.close_all')}}</span>
            <!-- <span style="margin-left: 10px;margin-right:10px;" @click="setWidget">
              <i class="el-icon-setting" style="color:#999; font-size:15px;"></i>
            </span> -->
            <span  @click="setWidget" class="img">
              <img src="../assets/images/Tloa_home_set@2x.png" alt="">
            </span>
          </div>
          <div class="main-tab-con clearfix">
            <div class="img fl" @click="toLeft">
              <img class="fl" src="../assets/images/Tloa_home_nextreturn@2x.png">
            </div>
            <div class="img fr" @click="toRight">
              <img class="fr" src="../assets/images/Tloa_home_nextstep@2x.png">
            </div>          
            <!-- <i class="glyphicon glyphicon-menu-left arrow-upicon fl"></i> -->
            <!-- <i class="glyphicon glyphicon-menu-right arrow-downicon fr"></i> -->
            <div class="main-tab-carousel" ref="box">
              <ul class="main-tab" ref="ulBox">
                <li v-for="(tab,index) in tabs" :key="tab.id" :ref="'li'+index">
                  <div
                    class="main-sortable"
                    :class="{ 'sortable-active': tab.active }"
                    :title="tab.name || tab.title"
                    @click="onTabClick(tab,index)"
                  >
                    <cite>{{tab.name || tab.title}}</cite>
                    <!-- <i class="glyphicon glyphicon-remove" @click.stop="onCloseBtnClick(tab)"></i> -->
                    <i class="el-icon-close" @click.stop="onCloseBtnClick(tab,index)"></i>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="main-tab-content">
          <div class="myapps-component" :style="{display: isHomeActive()?'block':'none'}">
            <main_homepage 
              ref="mainHomepage"
              v-bind="$attrs"
              v-on="$listeners" 
              v-if="isRouterHomepage"
              @event="refreshPage"
            />
            <!-- 工作台底部版权  v-if="copyRight"-->
            <div class="footerCopyRight" v-if="copyRight"><span>平台由百川信（北京）信息服务有限公司开发与运营&最终解释权归百川信所有</span></div>
          </div>
          <div
            class="myapps-component"
            v-for="(tab, i) in tabs"
            :key="tab.id"
            :style="{ 'display': tab.active ? 'block':'none' }"
          >
            <obpm_open_container
              :ref="`container${i}`"
              v-if="isRouterAlive" 
              v-bind="$attrs"
              v-on="$listeners"
              :openParams="tab"
              @event="setTabName"
              >
            </obpm_open_container>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import obpm_open_container from "@/components/obpm_open_container.vue"
// import main_homepage from "@/components/main_homepage.vue"
import main_homepage from "@/components/application.vue"

import { constants } from 'crypto';
// import main_pending from "@/components/main_pending.vue"
// import main_processing  from "@/components/main_processing.vue"
// import instrument from "@/components/instrument.vue"

export default {
  name: "obpm-main-content",
  props: ["tabs","opencloseExpandBtnFlag"],
  components: {
    obpm_open_container,
    main_homepage
  },
  watch: {
    tabs:{
      immediate:true,
      handler(val){
        if(val && val.length > 0) {
          for(let i=0; i<val.length; i++) {
            if(val[i].active && i == 6) {
              this.$nextTick(() => {
                this.$refs[`box`].scrollLeft = this.$refs[`box`].scrollLeft + 31;
              })
            }else if(val[i].active && i > 6) {
              this.$nextTick(() => {
                this.$refs[`box`].scrollLeft = this.$refs[`box`].scrollLeft + 135;
              })
            }else if(val[i].active && i <= 6) {
              this.$nextTick(() => {
                this.$refs[`box`].scrollLeft = 0;
              })
            }
          }
        }
      },
      deep: true,
    },
  },
  data: function() {
    return {
      isRouterAlive: true,
      isRouterHomepage: true,
      currentAct:true,
      copyRight:location.origin.indexOf('v5qy.test.baibaodun.cn')>-1||location.origin.indexOf('v5qy.baibaodun.cn')>-1?true:false,
    };
  },
  methods: {
    setTabName(name){ //在form_normalform设置tab的名字
      if(name) {
        let tabs = this.tabs;
        tabs.some(item => {
          if(item.active == true){
            item.name = name;
            return true;
          }
        });
      }
    },
    setMaincontent(flag) {//工作台样式切换
      this.currentAct=flag
      // this.currentAct = !this.currentAct;
    },
    toLeft() {
      if(0 < this.$refs[`box`].scrollLeft < 809) {
        this.$refs[`box`].scrollLeft = 0
      }else if(this.$refs[`box`].scrollLeft >=  809) {
        this.$refs[`box`].scrollLeft = this.$refs[`box`].scrollLeft - 809;
      }
    },
    toRight() {
      this.$refs[`box`].scrollLeft = this.$refs[`box`].scrollLeft+809;
    },
    refreshPage() {
      this.isRouterHomepage = false;
      this.$nextTick( () => {
        this.isRouterHomepage = true;
      })
    },
    closeAllTab() {
      this.$emit("close-all");
    },
    setWidget() {
      this.$refs.mainHomepage.Settherollinginstall();
    },

    parentHandleclick(e) {
      if(this.tabs && this.tabs.length>0) {
        for(let i=0; i<this.tabs.length; i++) {
          if(this.tabs[i].id == e.refreshId) {
            this.$refs[`container${i}`][0].updateData();
          }
        }
      }
      // this.isRouterAlive = false
      // this.$nextTick(function () {
      //   this.isRouterAlive = true
      // })
    },

    isHomeActive: function() {
      var flag = false;
      this.tabs.forEach(element => {
        flag = element.active || flag;
      });
      return !flag;
    },

    onCloseBtnClick: function(tab,index) {
      let haveRefresh = ''
      if(this.tabs && this.tabs.length>0) {
        for(let i=0; i<this.tabs.length; i++) {
          if(this.tabs[i].id == tab.refreshId) {
            haveRefresh = true
            this.$refs[`container${i}`][0].updateData(this.tabs[i].linkType); //当直接点击关闭标签页时，类型传到obpm_open_container组件
          }
        }
      }
      if((tab.isIncludeCreate == "include" || tab.istabCreate == "tab") && tab.isRefresh) {
        this.$store.commit('SET_INCLUDEVIEWID', {id: tab.randomRefreshId, templateId: tab.templateId});
      }
      if(!haveRefresh) { //表单新页签打开外链
        this.$store.commit('SET_FORMTABLEUPDATEID', {id: tab.randomRefreshId});
      }
      this.$emit("close-tab", tab,index);
    },

    //打开视图保存后刷新数据
    refreshView(tab) {
      if(tab.viewType && tab.viewType == 'CollapsibleView' && tab.isIncludeCreate == 'include') { //只针对包含元素下的折叠视图进行刷新
        if(this.tabs && this.tabs.length>0) {
          for(let i=0; i<this.tabs.length; i++) {
            if((this.tabs[i].runAfterParams && this.tabs[i].runAfterParams.docId == tab.refreshId) || this.tabs[i].id == tab.refreshId) {
              this.$refs[`container${i}`][0].updateData(this.tabs[i].linkType, tab.isIncludeCreate);
            }
          }
        }
      }else if(tab.isIncludeCreate == 'include' || tab.istabCreate == "tab") {
        this.$store.commit('SET_INCLUDEVIEWID', {id: tab.randomRefreshId, templateId: tab.templateId});
      }else {
        if(this.tabs && this.tabs.length>0) {
          for(let i=0; i<this.tabs.length; i++) {
            if(this.tabs[i].id == tab.refreshId) {
              this.$refs[`container${i}`][0].updateData(this.tabs[i].linkType, tab.isIncludeCreate);
            }
          }
        }
      }
    },
    
    onTabClick: function(tab,index) {
      // debugger
      console.log(tab)
      console.log(index)
      this.$emit("active-tab", tab,index);      
      //点击tab标签左边菜单显示对应的应用--bcx新增功能
      let appId=tab.appId
      if(appId){//如果应用有appId  
        this.$nextTick(()=>{     
          this.$parent.$refs.mainNavBar.currentMenuId=tab.id //切换tab选中左边应用对应菜单id变换颜色
        });
        let name=tab.currentAppName //获取应用名称
        
        if(name.indexOf("-")>-1){
            let NameIndex=name.indexOf("-")
            name=name.substr(0,NameIndex)
        }
        if (appId != "km" && appId != "pm" && appId != "qm") {
            this.$root.appid = appId;
        }     
        console.log(tab)
        this.setMaincontent(false)
        this.$parent.showApp=true
        this.$parent.showWait=false
        this.$parent.activeTopmenuindex=0//应用选中工作台   
        this.$store.dispatch("loadMenus", {appId, name});//注释掉55   

        return
      }
      if(tab.id=="workmenu"){//Tab切换工作台
          this.$parent.navtopmenuclick(0)          
          return
      }
      if(tab.id=="applicationMarket"){//Tab切换应用市场
          return
      }
      if(tab.id=="ad"){//Tab切换公告
          this.$parent.navtopmenuclick(5)
          return
      }
      if(tab.id=="105"||tab.id=="104"||tab.id=="106"||tab.id=="10"||tab.id=="11"||tab.id=="08"){//Tab切换待办
          this.$parent.navtopmenuclick(2)
          this.$parent.showApp=false
          this.$store.state.appmenusShow=false
          this.$parent.showWait=true
          switch(tab.id){
            case "105":
              this.$parent.activewaitmenuindex=0;
              break;
            case "104":
              this.$parent.activewaitmenuindex=1;
              break;
              case "106":
              this.$parent.activewaitmenuindex=2;
              break;
              case "10":
              this.$parent.activewaitmenuindex=3;
              break;
              case "11":
              this.$parent.activewaitmenuindex=4;
              break;
              case "08":
              this.$parent.activewaitmenuindex=5;
              break;
            default:
               this.$parent.activewaitmenuindex=-1; 
          }

          return
      }
      if(tab.id=="domainmanager"){//Tab切换管理后台-组织后台
          this.$parent.domainmanager()
          this.$parent.activeTopmenuindex=-1//应用选中工作台       
      }
      if(tab.id=="other"){
        this.setMaincontent(true)
      }
      else{
         this.setMaincontent(true)//true不要显示左边菜单；false显示
         this.$parent.showApp=false
         this.$parent.showWait=false
         this.$store.state.appmenusShow=false
         this.$parent.activeTopmenuindex=-1//应用选中工作台
      }

    },

    onHomeTabClick: function() {//切换tab首页
      this.setMaincontent(true)
      this.$parent.activeTopmenuindex=0
      this.$emit("active-home");
    }
  }
};
</script>
<style lang="scss" scoped>
    .myapps-component{
      // background:white;
      // background:rgba(243,247,250,1);
      // background: #E0E5E9;
    }
</style>
