<template>
  <Page title="责任人身份信息">
    <UserInfo ref="userRef" :cert-type="enterpriseRnr.corporationCertType" />
    <template #slot-operation>
      <van-button type="primary" class="page-rnr-main-btn-before" round color="linear-gradient(120deg, #EDF3FF 0%, #E9F0FF 97%)" @click="handleToBefore">上一步</van-button>
      <van-button type="primary" class="page-rnr-main-btn-next" round color="linear-gradient(120deg, #4F4CFB 0%, #376FF4 97%)" @click="handleToNext">下一步</van-button>
    </template>
  </Page>
</template>

<script>
import { mapGetters } from 'vuex'
import { SET_ENTERPRISE_OWNER } from '@/store/modules/rnr'
import Page from '@/components/Page'
import UserInfo from '@/components/UserInfo'

export default {
  name: 'RnrEnterpriseUser',
  components: { Page, UserInfo },
  computed: {
    ...mapGetters(['enterpriseRnr'])
  },
  methods: {
    /**
     * 跳转到上一页
     */
    handleToBefore() {
      // 回退到上个页面
      this.$router.back()
    },

    /**
     * 跳转到首页
     */
    handleToHome() {
      this.$router.push({ name: 'Home' })
    },

    handleToNext() {
      // 开始校验
      try {
        const formData = this.$refs.userRef.validate()
        // 将值塞到缓存中
        this.$store.commit(
          `rnr/${SET_ENTERPRISE_OWNER}`,
          Object.keys(formData).reduce((memo, key) => {
            if (key === 'fullName') {
              memo['corporationName'] = formData[key]
            } else {
              const alias = `corporation${key.slice(0, 1).toUpperCase() + key.slice(1)}`
              memo[alias] = formData[key]
            }
            return memo
          }, {})
        )
        // 开始跳转页面
        this.$router.push({ name: 'RnrEnterpriseFile' })
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

<style lang="scss">
.page-rnr-main-fixed-btn-group {
  display: flex;
  justify-content: space-between;
  .page-rnr-main-btn-before {
    color: #242424 !important;
    flex: 1;
    height: 96px;
  }
  .page-rnr-main-btn-next {
    flex: 2;
    margin-left: 40px;
    height: 96px;
  }
}
</style>
