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

<script>
  import { mapState } from 'vuex'

  import { TAB_PANE_LIST, COMPONENTS_MAP } from './const'
  import processClassify from '@/mixins/processClassify.js'
  import fromModule from '@/mixins/fromModule'
  export default {
    name: 'CirculateMatter',
    components: {
      Received: () => import('./Received'),
      Circulated: () => import('./Circulated'),
      ContentLayout: () => import('@/views/matter/components/ContentLayout'),
    },
    mixins: [processClassify, fromModule],
    data() {
      return {
        currentTabPaneList: TAB_PANE_LIST,
        currentActiveTab: this.$route.query.tabActiveName || 'received',
        currentView: COMPONENTS_MAP,
        isKeepalive: false,
      }
    },
    computed: {
      ...mapState('user', ['account']),
      isShowAside() {
        return this.currentActiveTab === 'received' ? false : true
      },
      keepaliveComponents() {
        return this.isKeepalive ? Object.values(COMPONENTS_MAP) : []
      },
    },
    activated() {
      this.currentActiveTab = this.$route.query.tabActiveName || 'received'
    },
    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('CirculateMatter')
        }
      }
    },
    mounted() {
      this.currentActiveTab = this.$route.query.tabActiveName || 'received'
    },
  }
</script>

<style lang="scss" scoped></style>