<template>
  <LayoutApp :title="title">
    <Scroll class="scroll-wrapper" :options="options">
      <DetailPage v-if="status"></DetailPage>
      <WelcomePage v-else></WelcomePage>
    </Scroll>
  </LayoutApp>
</template>

<script>
import LayoutApp from '../components/layout/layout-app';
import WelcomePage from './welcome/welcome';
import DetailPage from './detail/detail';
import {Scroll} from 'cube-ui';

import {createNamespacedHelpers} from 'vuex';

const {mapState, mapActions} = createNamespacedHelpers('invite/invite');

export default {
  name: 'InvitePage',
  async asyncData({store}) {
    return store.dispatch('invite/invite/fetchStatus');
  },
  mounted() {
    if (this.status) {
      this.fetchAll();
    }
    this.$root.reportAppStart();
  },
  data() {
    return {
      title: '卖家邀新返利',
      options: {
        bounce: false
      }
    };
  },
  computed: {
    ...mapState(['status'])
  },
  methods: {
    ...mapActions(['fetchAll'])
  },
  components: {
    LayoutApp,
    WelcomePage,
    DetailPage,
    Scroll
  }
};
</script>

<style lang="scss" scoped>
.scroll-wrapper {
  background-color: #08304b;
}
</style>