<template>
  <Page class="page-rnr-person-base">
    <template #slot-title>
      <span>{{ currentFlow }}/{{ totalFlow }}</span>
      <span>身份信息</span>
    </template>
    <UserInfo :value="formData" :cert-type="personRnr.certType" :show-phone="personRnr.isConsigner" ref="userRef" type="bluetooth" />
    <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 flowMixin from '@/minxin/flow'
import { SET_PERSON_CARD } from '@/store/modules/rnr'

export default {
  name: 'RnrPersonBase',
  components: { Page, UserInfo },
  mixins: [flowMixin],
  data() {
    return {
      isConnect: false,
      formData: {
        certAddress: '',
        certExpirationDate: '',
        certNumber: '',
        contactAddress: '',
        fullName: '',
        gender: ''
      }
    }
  },
  computed: {
    ...mapGetters(['isNFCDevice', 'personRnr'])
  },
  methods: {
    /**
     * 调到到下一页：腾讯的实名认证平台
     */
    handleToNext() {
      // 校验不通过的字段
      try {
        const formData = this.$refs.userRef.validate()
        // 将当前数据保存到store中
        this.$store.commit(`rnr/${SET_PERSON_CARD}`, formData)
        // 取出当前是否是委托人字段
        const { isConsigner, customerType } = this.$store.getters.personRnr
        // 如果当前是委托人，则跳转到委托人
        if (isConsigner) {
          // 跳转到支付结果页
          this.routerToNextPage('RnrPersonConsignerIdcard')
          return
        }
        // 如果当前是二手车，则跳转到文件上传页，如果当前是新车，则直接去责任告知书
        this.routerToNextPage(customerType === 1 ? 'RnrPersonFile' : 'RnrPersonNotification')
      } catch (error) {
        console.error('校验失败：', error)
      }
    },

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

<style lang="scss">
.page-rnr-person-base {
  .page-rnr-main-card {
    .page-rnr-person-base-icon-idcard-reader {
      background-image: url(../../../assets/rnr/ico_idcard_reader.png);
      background-size: 100% 100%;
      width: 654px;
      height: 272px;
      margin: 0 auto;
    }
    .page-rnr-person-base-step {
      color: #242424;
      font-size: 24px;
      text-align: center;
      font-weight: 400;
      line-height: 34px;
      margin-top: 10px;
      &:first-child {
        margin-top: 20px;
      }
    }
    .page-rnr-person-base-btn-wrap {
      margin-top: 56px;
      .van-button {
        font-size: 30px;
        .page-rnr-person-base-icon-bluetooth {
          background-image: url(../../../assets/rnr/ico_bluetooth.png);
          background-size: 100% 100%;
          display: inline-block;
          width: 30px;
          height: 30px;
          margin-right: 12px;
          margin-bottom: -4px;
        }
      }
      .page-rnr-person-base-btn-block {
        align-items: center;
        border-radius: 50%;
        color: #0761F3;
        display: flex;
        font-size: 30px;
        height: 88px;
        justify-content: center;
        margin-top: 24px;
        .page-rnr-person-base-icon-switch {
          background-image: url(../../../assets/rnr/ico_switch.png);
          background-size: 100% 100%;
          display: inline-block;
          width: 30px;
          height: 30px;
          margin-right: 12px;
          margin-bottom: -4px;
        }
      }
    }
    &.base-intro {
      padding: 26px 24px 40px !important;
    }
  }
  .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>
