<template>
  <div>
    <template v-if="isMobile">
      <header-mobile/>
      <registerPersonal-mobile/>
      <footer-mobile/>
    </template>
    <template v-else>
      <registerCenter-header/>
      <personal-registration/>
    </template>
  </div>
</template>
<script>
  import RegisterCenterHeader from '~components/default/RegisterCenterHeader.vue'
  import PersonalRegistration from '~components/register/PersonalRegistration.vue'
  import { HeaderMobile, FooterMobile } from '~components/mobile'
  import registerPersonalMobile from '~components/mobile/registerPersonal'
  export default {
    layout (context) {
      return context.store.state.option.isMobile ? 'mobile' : 'isCityFooter'
    },
    fetch ({store, route}) {
      return Promise.all([
        store.dispatch('GetLoginStyle', {appId: route.query.appId}),
        store.dispatch('GetAgreementUrl', {appId: route.query.appId})
      ])
    },
    components: {
      RegisterCenterHeader,
      PersonalRegistration,
      HeaderMobile,
      FooterMobile,
      registerPersonalMobile
    },
    computed: {
      isMobile () {
        return this.$store.state.option.isMobile
      }
    }
  }
</script>
