<template>
    <div class="page-content corporate-customers">
        <transition-group
            tag="div"
            :name="transitionName"
            appear
            class="transition-group"
        >
            <!--   表格页面   -->
            <table-page
                v-show="componentName === 'TablePage'"
                @changePage="changePage"
                :componentName="componentName"
                key="TablePage"
            />
            <!--   新增修改页面   -->
            <edit-add-page
                v-show="componentName === 'EditAddPage'"
                @changePage="changePage"
                :componentName="componentName"
                key="EditAddPage"
            />
            <!--   详情页面   -->
            <detail-page
                v-show="componentName === 'DetailPage'"
                @changePage="changePage"
                :componentName="componentName"
                key="DetailPage"
            />
        </transition-group>
    </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: 'RescueSiteMgmt',
    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>
.page-content {
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  background: url(~@/assets/img/loading.gif) no-repeat 50%, #0f304f;

  .transition-group {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .fold-left-enter-active {
    animation: fold-left-in 0.5s;
  }

  .fold-left-leave-active {
    animation: fold-left-on 0.5s;
  }

  .fold-right-enter-active {
    animation: fold-right-in 0.5s;
  }

  .fold-right-leave-active {
    animation: fold-right-on 0.5s;
  }

  @keyframes fold-left-in {
    0% {
      transform: translate3d(-10%, 0, 0);
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }

  @keyframes fold-left-on {
    0% {
      transform: translate3d(0%, 0, 0);
      opacity: 1;
    }

    50% {
      opacity: 0;
    }

    100% {
      transform: translate3d(10%, 0, 0);
      opacity: 0;
    }
  }

  @keyframes fold-right-in {
    0% {
      transform: translate3d(10%, 0, 0);
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }

  @keyframes fold-right-on {
    0% {
      transform: translate3d(0%, 0, 0);
      opacity: 1;
    }

    50% {
      opacity: 0;
    }

    100% {
      transform: translate3d(-10%, 0, 0);
      opacity: 0;
    }
  }
}
</style>
