<template>
  <!--  <div class="page-content corporate-customers">-->
  <!--        <transition-group-->
  <!--          :name="transitionName"-->
  <!--          appear-->
  <!--          class="transition-group"-->
  <!--          tag="div"-->
  <!--        >-->
  <!--    &lt;!&ndash;   表格页面   &ndash;&gt;-->
  <!--    <table-page-->
  <!--      v-show="componentName === 'TablePage'"-->
  <!--      key="TablePage"-->
  <!--      :componentName="componentName"-->
  <!--      @changePage="changePage"-->
  <!--    />-->
  <!--    &lt;!&ndash;   新增修改页面   &ndash;&gt;-->
  <!--    <edit-add-page-->
  <!--      v-show="componentName === 'EditAddPage'"-->
  <!--      key="EditAddPage"-->
  <!--      :componentName="componentName"-->
  <!--      @changePage="changePage"-->
  <!--    />-->
  <!--    &lt;!&ndash;   详情页面   &ndash;&gt;-->
  <!--    <detail-page-->
  <!--      v-show="componentName === 'DetailPage'"-->
  <!--      key="DetailPage"-->
  <!--      :componentName="componentName"-->
  <!--      @changePage="changePage"-->
  <!--    />-->
  <!--        </transition-group>-->
  <!--  </div>-->

  <div class="page-content corporate-customers">
    <table-page
      v-show="componentName === 'TablePage'"
      key="TablePage"
      :componentName="componentName"
      @changePage="changePage"
    />
    <!--   新增修改页面   -->
    <edit-add-page
      v-show="componentName === 'EditAddPage'"
      key="EditAddPage"
      :componentName="componentName"
      @changePage="changePage"
    />
    <!--   详情页面   -->
    <detail-page
      v-show="componentName === 'DetailPage'"
      key="DetailPage"
      :componentName="componentName"
      @changePage="changePage"
    />
  </div>

</template>

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

export default {
  name: 'PatrolAndRescueVehicleMgmt',
  components: {EditAddPage, TablePage, DetailPage},
  data() {
    return {
      componentName: 'TablePage',
      pubSub: null,
      transitionName: ''
    }
  },
  mounted() {
    // 添加自定义面包屑pub-sub
    this.pubSub = PubSub.subscribe('breadcrumb-click', (_, item) => {
      if (item.isCurrentRoute) this.componentName = 'TablePage'
    })
  },
  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 'TablePage':
          PubSub.publish('go-back')
          break
        case 'EditAddPage':
          PubSub.publish('add-custom-breadcrumb', type || '编辑')
          break
        case 'DetailPage':
          PubSub.publish('add-custom-breadcrumb', '详情')
          break
      }
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
::v-deep .footer {
  display: block !important;
  height: 80px !important;
  text-align: center;
  box-sizing: border-box;
  padding: 20px 20px 0;

  .form-row {
    margin-top: 40px;
    height: 100px;
  }
}
</style>
  