<template>
  <div class="page-content corporate-customers">
    <transition-group
      :name="transitionName"
      appear
      class="transition-group"
      tag="div"
    >
      <!--   任务表格页面   -->
      <task-page
        v-show="componentName === 'TaskPage'"
        key="TaskPage"
        :componentName="componentName"
        @changePage="changePage"
      />
      <!--   异常表格页面   -->
      <table-page
        v-show="componentName === 'TablePage'"
        key="TablePage"
        :componentName="componentName"
        @changePage="changePage"
      />
      <!--   处置页面   -->
      <disposition-page
        v-show="componentName === 'DispositionPage'"
        key="DispositionPage"
        :componentName="componentName"
        @changePage="changePage"
      />
      <!--   详情页面   -->
      <detail-page
        v-show="componentName === 'DetailPage'"
        key="DetailPage"
        :componentName="componentName"
        @changePage="changePage"
      />
      <!--  轨迹回放页面   -->
      <track-playback-page
        v-show="componentName === 'TrackPlaybackPage'"
        key="TrackPlaybackPage"
        :componentName="componentName"
        @changePage="changePage"
      />
    </transition-group>
    <!--    <component-->
    <!--      :key="componentName"-->
    <!--      :is="componentName"-->
    <!--      @changePage="changePage"-->
    <!--      ref="TaskPage"-->
    <!--    ></component>-->
  </div>
</template>

<script>
import TablePage from './components/TablePage/index.vue'
import TaskPage from './components/TaskPage/index.vue'
import DispositionPage from './components/DispositionPage/index.vue'
import DetailPage from './components/DetailPage/index.vue'
import TrackPlaybackPage from './components/TrackPlaybackPage/index.vue'
import PubSub from 'pubsub-js'

export default {
  name: 'AbnormalHandling',
  components: {DispositionPage, TablePage, DetailPage, TaskPage, TrackPlaybackPage},
  data() {
    return {
      componentName: 'TaskPage',
      pubSub: null,
      transitionName: ''
    }
  },
  mounted() {
    // 添加自定义面包屑pub-sub
    // this.pubSub = PubSub.subscribe('breadcrumb-click', (_, item) => {
    //   if (item.isCurrentRoute) this.componentName = 'TaskPage'
    // })

    // 添加自定义面包屑pub-sub
    this.pubSub = PubSub.subscribe('breadcrumb-click', (_, item) => {
      if (item.compName) {
        this.componentName = item.compName
      } else if (item.isCurrentRoute) {
        this.componentName = 'TaskPage'
      }
    })
  },
  methods: {
    // pageName显示页面标识符 done回调函数，保证页面挂载后执行的逻辑
    /**
     * @param {String} pageName 显示页面标识符(必传)
     * @param {Function} done 回调函数(非必传)
     * @param {String} type 面包屑标题(非必传)
     * */
    changePage(pageName = '', done, type = '') {
      this.componentName = pageName
      this.transitionName =
        this.transitionName === 'fold-right' ? 'fold-left' : 'fold-right'
      done && done()
      switch (pageName) {
        case 'TaskPage':
          PubSub.publish('go-back')
          break
        case 'TablePage':
          PubSub.publish('add-custom-breadcrumb', {
            name: type,
            compName: pageName,
          })
          break
        case 'DispositionPage':
          PubSub.publish('add-custom-breadcrumb', '异常处置')
          break
        case 'DetailPage':
          PubSub.publish('add-custom-breadcrumb', '详情')
          break
        case 'TrackPlaybackPage':
          PubSub.publish('add-custom-breadcrumb', '轨迹回放')
          break
      }
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

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