<template lang="html">
  <div class="homeVue">

    <transition-group name="homeSubpages">

      <homepage
        class="homeSubpage" key="homepage"
        v-if="homeData.page === 0"
        :global-data="globalData"
        :page-title="pageTitle"
        :home-data="homeData" />

      <award-page
        class="homeSubpage" key="awardPage"
        v-if="homeData.page !== 0"
        :page-title="pageTitle"
        :home-data="homeData" />

    </transition-group>

  </div>
</template>

<script>
import homepage from './homepage/homepage'
import awardPage from './homepage/awardPage'

export default {
  components: {
    homepage,
    awardPage
  },
  props: {
    globalData: {}
  },
  data () {
    return {
      homeData: {
        page: 0
      },
      pageTitle: [
        '年度优秀员工',
        '小组年度优秀员工',
        '年度优秀负责人',
        '年度优秀部门',
        '最佳新人奖',
        '幸运奖'
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.homeVue{
  .homeSubpage{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
  }
}
$transitionDuring: .2s;
.homeSubpages-enter-active{
  transition: all $transitionDuring ease $transitionDuring;
}
.homeSubpages-leave-active {
  transition: all $transitionDuring ease;
}
.homeSubpages-leave-to {
  opacity: 0;
}
.homeSubpages-enter {
  opacity: 0;
}
</style>
