<template>
  <Page class="page-rnr-person-base">
    <template #slot-title>
      <span>{{ currentFlow }}/{{ totalFlow }}</span>
      <span>身份信息</span>
    </template>
    <UserInfo :value="formData" :cert-type="personMarkup.certType" :customer="true" ref="userRef" />
    <template slot="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 Page from '@/components/Page'
import UserInfo from '@/components/UserInfo'
import ErrorWrap from '@/components/ErrorWrap'
import flowMixin from '@/minxin/flow'
import { SET_PERSON_CARD, SET_OCR_PIC } from '@/store/modules/markup'

export default {
  name: 'MarkupPersonBase',
  components: { Page, ErrorWrap, UserInfo },
  mixins: [flowMixin],
  data() {
    return {
      ocrUploading: false,
      fileList: [],
      formData: {
        certAddress: '',
        certExpirationDate: '',
        certNumber: '',
        contactAddress: '',
        fullName: '',
        gender: ''
      }
    }
  },
  computed: {
    ...mapGetters(['personMarkup'])
  },
  methods: {
    /**
     * 调到到下一页：腾讯的实名认证平台
     */
    handleToNext() {
      // 校验不通过的字段
      try {
        const formData = this.$refs.userRef.validate()
        // 将当前数据保存到store中
        this.$store.commit(`markup/${SET_PERSON_CARD}`, formData)
        this.$store.commit(`markup/${SET_OCR_PIC}`, formData.ocrPic)
        // 跳转到支付结果页
        this.routerToNextPage('MarkupPersonNotification')
      } catch (error) {
        console.error('校验失败：', error)
      }
    },

    /**
     * 跳转到上一页
     */
    handleToBefore() {
      // 回退到上个页面
      this.$router.back()
    }
  }
}
</script>

<style lang="scss">
.page-rnr-person-base {
  .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;
    }
  }
  .van-cell__label {
    .page-rnr-flex {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
