<template>
  <div class="home-max-big-box">
    <!--顶部LOG部分-->
    <div class="logo-max-box">
      <div class="logo-left-box">
        <img src="~@/assets/images/logo.png">
        <p>卫勤战备物资智能调配系统</p>
      </div>
      <div class="logo-right-box">
        <!--时间-消息-用户 部分-->
        <div class="time-message-user-box">
          <p class="placeholder-p"></p>
          <!--时间-->
          <div class="time-max-box">
            <img src="~@/assets/images/icon_04.png">
            <p>{{time}}</p>
          </div>
          <!--消息-->
          <div class="message-max-box cursor_pointer"
               @mouseenter="messageMouseenter()" @mouseleave="messageMouseleave()">
            <div class="message-big-box">
              <img src="~@/assets/images/icon_05.png">
              <p>{{messageData.messageNum>99?"99+":messageData.messageNum}}</p>
              <p>消息</p>
            </div>
            <div class="message-list-box" v-if="messageListType">
              <div class="message-list-big-box"
                   v-if="index<2"
                   @click="messageClick(item)"
                   v-for="(item,index) in messageData.list" :key="index"
                   :class="{'message-list-big-color':item.id==messageColor,}">
                <div class="message-min-box"
                     @mouseenter="messageMouseenterMin(item.id)" @mouseleave="messageMouseleaveMin()">
                  <!--<p>{{item.title}}</p>-->
                  <p>{{item.msgContent}}</p>
                </div>
              </div>
              <p class="message-button-p" v-if="messageData.list.length>2" @click="messageClick">更多</p>
            </div>
          </div>
          <!--用户-->
          <div class="user-max-box cursor_pointer"
               @mouseenter="mouseenterUser()" @mouseleave="mouseleaveUser()">
            <div class="user-min-top-box">
              <img src="~@/assets/images/icon_06.png">
              <p class="text-ellipsis">{{userData.userNick}}</p>
              <img src="~@/assets/images/icon_07.png">
            </div>
            <div class="user-min-bottom-box" v-if="userSuspension">
              <div :class="{'hover-type-min':userSuspensionMin=='user'}"
                   @click.stop="userTabClick('accountSettings')"
                   @mouseenter="mouseenterUserMin('user')" @mouseleave="mouseleaveUserMin()">
                <img src="~@/assets/images/icon_49.png">
                <p>账号设置</p>
              </div>
              <div :class="{'hover-type-min':userSuspensionMin=='out'}"
                   @click.stop="userTabClick('out')"
                   @mouseenter="mouseenterUserMin('out')" @mouseleave="mouseleaveUserMin()">
                <img src="~@/assets/images/icon_50.png">
                <p>退出</p>
              </div>
            </div>
          </div>
          <!--全屏-->
          <div class="all-button-box" @click="allClick">
            <img v-if="!allType" src="~@/assets/images/icon_65.png">
            <img v-if="allType" src="~@/assets/images/icon_66.png">
          </div>
        </div>
        <!--tab按钮部分-->
        <div class="tab-max-box">
          <div class="tab-big-box cursor_pointer"
               @click.stop="tabClick('1',item)"
               @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)"
               v-for="(item,index) in tabData" :key="index">
            <img class="position-img" v-if="index!=0" src="~@/assets/images/xian_3.png">
            <!--这里根据名称展示对应的小图标~小图标有区分选中和未选中样式-->
            <div class="tab-img-p-box">
              <img v-if="item.pathName=='home'&&componentsName!=item.pathName" src="~@/assets/images/icon_08.png">
              <img v-if="item.pathName=='home'&&componentsName==item.pathName" src="~@/assets/images/icon_09.png">
              <img v-if="item.pathName=='systemManagement'&&componentsName!=item.pathName" src="~@/assets/images/icon_10.png">
              <img v-if="item.pathName=='systemManagement'&&componentsName==item.pathName" src="~@/assets/images/icon_11.png">
              <img v-if="item.pathName=='equipmentSituation'&&componentsName!=item.pathName" src="~@/assets/images/icon_12.png">
              <img v-if="item.pathName=='equipmentSituation'&&componentsName==item.pathName" src="~@/assets/images/icon_13.png">
              <img v-if="item.pathName=='directorateDecisionSupport'&&componentsName!=item.pathName" src="~@/assets/images/icon_14.png">
              <img v-if="item.pathName=='directorateDecisionSupport'&&componentsName==item.pathName" src="~@/assets/images/icon_15.png">
              <img v-if="item.pathName=='managementOfMaterialAllocation'&&componentsName!=item.pathName" src="~@/assets/images/icon_16.png">
              <img v-if="item.pathName=='managementOfMaterialAllocation'&&componentsName==item.pathName" src="~@/assets/images/icon_17.png">
              <img v-if="item.pathName=='combatReadinessFacilityStatusMonitoring'&&componentsName!=item.pathName" src="~@/assets/images/icon_18.png">
              <img v-if="item.pathName=='combatReadinessFacilityStatusMonitoring'&&componentsName==item.pathName" src="~@/assets/images/icon_19.png">
              <p class="tab-title-p" :class="{'hover-type-a':componentsName==item.pathName,'hover-type-b':componentsName!=item.pathName}">{{item.title}}</p>
            </div>
            <!--<transition name="el-collapse-transition">-->
            <!--列表-->
            <div v-if="item.pathName == currentTab &&item.list[0]"
                 :class="{'tab-for-box':currentTab!='combatReadinessFacilityStatusMonitoring','tab-for-box-two':currentTab=='combatReadinessFacilityStatusMonitoring'}">
              <div :class="{'tab-for-min-box':currentTab!='combatReadinessFacilityStatusMonitoring','tab-for-min-box-two':currentTab=='combatReadinessFacilityStatusMonitoring','currentWidth':minCurrentWidthType}"
                 @mouseenter="mouseenterMin(minItem)" @mouseleave="mouseleaveMin(minItem)"
                 v-for="(minItem,index) in item.list" :key="index">
                <!--二级菜单-->
                <p @click.stop="tabClick('2',minItem)"
                  :class="{'hover-type-min':minCurrentTab == minItem.pathName,'tab-for-min-title':currentTab!='combatReadinessFacilityStatusMonitoring','tab-for-min-title-two':currentTab=='combatReadinessFacilityStatusMonitoring','currentWidthMin':minCurrentWidthType}">
                  {{minItem.title}}
                </p>
                <!--<transition name="el-collapse-transition">-->
                <!--三级菜单-->
                <div v-if="minCurrentTab == minItem.pathName"
                     :class="{'tab-for-min-title-box':currentTab!='combatReadinessFacilityStatusMonitoring','tab-for-min-title-box-two':currentTab=='combatReadinessFacilityStatusMonitoring','currentWidthMin':minCurrentWidthType}">
                  <p @click.stop="tabClick('3',itemMin)"
                    :class="{'hover-type-min':minCurrentTabMin == itemMin.pathName}"
                    @mouseenter="mouseenterMinMin(itemMin)" @mouseleave="mouseleaveMinMin(itemMin)"
                    v-for="(itemMin,index) in minItem.list" :key="index">
                    {{itemMin.title}}
                  </p>
                </div>
                <!--</transition>-->
              </div>
            </div>
            <!--</transition>-->
          </div>
        </div>
      </div>
    </div>
    <!--首页部分-->
    <div class="home-max-box TabStrip" v-if="componentsName=='home'">
      <home-page v-if="pageType=='home'"></home-page>
      <account-settings v-if="pageType=='accountSettings'"></account-settings>
    </div>
    <!--组件部分-->
    <div class="view-max-box TabStrip" v-else>
      <div class="tab-list-box" id="TabStrip" ref="nav">
        <div class="for-max-box cursor_pointer"
             @click.stop="tabButton(item)"
             :class="{'tab-click-a':componentsMinName == item.pathName,'tab-click-b':componentsMinName != item.pathName}"
             v-for="(item,index) in tabListData" :key="index">
          <div class="for-box">
            <p class="for-title">{{item.title}}</p>
            <div class="for-img-box" @click.stop="tabButtonDel(item)">
              <img v-if="componentsMinName == item.pathName" src="~@/assets/images/icon_x_03.png">
              <img v-if="componentsMinName != item.pathName" src="~@/assets/images/icon_x_02.png">
            </div>
          </div>
        </div>
      </div>
      <!--引用部分-->
      <keep-alive :include="tabListData">
        <!--<transition name="el-zoom-in-center">-->
          <div class="content-right-bottom-box TabStrip" :is="componentsMinName"></div>
        <!--</transition>-->
      </keep-alive>
    </div>
  </div>
</template>

<script>
  import { getRouters,profile,listMessge,getUserPerms } from '@/api/userApi'
  export default {
    name: "home",
    components:{
      pageManagement: resolve => {require(['@/components/pageManagement/pageManagement'], resolve)},//页面管理
      homePage: resolve => {require(['@/components/home/homePage'], resolve)},//首页
      accountSettings: resolve => {require(['@/components/account/accountSettings'], resolve)},//账号设置
      //系统管理
      RoleManagement: resolve => {require(['@/components/systemManagement/RoleManagement'], resolve)},//角色管理
      accountManagement: resolve => {require(['@/components/systemManagement/accountManagement'], resolve)},//账号管理
      sensitiveWordManagement: resolve => {require(['@/components/systemManagement/sensitiveWordManagement'], resolve)},//敏感词汇管理
      taskStatusManagement: resolve => {require(['@/components/systemManagement/taskStatusManagement'], resolve)},//任务状态管理
      theSystemLog: resolve => {require(['@/components/systemManagement/theSystemLog'], resolve)},//系统日志
      messageToRemind: resolve => {require(['@/components/systemManagement/messageToRemind'], resolve)},//消息提醒
      SmsAlerts: resolve => {require(['@/components/systemManagement/SmsAlerts'], resolve)},//短信提醒
      jobsManagement: resolve => {require(['@/components/systemManagement/jobsManagement'], resolve)},//岗位管理
      //设施设备基本态势
      organizeFrameworkInformationMaintenance: resolve => {require(['@/components/equipmentSituation/organizeFrameworkInformationMaintenance'], resolve)},//组织框架信息维护
      medicalClinicInformationMaintenance: resolve => {require(['@/components/equipmentSituation/medicalClinicInformationMaintenance'], resolve)},//医疗队所信息维护
      medicalTeamInformationMaintenance: resolve => {require(['@/components/equipmentSituation/medicalTeamInformationMaintenance'], resolve)},//医疗队信息维护
      cardinalityUnitInformationMaintenance: resolve => {require(['@/components/equipmentSituation/cardinalityUnitInformationMaintenance'], resolve)},//基数单位信息维护
      distributionOfCombatReadinessForces: resolve => {require(['@/components/equipmentSituation/distributionOfCombatReadinessForces'], resolve)},//战备力量分布展示
      combatReadinessDutyInformation: resolve => {require(['@/components/equipmentSituation/combatReadinessDutyInformation'], resolve)},//战备值班信息管理
      equipmentMaterialStrengthInformation: resolve => {require(['@/components/equipmentSituation/equipmentMaterialStrengthInformation'], resolve)},//装备物资实力信息
      lifeInformationOfEquipmentMaterials: resolve => {require(['@/components/equipmentSituation/lifeInformationOfEquipmentMaterials'], resolve)},//装备物资全寿命信息
      visualizedPositioningOfEquipmentMaterials: resolve => {require(['@/components/equipmentSituation/visualizedPositioningOfEquipmentMaterials'], resolve)},//装备物资可视化定位
      medicalTeamReserveStandard: resolve => {require(['@/components/equipmentSituation/medicalTeamReserveStandard'], resolve)},//医疗队所储备标准
      equipmentMaterialReserveLevelInformation: resolve => {require(['@/components/equipmentSituation/equipmentMaterialReserveLevelInformation'], resolve)},//装备物资储备水平信息
      //首长决策
      plansToCustomize: resolve => {require(['@/components/directorateDecisionSupport/plansToCustomize'], resolve)},//预案定制
      intelligentOrganizationAndCommand: resolve => {require(['@/components/directorateDecisionSupport/intelligentOrganizationAndCommand'], resolve)},//智能化组织指挥
      taskProcessing: resolve => {require(['@/components/directorateDecisionSupport/taskProcessing'], resolve)},//任务处理
      personnelManagement: resolve => {require(['@/components/directorateDecisionSupport/personnelManagement'], resolve)},//人员管理
      statisticalAnalysis: resolve => {require(['@/components/directorateDecisionSupport/statisticalAnalysis'], resolve)},//统计分析
      positioningMonitoring: resolve => {require(['@/components/directorateDecisionSupport/positioningMonitoring'], resolve)},//统计分析
      //设备设施状态监控
      videoMonitoring: resolve => {require(['@/components/combatReadinessFacilityStatusMonitoring/videoMonitoring'], resolve)},//视频监控
      intrusionDetection: resolve => {require(['@/components/combatReadinessFacilityStatusMonitoring/intrusionDetection'], resolve)},//入侵检测
      environmentalParameterData: resolve => {require(['@/components/combatReadinessFacilityStatusMonitoring/environmentalParameterData'], resolve)},//环境参数数据
      //物资调拨管理
      distributionIssued: resolve => {require(['@/components/managementOfMaterialAllocation/distributionIssuedView/distributionIssued'], resolve)},//分配计划
      distributionIssuedProcess: resolve => {require(['@/components/managementOfMaterialAllocation/distributionIssuedView/distributionIssuedProcess'], resolve)},//分拨下发流程图
      applyForPlanProcess: resolve => {require(['@/components/managementOfMaterialAllocation/applyForPlan/applyForPlanProcess'], resolve)},//申请计划流程图
      equipmentMaterialRequirementPlanningOne: resolve => {require(['@/components/managementOfMaterialAllocation/applyForPlan/equipmentMaterialRequirementPlanningOne'], resolve)},//装备物资需求计划
      equipmentMaterialRequirementPlanningTwo: resolve => {require(['@/components/managementOfMaterialAllocation/applyForPlan/equipmentMaterialRequirementPlanningTwo'], resolve)},//装备物资需求计划
      equipmentMaterialApplicationFormOne: resolve => {require(['@/components/managementOfMaterialAllocation/applyForPlan/equipmentMaterialApplicationFormOne'], resolve)},//装备物资申请单
      equipmentMaterialApplicationFormTwo: resolve => {require(['@/components/managementOfMaterialAllocation/applyForPlan/equipmentMaterialApplicationFormTwo'], resolve)},//装备物资申请单
      equipmentMaterialApplicationFormThree: resolve => {require(['@/components/managementOfMaterialAllocation/applyForPlan/equipmentMaterialApplicationFormThree'], resolve)},//装备物资申请单
      materialAllocationProcess: resolve => {require(['@/components/managementOfMaterialAllocation/materialAllocation/materialAllocationProcess'], resolve)},//物资调拨流程图
      materialAllocationPlan: resolve => {require(['@/components/managementOfMaterialAllocation/materialAllocation/materialAllocationPlan'], resolve)},//物资调拨计划
      suppliesToAllocateProcess: resolve => {require(['@/components/managementOfMaterialAllocation/suppliesToAllocate/suppliesToAllocateProcess'], resolve)},//物资调配流程图
      applyForAuthorization: resolve => {require(['@/components/managementOfMaterialAllocation/suppliesToAllocate/applyForAuthorization'], resolve)},//申请授权
      reviewTheAuthorization: resolve => {require(['@/components/managementOfMaterialAllocation/suppliesToAllocate/reviewTheAuthorization'], resolve)},//审批授权
      applicationFormForTemporaryUseOne: resolve => {require(['@/components/managementOfMaterialAllocation/suppliesToAllocate/applicationFormForTemporaryUseOne'], resolve)},//临时使用申请单-申请单位
      applicationFormForTemporaryUseTwo: resolve => {require(['@/components/managementOfMaterialAllocation/suppliesToAllocate/applicationFormForTemporaryUseTwo'], resolve)},//临时使用申请单-所属单位
      applicationFormForTemporaryUseThree: resolve => {require(['@/components/managementOfMaterialAllocation/suppliesToAllocate/applicationFormForTemporaryUseThree'], resolve)},//临时使用申请单-审核
      goodsReturnedOne: resolve => {require(['@/components/managementOfMaterialAllocation/suppliesToAllocate/goodsReturnedOne'], resolve)},// 物资归还-需求单位
      goodsReturnedTwo: resolve => {require(['@/components/managementOfMaterialAllocation/suppliesToAllocate/goodsReturnedTwo'], resolve)},// 物资归还-物资所属单位
      goodsReturnedThree: resolve => {require(['@/components/managementOfMaterialAllocation/suppliesToAllocate/goodsReturnedThree'], resolve)},// 物资归还-调拨中心
      transferNoticeOne: resolve => {require(['@/components/managementOfMaterialAllocation/transferNoticeFather/transferNoticeOne'], resolve)},// 调拨通知单(调拨中心)
      transferNoticeTwo: resolve => {require(['@/components/managementOfMaterialAllocation/transferNoticeFather/transferNoticeTwo'], resolve)},// 调拨通知单(发出单位)
      transferNoticeThree: resolve => {require(['@/components/managementOfMaterialAllocation/transferNoticeFather/transferNoticeThree'], resolve)},// 调拨通知单(接收单位)
    },
    data () {
      return {
        messageListType:false,
        messageColor:"",
        //消息列表
        messageData:{
          list:[],
          messageNum:"",
        },
        //全屏状态
        allType:false,
        //页面状态
        pageType:"home",
        //时间
        time:"",
        //账号数据
        userData:{},
        //用户设置悬浮开关
        userSuspension:false,
        //当前鼠标悬浮的用户设置子类标签
        userSuspensionMin:"",
        //当前所在组件-用于样式展示
        componentsName:"home",
        //当前选择的子类
        componentsMinName:"",
        //当前鼠标悬浮的一级菜单
        currentTab:"",
        //当前鼠标悬浮的二级菜单
        minCurrentTab:"",
        minCurrentWidthType:false,
        //当前鼠标悬浮的三级菜单
        minCurrentTabMin:"",
        //路由tab按钮数据
        tabData:[],
        tabListData:[],
      }
    },
    created(){
      this.setIntervalTime();
      this.getRouters();
    },
    mounted() {

    },
    methods: {
      //获取路由权限
      async getRouters () {
        let self = this;
        const { data } = await getRouters();
        if(data.code==200){
          this.tabData = data.data;
          this.profile();
          this.listMessge();
          this.getUserPerms();
        }
      },
      //获取路由权限
      async getUserPerms () {
        let self = this;
        const { data } = await getUserPerms();
        if(data.code==200){
          console.log("getUserPerms",getUserPerms)
          localStorage.setItem("userPerms",data.data.toString())
        }
      },
      //获取个人信息
      async profile () {
        let self = this;
        console.log("123");
        const { data } = await profile();
        if(data.code==200){
          self.userData = data.data;
        }
      },
      //获取消息数量
      async listMessge () {
        let self = this;
        let obj = {
          pageNum:1,
          pageSize:3,
        };
        const { data } = await listMessge(obj);
        if(data.code==200){
          self.messageData.list = data.rows;
          self.messageData.messageNum = data.total;
        }
      },

      //消息部分悬浮
      messageMouseenter(){
        this.messageListType = true;
      },
      messageMouseleave(){
        this.messageListType = false;
      },
      messageMouseenterMin(type){
        this.messageColor = type;
      },
      messageMouseleaveMin(){
        this.messageColor = "";
      },
      //消息点击
      messageClick(item){
        let self = this;
        localStorage.setItem("taskProcessingHome",item.msgContent);
        if(item.title){
          self.componentsName = 'taskProcessing';
          let num = 0;
          for(let i=0;i<self.tabListData.length;i++){
            if('taskProcessing'==self.tabListData[i].pathName){
              num++
            }
          }
          if(num == 0){
            let obj = {
              title:'任务处理',
              pathName:'taskProcessing'
            };
            self.tabListData.push(obj);
          }
          self.componentsMinName = 'taskProcessing';
        }else{
          self.componentsName = 'messageToRemind';
          let num = 0;
          for(let i=0;i<self.tabListData.length;i++){
            if('messageToRemind'==self.tabListData[i].pathName){
              num++
            }
          }
          if(num == 0){
            let obj = {
              title:'消息提醒',
              pathName:'messageToRemind'
            };
            self.tabListData.push(obj);
          }
          self.componentsMinName = 'messageToRemind';
        }
        this.scrollWidth();
      },
      //全屏切换
      allClick(){
        let docElm = document.documentElement;
        if(!this.allType){
          //W3C
          if(docElm.requestFullscreen) {
            docElm.requestFullscreen();
          }
          //FireFox
          else if(docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
          }
          //Chrome等
          else if(docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
          }
          //IE11
          else if(elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
          }
          this.allType = true;
        }else{
          if (document.exitFullscreen) {
            document.exitFullscreen();
          }
          //FireFox
          else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          }
          //Chrome等
          else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          }
          //IE11
          else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
          this.allType = false;
        }

      },
      //供子组件调用返回首页事件
      outPage(){
        this.pageType = "home";
      },
      //横向tab点击事件
      tabButton(item){
        this.componentsMinName = item.pathName;
      },
      //横向tab点击删除事件
      tabButtonDel(item){
        let self = this;
        for(let i=0;i<self.tabListData.length;i++){
          if(item.pathName == self.tabListData[i].pathName){
            self.tabListData.splice(i, 1);
            if(self.tabListData[i-1]){
              if(self.componentsMinName == item.pathName){
                this.componentsName = self.tabListData[i-1].pathName;
                this.componentsMinName = self.tabListData[i-1].pathName;
              }
            }else if(self.tabListData[i]){
              if(self.componentsMinName == item.pathName){
                this.componentsName = self.tabListData[i].pathName;
                this.componentsMinName = self.tabListData[i].pathName;
              }
            }else{
              this.getRouters();
              this.componentsName = "home"
            }
          }
        }
      },
      //用户设置子类悬浮事件
      mouseenterUserMin(item){
        this.userSuspensionMin = item;
      },
      //用户设置子类离开事件
      mouseleaveUserMin(){
        this.userSuspensionMin = "";
      },
      //用户设置悬浮事件
      mouseenterUser(){
        this.userSuspension = true;
      },
      //用户设置离开事件
      mouseleaveUser(){
        this.userSuspension = false;
      },
      //tab点击事件
      tabClick(type,item){
        let self = this;
        let num = 0;
        if(type==1){          //一级菜单
          if(item.pathName == 'home'){
            this.getRouters();
            this.componentsName = item.pathName;
            this.pageType = "home";
          }
        }else if(!item.list){
          self.componentsName = item.pathName;
          for(let i=0;i<self.tabListData.length;i++){
            if(item.pathName==self.tabListData[i].pathName){
              num++
            }
          }
          if(num == 0){
            let obj = {
              title:item.title,
              pathName:item.pathName
            };
            self.tabListData.push(obj);
          }
          self.componentsMinName = item.pathName;
        }
        this.scrollWidth();
      },
      //定位滚动条位置
      scrollWidth(){
        let self = this;
        setTimeout(function(){
          for(let i=0;i<self.tabListData.length;i++){
            if(self.componentsMinName==self.tabListData[i].pathName){
              if(self.componentsName != "home"){
                if(i==self.tabListData.length-1){
                    self.$refs.nav.scrollLeft = self.$refs.nav.scrollWidth
                }else if(self.$refs.nav.scrollWidth>1710){
                  self.$refs.nav.scrollLeft = (self.$refs.nav.scrollWidth / self.tabListData.length)*i-850
                }
              }
            }
          }
        },50);
      },
      //tab鼠标悬浮一级菜单事件
      mouseenter(item){
        this.currentTab = item.pathName;
      },
      //tab鼠标离开一级菜单事件
      mouseleave(){
        this.currentTab = "";
      },
      //tab鼠标悬浮二级菜单事件
      mouseenterMin(minItem){
        this.minCurrentTab = minItem.pathName;
        this.minCurrentWidthType = !!minItem.list;
      },
      //tab鼠标离开二级菜单事件
      mouseleaveMin(){
        this.minCurrentTab = "";
      },
      //tab鼠标悬浮三级菜单事件
      mouseenterMinMin(itemMin){
        this.minCurrentTabMin = itemMin.pathName;
      },
      //tab鼠标离开三级菜单事件
      mouseleaveMinMin(){
        this.minCurrentTabMin = "";
      },
      //右上角设置/退出按钮
      userTabClick(type){
        if(type=='accountSettings'){
          this.componentsName = "home";
          this.pageType = type;
        }else if(type=='out'){
          localStorage.removeItem('token');
          this.$router.push({
            path: '/',
          })
        }
      },
      //定时刷新时间
      setIntervalTime(){
        let timer = setInterval(this.getTime, 1000);
      },
      getTime(){
        let myDate = new Date();
        let years = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        let month = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)         // 所以获取当前月份是myDate.getMonth()+1;
        let day = myDate.getDate(); //获取当前日(1-31);
        let when = myDate.getHours(); //获取当前小时数(0-23)
        let points = myDate.getMinutes(); //获取当前分钟数(0-59)
        let seconds = myDate.getSeconds(); //获取当前秒数(0-59)
        this.time = years+"年"+month+"月"+day+"日 "+when+":"+points+":"+seconds
      },
      childComponentMethods(data){
        let self = this;
        console.log("datadata",data)
        let newData = {};
        for(let i=0;i<self.tabData.length;i++){
          for(let k=0;k<self.tabData[i].list.length;k++){
            if (data.pathName == self.tabData[i].list[k].pathName){
              newData = JSON.parse(JSON.stringify(self.tabData[i].list[k]))
            }
            if(self.tabData[i].list[k].list&&self.tabData[i].list[k].list[0]){
              for(let l=0;l<self.tabData[i].list[k].list.length;l++){
                if (data.pathName == self.tabData[i].list[k].list[l].pathName){
                  newData = JSON.parse(JSON.stringify(self.tabData[i].list[k].list[l]))
                }
              }
            }
          }
        }
        let obj = {
          title:newData.title,
          pathName:newData.pathName
        };
        localStorage.setItem("taskProcessing",data.name);
        let num = 0;
        for(let i=0;i<self.tabListData.length;i++){
          if(self.tabListData[i].pathName == obj.pathName){
            num++
          }
        }
        if (num==0){
          self.tabListData.push(obj);
        }
        self.componentsMinName = obj.pathName;
        self.componentsName = obj.pathName;
      },
    }
  }
</script>

<style scoped lang="stylus">
.home-max-big-box
  width:1920px;
  height:100%;
  margin:0 auto;
  display: flex
  flex-direction column
  .logo-max-box
    height:96px;
    display: flex;
    z-index:5;
    .logo-left-box
      width:760px;
      height:96px;
      background:url("~@/assets/images/logo_back.png") no-repeat;
      -webkit-background-size: 100% 100%
      background-size: 100% 100%
      overflow hidden
      display flex
      img
        display block
        width:60px;
        height:60px;
        margin:20px 12px 0 30px;
      p
        line-height:96px;
        font-size:$font_35;
        text-shadow: 5px 5px 5px #000;
        color:$color_ff;
        letter-spacing:8px;
        font-weight:700;
    .logo-right-box
      flex:1;
      .time-message-user-box
        width:100%;
        height:46px;
        display flex
        .placeholder-p
          flex:1;
        .time-max-box
          width:232px;
          display flex
          img
            margin:18px 10px 0;
            height:20px;
            width:20px;
          p
            color:$color_ff;
            font-size:$font_14;
            line-height:36px;
            margin-top:10px;
        .message-max-box
          width:100px;
          z-index:10;
          .message-big-box
            display flex
            position relative
            img
              margin:18px 10px 0;
              height:20px;
              width:20px;
            p:nth-child(2)
              position absolute
              left:18px;
              top:8px;
              background:$theme5;
              border-radius:50%;
              width:18px;
              height:18px;
              font-size:12px;
              line-height:18px;
              color:$color_ff;
            p:nth-child(3)
              color:$color_ff;
              font-size:$font_14;
              line-height:36px;
              margin-top:10px;
          .message-list-box
            width:350px;
            margin-top: -5px;
            background:$backColor1;
            color:$color_ff;
            z-index:15;
            border-bottom-left-radius:6px;
            border-bottom-right-radius:6px;
            -webkit-mask-position-x 6px
            overflow: hidden;
            .message-list-big-color
              background $backColor2
              color:$color_ff;
            .message-list-big-box
              height:58px;
              overflow hidden
              .message-min-box
                padding:0 10px;
                margin:10px 0 ;
                text-align left
                line-height:18px;
                p:nth-child(1)
                  font-size:$font_14;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
            .message-button-p
              line-height:40px;
              border-top:1px solid $theme;
              color:$theme;
              font-size:$font_16;
        .user-max-box
          width:180px;
          /*margin-right:40px;*/
          z-index:15;
          .user-min-top-box
            display flex
            img:nth-child(1)
              margin:18px 10px 0;
              height:20px;
              width:20px;
            p
              color:$color_ff;
              font-size:$font_14;
              width:110px;
              line-height:36px;
              margin-top:10px;
              overflow hidden
              white-space nowrap
              text-overflow ellipsis
            img:nth-child(3)
              margin:26px 10px 0;
              height:6px;
              width:10px;
          .user-min-bottom-box
            padding:8px 0;
            margin:0 10px;
            background: $backColor1
            border-bottom-right-radius 5px;
            border-bottom-left-radius 5px
            div
              display flex
              color:$color_a5;
              img
                width:20px;
                height:20px;
                margin:6px 8px 0 14px;
              p
                line-height:32px;
                font-size:$font_12;
        .all-button-box
          width:36px;
          display flex
          margin:10px 20px;
          cursor:pointer
          img
            height:36px;
            width:36px;
          p
            width:40px;
            line-height:36px;
            color:$color_ff;
            font-size:$font_14;
      .tab-max-box
        width:100%;
        height:40px;
        display flex
        .tab-big-box
          height:40px;
          position relative
          .position-img
            width:1px;
            height:25px;
            position absolute
            left:0;
            top:7px;
          .tab-img-p-box
            display flex
            margin:0 30px;
            img
              height:20px;
              width:20px;
              margin:10px 8px 0;
            p
              line-height:40px;
              font-size:$font_17;
          .tab-for-box//朝右弹出框
            width:100%;
            padding:8px 0;
            /*background: $backColor1*/
            border-bottom-left-radius 5px
            border-bottom-right-radius 5px
            z-index:10;
            .tab-for-min-box:first-child
              .tab-for-min-title
                padding-top:8px;
            .tab-for-min-box:last-child
              .tab-for-min-title
                padding-bottom:8px;
                border-bottom-right-radius:5px;
                border-bottom-left-radius:5px;
            .tab-for-min-box
              width:100%;
              line-height:34px;
              color:$color_a5;
              position relative
              .tab-for-min-title
                width:100%;
                background: $backColor1
              .tab-for-min-title-box
                width:100%;
                position absolute
                right:0;
                top:0;
                z-index:15;
                p
                  background: $backColor1
                  z-index:20;
                p:first-child
                  padding-top:8px;
                p:last-child
                  padding-bottom:8px;
                  border-bottom-right-radius:5px;
                  border-bottom-left-radius:5px;
          .tab-for-box-two//朝左弹出框
            width:100%;
            padding:8px 0;
            /*background: $backColor1*/
            border-bottom-left-radius 5px
            border-bottom-right-radius 5px
            z-index:10;
            .tab-for-min-box-two:first-child
              .tab-for-min-title-two
                padding-top:8px;
            .tab-for-min-box-two:last-child
              .tab-for-min-title-two
                padding-bottom:8px;
                border-bottom-right-radius:5px;
                border-bottom-left-radius:5px;
            .tab-for-min-box-two
              width:100%;
              line-height:34px;
              color:$color_a5;
              position relative
              .tab-for-min-title-two
                width:100%;
                background: $backColor1
              .tab-for-min-title-box-two
                width:100%;
                margin-left:-50%;
                position absolute
                left:0;
                top:0;
                z-index:15;
                p
                  background: $backColor1
                  z-index:20;
                p:first-child
                  padding-top:8px;
                p:last-child
                  padding-bottom:8px;
                  border-bottom-right-radius:5px;
                  border-bottom-left-radius:5px;
  .home-max-box     //首页部分
    flex:1;
    overflow-x:hidden;
    overflow-y:scroll;
  .view-max-box     //组件加载部分
    flex:1;
    display flex
    flex-direction column
    overflow-x:hidden;
    overflow-y:scroll;
    .tab-list-box
      margin:0 105px 10px;
      height:84px;
      display flex;
      overflow-x:scroll;
      overflow-y:hidden;
      white-space: nowrap;
      .for-max-box
        display inline-block
        height:38px;
        margin:28px 8px;
        .for-box
          height:38px;
          display flex
          .for-title
            padding:0 6px 0 27px;
            line-height:36px;
          .for-img-box
            height:36px;
            width:36px;
            img
              width:10px;
              height:10px;
              margin:14px;
    .content-right-bottom-box
      overflow-y scroll
      overflow-x hidden
.hover-type-a
  color:$theme !important;
.hover-type-b
  color:$color_ff !important;
.hover-type-min
  background:$backColor2 !important;
  color:$color_ff !important;
//tab滚动条按钮样式
.tab-click-a
  background url("~@/assets/images/button_09.png") no-repeat
  background-size 100% 100%
  color: $color_ff;
.tab-click-b
  background url("~@/assets/images/button_08.png") no-repeat
  background-size 100% 100%
  color:$fontColor_05;

/*滚动条*/
#TabStrip::-webkit-scrollbar {
  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
/*滚动条里面小方块*/
#TabStrip::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px $theme;
  background: $theme;
}
/*滚动条里面轨道*/
#TabStrip::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
  border-radius: 0;
  background: rgba(255,255,255,0);
}
//二级菜单宽度样式
.currentWidth{
  width:200% !important;
}
.currentWidthMin{
  width:50%!important;
}
</style>
