<template>
  <div>
    <BannerPage></BannerPage>
  <div class="body-wrapper">
    <InviteCode class="mg" :data="inviteCode" :status="status"></InviteCode>
    <FriendList class="mg" :list="inviteCode.inviteRecordList" v-if="inviteCode.inviteRecordList.length > 0"></FriendList>
    <BankStatus class="mg" :card="getBandLength"></BankStatus>
    <RecordList class="mg" :list="recordList"></RecordList>
    <DescPage class="mg"></DescPage>
  </div>
  </div>
</template>

<script>
import InviteCode from './components/invite-code';
import FriendList from './components/friend-list';
import BankStatus from './components/bankcard-status';
import RecordList from './components/record-list';
import DescPage from '../components/desc';
import BannerPage from './components/banner';
import {createNamespacedHelpers} from 'vuex';

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

export default {
  name: 'detailPage',
  computed: {
    ...mapState(['recordList', 'inviteCode', 'status']),
    ...mapGetters(['getBandLength'])
  },
  data() {
    return {};
  },
  mounted() {
    this.$store.dispatch('mine/bankCard/fetchBankCard', null, { root: true });
  },
  components: {
    InviteCode,
    FriendList,
    BankStatus,
    RecordList,
    DescPage,
    BannerPage
  }
};
</script>

<style lang="scss" scoped>
.body-wrapper {
  padding: 0 20PX;
}

.mg {
  margin: 0 auto;
  margin-bottom: 160px;
  text-align: center;

  &:last-child {
    margin-bottom: 0;
    padding-bottom: 120px;
  }
}

</style>