<template>
  <content-layout
    :tab-pane-list="currentShowTab"
    @tab-click="handleTabClick"
    @node-click="handleNodeClick"
  >
    <keep-alive :include="keepaliveComponents">
      <component
        :is="currentViews[currentActiveTab]"
        :ref="`${currentActiveTab}Table`"
        v-loading="loading"
      ></component>
    </keep-alive>
  </content-layout>
</template>

<script>
  import { TAB_LIST, COMPONENTS_LIST } from './const'

  import processClassify from '@/mixins/processClassify.js'
  import fromModule from '@/mixins/fromModule'

  import { getCurrentAccountLeader, checkHasSecretary } from '@/api/process'
  import { mapState } from 'vuex'

  export default {
    name: 'MyTask',
    components: {
      ContentLayout: () => import('@/views/matter/components/ContentLayout'),
      Todo: () => import('./Todo'),
      LeaderTodo: () => import('./LeaderTodo'),
      Done: () => import('./Done'),
      LeaderDone: () => import('./LeaderDone'),
      MyDelegate: () => import('./MyDelegate'),
    },
    mixins: [processClassify, fromModule],
    data() {
      return {
        leaderList: [],
        hasLeader: false,
        currentActiveTab: 'todo',
        isKeepalive: false,
      }
    },
    computed: {
      ...mapState('user', ['account']),
      currentViews() {
        const currentComponentMap = {}
        Object.keys(COMPONENTS_LIST)
          .filter((key) => this.notIncludesLeader(key))
          .map((key) => {
            currentComponentMap[key] = COMPONENTS_LIST[key]
          })
        return this.hasLeader ? COMPONENTS_LIST : currentComponentMap
      },
      currentTabPaneList() {
        const currentTabList = TAB_LIST.filter((item) =>
          this.notIncludesLeader(item.name)
        )
        return this.hasLeader ? TAB_LIST : currentTabList
      },
      keepaliveComponents() {
        return this.isKeepalive ? Object.values(COMPONENTS_LIST) : []
      },
    },
    activated() {
      this.currentActiveTab = this.$route.query.tabActiveName || 'todo'
    },
    created() {
      if (localStorage.getItem(`keepalive_${this.account}`)) {
        const keepaliveRouteList = JSON.parse(
          localStorage.getItem(`keepalive_${this.account}`)
        )
        if (keepaliveRouteList && keepaliveRouteList.length) {
          this.isKeepalive = keepaliveRouteList
            .map((item) => item.name)
            .includes('MyTask')
        }
      }
    },
    mounted() {
      this.currentActiveTab = this.$route.query.tabActiveName || 'todo'
      this.checkHasSecretary()
    },
    methods: {
      checkHasSecretary() {
        checkHasSecretary().then((res) => {
          this.hasLeader = res.value
        })
      },
      notIncludesLeader(key) {
        return !['leaderTodo', 'leaderDone'].includes(key)
      },
    },
  }
</script>
<style lang="scss" scoped>
  ::v-deep.el-table__fixed-right {
    height: 100%;
  }
</style>
