<template>
  <div>
    <template v-if="isMobile">
      <step-one v-if="step === 'first'" @stepEvent="setStep"/>
      <step-last v-if="step === 'await'" :step="step"/>
    </template>
    <template v-else>
      <accountCenter-header/>
      <realName-certification/>
    </template>
  </div>
</template>
<script>
  import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
  import RealNameCertification from '~components/certification/RealNameCertification.vue'
  import {stepOne, stepLast} from '~components/mobile/realNameCertification'
  export default {
    layout (content) {
      return content.store.state.option.isMobile ? 'mobile' : 'default'
    },
    transition: {
      name: 'fade',
      mode: 'out-in'
    },
    data () {
      return {
        step: 'first'
      }
    },
    components: {
      AccountCenterHeader,
      RealNameCertification,
      stepOne,
      stepLast
    },
    computed: {
      isMobile () {
        return this.$store.state.option.isMobile
      }
    },
    methods: {
      setStep (step) {
        this.step = step
      }
    }
  }
</script>
