<template>
  <div>
    <div class="a_title" v-if="isShowelectron">
      <div class="a_title-left">待办</div>
      <div class="a_title-btn">
        <img src="https://shigongbang.obs.cn-east-3.myhuaweicloud.com/test/4ctaGa72O9bhNEY18mu8c.png" style="cursor: pointer" @click.stop="close()" />
      </div>
    </div>
    <el-menu :default-active="activeIndex" class="h-tab-menu daiban meuns" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">
        <el-badge :value="toDoNum" :max="99" class="item" :hidden="toDoNum == 0">待审批</el-badge>
      </el-menu-item>
      <el-menu-item index="4">
        <el-badge :value="notifyCount" :max="99" class="item" :hidden="notifyCount == 0">抄送我</el-badge>
      </el-menu-item>
      <el-menu-item index="6">转交</el-menu-item>
      <el-menu-item index="8">
        <el-badge :value="inTheProcessNum" :max="99" class="item" :hidden="inTheProcessNum == 0">流程中</el-badge>
      </el-menu-item>
      <el-menu-item index="2">我申请</el-menu-item>
      <el-menu-item index="3">已审批</el-menu-item>
      <el-menu-item index="5">全部</el-menu-item>
      <!-- <el-menu-item index="7">任务</el-menu-item> -->
    </el-menu>
    <myApproval v-if="activeIndex === '1'" :index="1" :jybType="1" :isTitle="false"></myApproval>
    <myExAndappList v-if="activeIndex === '2'" :jybType="3" :isTitle="false"></myExAndappList>
    <myApproval v-if="activeIndex === '3'" :jybType="4" :index="2" :isTitle="false"></myApproval>
    <myApproval v-if="activeIndex === '4'" :jybType="5" :index="3" :isTitle="false"></myApproval>
    <myApprovalall v-if="activeIndex === '5'" :jybType="7" :isTitle="false"></myApprovalall>
    <myDeliver v-if="activeIndex === '6'" :jybType="6" :index="6" :isTitle="false"></myDeliver>

    <myApproval v-if="activeIndex === '8'" :jybType="2" :index="8" :isTitle="false"></myApproval>

    <!-- {{$store.state}} -->
  </div>
</template>
<script>
import myApproval from './myExAndapp/myApproval.vue'
import myApprovalall from './myExAndapp/myApprovalall.vue'
import myExAndappList from './myExAndapp/myExAndappList.vue'
import myDeliver from './myExAndapp/myDeliver.vue'
/* eslint-disable vue/no-unused-components */
import { popoutToApprovalDetail, popoutToApprovalDetailbbb } from './utils/index'
import {getToDolist} from './myExAndapp/api/apiProcess'
export default {
  name: 'Modular',
  mixins: [],
  extends: {},
  components: {
    myApproval,
    myApprovalall,
    myExAndappList,
    myDeliver
  },
  props: {
    isFull: {
      type: Boolean,
      default: true
    },
    tabVal: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      activeIndex: '1',
      toDoNum: 0,
      inTheProcessNum: 0,
      notifyCount: 0,
      isShowelectron: window.electron?false: true
    }
  },
  computed: {},
  filter: {},
  watch: {
    "$store.state.cmdTypeOther": {
      deep: true,
      immediate: true,
      handler(val) {
        if (typeof val === 'number' && !Number.isNaN(val)) {
          return  
        }
        if (JSON.stringify(val) == '{}') {
          return
        }
        this.$nextTick(() => {
          val.hasOwnProperty('all') && (this.notifyCount = val.all.notifyCount)
        });
      },
    }
  },
  methods: {
    fullscreen() {
      this.$emit('fullscreen')
    },
    handleSelect(val) {
      this.activeIndex = val

      popoutToApprovalDetail()

      popoutToApprovalDetailbbb()
    },
    close() {
      this.$emit('closeCollapse')
    },
    // 获取未读数量
    async getForNotReading(num) {
      if (num != null) {
        this.toDoNum = num
        this.$emit("emitunread", num)
      }

      // if (res.data) {
      // this.toDoNum = num;
      // this.$store.commit("setCmdTypeOther", res.data)
      // this.inTheProcessNum = res.data.applyInTheProcessCount;
      // }
    },
    // 获取抄送未读数
    async getNotifyCount(){
      let data = {
        companyId: this.$store.state.user.cno,
        platformType: "all",
        userId: this.$store.state.user.no
      }
      let res = await getToDolist(data)
      if(res.data.code == 200){
        this.notifyCount = res.data.data.notifyCount
      }
    }
  },
  mounted() {
    popoutToApprovalDetailbbb()
    this.activeIndex = '1'
  }
}
// background-image: url("../../../../../assets/fullScreen.png");
</script>
<style lang="scss" rel="stylesheet/scss">
/* tab切换样式重写 */
.daiban {
  // padding-top: 15px;
}
.meuns {
  padding-top: 0;
  padding-left: 0 !important;
}
.h-tab-menu .el-menu-item {
  padding: 0;
  font-size: 18px;
}
.h-tab-menu.el-menu--horizontal > .el-menu-item {
  margin: 0 20px;
  line-height: 40px;
  height: 40px;
  color: #000;
}
.h-tab-menu.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #007fff;
  color: #007fff;
  font-weight: bold;
}
// 手风琴关闭样式
.h-collapse-close,
.h-collapse-full {
  color: #999;
  position: absolute;
  right: 15px;
  top: 20px;
  cursor: pointer;
  &:hover {
    color: #007fff;
  }
}
.h-collapse-close {
  font-size: 18px;
  top: 18px;
}
.h-collapse-full {
  background-position: center;
  background-repeat: no-repeat;
  height: 15px;
  width: 15px;
  background-size: contain;
  top: 18px;
}
.full {
  right: 40px;
  font-size: 17px;
}
.a_title {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e6e6e6;
  .a_title-left {
    padding: 10px 22px 10px;
    font-size: 17px;
    font-weight: bold;
    color: #2c3e50;
  }
  .a_title-btn {
    position: absolute;
    right: 20px;
  }
}
.el-badge__content.is-fixed {
  top: 11px;
  right: 3px;
}
</style>
